Style WPF RadioButton / ToggleButton

Je voudrais imiter un style pour un groupe de contrôles togglebutton comme dans l'image ci-dessous. Un seul des boutons peuvent être "Vérifiée à tout moment.

Style WPF RadioButton /ToggleButton

Ma question est liée au style:

  • J'aimerais avoir des coins arrondis sur le bouton de gauche et le bouton le plus à droite comme dans l'image, mais si il y a un bouton entre les deux (comme dans l'image), qui ne devrait pas avoir des coins arrondis. Parfois, il peut seulement être deux boutons à bascule.
  • J'ai besoin de style pour les différents états: "Normal/Unchecked", "Mouseover", "Pressé" et "Vérifié" au minimum.

Le contrôle en cours je suis à l'aide de ce qui est fait de cette manière:

<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>

Dans le StackPanel Ressources, je suis en train de définir un Style pour ToggleButton, mais je suis assez perdu comment faire pour atteindre le résultat comme dans l'image ci-dessus.

source d'informationauteur Nuts

  1. 13

    Cela peut ne pas être la méthode la plus simple/la meilleure approche, mais j'ai pris un coup de couteau à frapper quelques ControlTemplates à l'aide de Kaxaml, de produire quelque chose qui ressemble à ceci:

    Style WPF RadioButton /ToggleButton

    Vous pouvez stocker ces modèles dans un ResourceDictionary et de les appliquer lorsque requis, ou les utiliser si vous avez été la construction de votre bouton de liste à la volée.

    J'ai effectivement créé trois légèrement différents styles, pour les boutons gauche et droite, et l'autre pour le milieu (vous pouvez être en mesure de simplifier cette extension/styles hérités). Certains répété code omis.

    <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>

    Vous devrez ajouter de nouvelles Triggers etc. pour le IsPressed de l'état, et tous les autres requis (e.g IsEnabled).