我是 WPF 的新手,请帮助我实现此项目的目标。 右侧的流按钮角和左侧的图表按钮不应该被逼入角落。我想实现这个目标:
但目前他们看起来如下所示。按钮的当前样式:
TextAnswersSkin.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="LoginSkin.xaml"/>
<ResourceDictionary Source="MainSkin.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Style x:Key="ShadowStyle" TargetType="{x:Type ListBox}">
<Setter Property="Control.Foreground" Value="Black" />
</Style>
<Style x:Key="listBoxItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Margin" Value="0" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ToggleBtnStyle_forname" TargetType="{x:Type ToggleButton}">
<!--<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>-->
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="checkedVisual">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UnCheckedVisual">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="rectangle1">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="rectangle1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle1">
<EasingColorKeyFrame KeyTime="0" Value="#FF0095C6"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF006687"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF002A37"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle" RadiusY="2" RadiusX="2" Stroke="#FF0AA3D5" Fill="#FF4CBFE4"/>
<Rectangle x:Name="rectangle1" RadiusY="1" RadiusX="1" Stroke="{x:Null}" Height="Auto" VerticalAlignment="Stretch" Opacity="0.5" StrokeThickness="0" Margin="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF4EC0E4" Offset="0"/>
<GradientStop Offset="1" Color="#FF0DA4D6"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<StackPanel x:Name="UnCheckedVisual" Height="Auto" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Visible" Margin="0,0">
<TextBlock TextWrapping="Wrap" Text="Show Wordcloud" VerticalAlignment="Center" Margin="0,0,0,0"/>
</StackPanel>
<StackPanel x:Name="checkedVisual" Height="Auto" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed" Margin="0,0">
<TextBlock TextWrapping="Wrap" Text="Hide Wordcloud" VerticalAlignment="Center" Margin="0,0,0,0"/>
</StackPanel>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true"/>
<Trigger Property="IsChecked" Value="true"/>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ToggleBtnStyle_chart" TargetType="ToggleButton">
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<!--<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="rectangle1">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="rectangle1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle1">
<EasingColorKeyFrame KeyTime="0" Value="#FF0095C6"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>-->
<!--<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="rectangle1">
<EasingColorKeyFrame KeyTime="0" Value="#FF01556E"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle1">
<EasingColorKeyFrame KeyTime="0" Value="#FF006A89"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF026A89"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>-->
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF026A89"/>
</ColorAnimationUsingKeyFrames>
<!--<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsEnabled">
<DiscreteBooleanKeyFrame KeyTime="10:00:00" Value="False" />
</BooleanAnimationUsingKeyFrames>-->
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<!--<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF006687"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>-->
</VisualState>
<VisualState x:Name="Pressed"/>
<!--<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF006687"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>-->
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle" RadiusY="2" RadiusX="2" Stroke="#FF0AA3D5" Fill="#FF4CBFE4"/>
<Rectangle x:Name="rectangle1" RadiusY="1" RadiusX="1" Stroke="{x:Null}" Height="Auto" VerticalAlignment="Stretch" Opacity="0.5" StrokeThickness="0" Margin="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF4EC0E4" Offset="0"/>
<GradientStop Offset="1" Color="#FF0DA4D6"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
<Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true"/>
<Trigger Property="IsChecked" Value="true"/>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ToggleBtnStyle_stream" TargetType="ToggleButton">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<!--<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="rectangle1" >
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="rectangle1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle1">
<EasingColorKeyFrame KeyTime="0" Value="#FF0095C6"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>-->
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF026A89"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
</VisualState>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle" RadiusY="2" RadiusX="2" Stroke="#FF0AA3D5" Fill="#FF4CBFE4"/>
<Rectangle x:Name="rectangle1" RadiusY="1" RadiusX="1" Stroke="{x:Null}" Height="Auto" VerticalAlignment="Stretch" Opacity="0.5" StrokeThickness="0" Margin="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF4EC0E4" Offset="0"/>
<GradientStop Offset="1" Color="#FF0DA4D6"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
<Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="True"/>
<Trigger Property="IsChecked" Value="True"/>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
TextAnswers.xaml
<UserControl x:Class="ResponseSystem.Controls.TextAnswers"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:ResponseSystem.ViewModel"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:controls="clr-namespace:ResponseSystem.Controls"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF4"
mc:Ignorable="d"
Visibility="{Binding TextAnswersVisibility}"
x:Name="tac"
d:DesignHeight="300" d:DesignWidth="300" ClipToBounds="True" >
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Q-Launcher;component/Skins/MainSkin.xaml"/>
<ResourceDictionary Source="/Q-Launcher;component/Skins/LoginSkin.xaml"/>
<ResourceDictionary Source="/Q-Launcher;component/Skins/TextAnswersSkin.xaml"/>
</ResourceDictionary.MergedDictionaries>
<vm:ViewModelLocator x:Key="Locator" />
</ResourceDictionary>
</UserControl.Resources>
<UserControl.DataContext>
<Binding Source="{StaticResource Locator}" Path="Main" />
</UserControl.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition>
<RowDefinition.Height>1*</RowDefinition.Height>
</RowDefinition>
</Grid.RowDefinitions>
<DockPanel>
<StackPanel Orientation="Horizontal">
<ToggleButton x:Name="btnShowStream" Style="{StaticResource ToggleBtnStyle_stream}"
Margin="10,0,-2,0" Height="20"
VerticalAlignment="Bottom"
Command="{Binding ShowStreamCommand}"
IsChecked="{Binding Path=TextAnswersStreamVisibility, Converter={StaticResource VisiblityToBoolConverter}, Mode=OneWay}"
IsEnabled="{Binding Path=TextAnswersChartVisibility, Converter={StaticResource VisiblityToBoolConverter}, Mode=OneWay}"
Foreground="White"
d:LayoutOverrides="GridBox" Padding="0,0,2,0">
<TextBlock Text=" Stream " VerticalAlignment="Center" />
</ToggleButton>
<ToggleButton x:Name="btnShowChart" Style="{StaticResource ToggleBtnStyle_stream}"
Height="20"
Margin="0,0,0,0"
Padding="2,0,0,0"
VerticalAlignment="Bottom"
Command="{Binding ShowChartCommand}"
IsChecked="{Binding Path=TextAnswersChartVisibility, Converter={StaticResource VisiblityToBoolConverter}, Mode=OneWay}"
IsEnabled="{Binding Path=TextAnswersStreamVisibility, Converter={StaticResource VisiblityToBoolConverter}, Mode=OneWay}"
Foreground="White"
d:LayoutOverrides="GridBox">
<TextBlock Text=" Chart " VerticalAlignment="Center" />
</ToggleButton>
<!--<Label Content="{Binding ElementName=btnShowStream, Path=IsChecked}"></Label>
<Label Content="{Binding ElementName=btnShowChart, Path=IsChecked}"></Label>-->
<!--IsChecked="{Binding Path=ShowChart, Converter={StaticResource BoolToNullableBoolConverter}, Mode=OneWay}"-->
</StackPanel>
<ToggleButton Style="{StaticResource ToggleBtnStyle_forname}" x:Name="btnShowWordcloud" HorizontalAlignment="Right" VerticalAlignment="Bottom"
Command="{Binding ShowWordcloudCommand}"
IsChecked="{Binding Path=ShowWordcloud, Converter={StaticResource BoolToNullableBoolConverter}, Mode=OneWay}"
Margin="0,0,10,0" Height="20" Width="105" d:LayoutOverrides="GridBox" Foreground="White">
<!--Visibility="{Binding AnonymousVisibility}"-->
<TextBlock Text="Show Wordcloud" VerticalAlignment="Center" />
</ToggleButton>
</DockPanel>
<DockPanel Grid.Row="1">
<controls:TextAnswersStream x:Name="AnswersStream" Visibility="{Binding Path=TextAnswersStreamVisibility}">
<controls:TextAnswersStream.ClipToBounds>True</controls:TextAnswersStream.ClipToBounds>
</controls:TextAnswersStream>
</DockPanel>
<DockPanel Grid.Row="1">
<controls:TextAnswersChart x:Name="AnswersChart" Visibility="{Binding Path=TextAnswersChartVisibility}">
<controls:TextAnswersChart.ClipToBounds>True</controls:TextAnswersChart.ClipToBounds>
</controls:TextAnswersChart>
</DockPanel>
</Grid>
答案 0 :(得分:1)
您可以尝试为按钮使用控件模板。
为正确设置参数后,可以为边框定义样式。
创建这些按钮的示例:
Image of buttons created by the code in example
<StackPanel Orientation="Horizontal" Height="40">
<Button Content="Stream" Width="75">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Border CornerRadius="8,0,0,8" BorderThickness="1" BorderBrush="Black"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Content="Chart" Width="75" Margin="-1,0,0,0">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Border CornerRadius="0,8,8,0" BorderThickness="1" BorderBrush="Black"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>