WPF单选按钮/切换按钮样式
我想模仿一组切换按钮的样式,如下图所示。任何时候只能“检查”其中一个按钮 我的问题与造型有关:WPF单选按钮/切换按钮样式,wpf,styles,radio-button,togglebutton,Wpf,Styles,Radio Button,Togglebutton,我想模仿一组切换按钮的样式,如下图所示。任何时候只能“检查”其中一个按钮 我的问题与造型有关: 我希望在最左边的按钮和最右边的按钮上有圆角,如图所示,但如果按钮之间有圆角(如图所示),则不应该有圆角。有时可能只有两个按钮可以切换 我需要不同状态的样式:“正常/未选中”、“鼠标悬停”、“按下”和“选中”最少 我为此使用的当前控件如下所示: <StackPanel Orientation="Horizontal" > <RadioButton Style="{Stat
- 我希望在最左边的按钮和最右边的按钮上有圆角,如图所示,但如果按钮之间有圆角(如图所示),则不应该有圆角。有时可能只有两个按钮可以切换
- 我需要不同状态的样式:“正常/未选中”、“鼠标悬停”、“按下”和“选中”最少
<StackPanel Orientation="Horizontal" >
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="All" Padding="12,8,12,8" GroupName="View" />
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Geolocated" Padding="12,8,12,8" GroupName="View" />
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Non Geolocated" Padding="12,8,12,8" GroupName="View" />
</StackPanel>
在StackPanel参考资料中,我试图为ToggleButton设置样式,但我对如何实现上图所示的结果感到非常困惑。这可能不是最简单/最好的方法,但我尝试使用Kaxaml构建一些
控制模板,以生成如下内容:
<StackPanel Orientation="Horizontal" >
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="All" Padding="12,8,12,8" GroupName="View" />
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Geolocated" Padding="12,8,12,8" GroupName="View" />
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Non Geolocated" Padding="12,8,12,8" GroupName="View" />
</StackPanel>
您可以将这些模板存储在ResourceDictionary
中,并在需要时应用它们,或者在动态构建按钮列表时使用它们
实际上,我创建了三种稍有不同的样式,一种用于左侧和右侧按钮,另一种用于中间按钮(您可以通过扩展/继承样式来简化这一点)。省略了一些重复的代码
<Grid>
<Grid.Resources>
<!-- Brushes for colours/backgrounds -->
<SolidColorBrush x:Key="FontBrush" Color="#DDDDDD"/>
<LinearGradientBrush x:Key="BgBrush1" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#888888"/>
<GradientStop Offset="1" Color="#222222"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="BorderBrush1" Color="#333333"/>
<LinearGradientBrush x:Key="CheckedBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#555555"/>
<GradientStop Offset="1" Color="#111111"/>
</LinearGradientBrush>
<!-- Left Button Template -->
<ControlTemplate x:Key="ToggleButtonLeft" TargetType="{x:Type ToggleButton}">
<Border
Name="Border"
Background="{StaticResource BgBrush1}"
BorderBrush="{StaticResource BorderBrush1}"
BorderThickness="1"
CornerRadius="5,0,0,5">
<ContentPresenter
HorizontalAlignment="Center"
Margin="{TemplateBinding Padding}"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"
TextBlock.FontWeight="Bold"
TextBlock.Foreground="{StaticResource FontBrush}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="#808080"/>
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource CheckedBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- Middle Button(s) Template -->
<ControlTemplate x:Key="ToggleButtonMid" TargetType="{x:Type ToggleButton}">
<Border
Name="Border"
Background="{StaticResource BgBrush1}"
BorderBrush="{StaticResource BorderBrush1}"
BorderThickness="0,1,0,1"
CornerRadius="0" />
<!-- Other code identical to Left Button Template -->
</ControlTemplate>
<!-- Right Button Template -->
<ControlTemplate x:Key="ToggleButtonRight" TargetType="{x:Type ToggleButton}">
<Border
Name="Border"
Background="{StaticResource BgBrush1}"
BorderBrush="{StaticResource BorderBrush1}"
BorderThickness="1"
CornerRadius="0, 5, 5, 0" />
<!-- Other code identical to Left Button Template -->
</ControlTemplate>
</Grid.Resources>
<!-- Example Usage -->
<Grid Background="#555555">
<StackPanel Height="25" Orientation="Horizontal" Margin="5">
<RadioButton Content="All" GroupName="View" Padding="2" Template="{DynamicResource ToggleButtonLeft}"/>
<RadioButton Content="Geolocated" GroupName="View" Padding="2" Template="{DynamicResource ToggleButtonMid}"/>
<RadioButton Content="Non Geolocated" GroupName="View" Padding="2" Template="{DynamicResource ToggleButtonRight}"/>
</StackPanel>
</Grid>
</Grid>
您必须为IsPressed
状态添加额外的触发器
等,以及所需的任何其他触发器(例如IsEnabled
)