Technika WPF RadioButton/ToggleButton

Question

Chciałbym naśladować styl grupy ToggleButtons, jak na poniższym obrazku. Tylko jeden z przycisków można w dowolnym momencie "sprawdzić".

Moje pytanie związane jest z stylizacji:

• Chciałbym mieć zaokrąglone rogi na skrajnym lewym przyciskiem i przycisk po prawej stronie, jak w obrazie, ale jeśli nie ma przycisku pomiędzy (jak na zdjęciu), które nie powinno mieć zaokrąglonych rogów. Czasami można przełączać tylko dwa przyciski.
• Potrzebuję stylu dla różnych stanów: "Normalny/Niezaznaczony", "Przesuwanie", "Wciśnięty" i "Sprawdzony" co najmniej.

Obecna kontrola Używam tego jest zrobione tak:

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

w zasobach stackpanel Próbuję ustawić styl ToggleButton ale jestem całkiem zagubiony jak osiągnąć wynik jako na powyższym obrazku.

Answer 1

To nie może być najprostszym/najlepszym podejściem, ale wziąłem ukłucie na pukanie trochę ControlTemplates użyciu Kaxaml, aby produkować coś, co wygląda tak:

Mogłeś zapisać te szablony w a ResourceDictionary i zastosuj je w razie potrzeby lub użyj ich, jeśli tworzyłeś listę przycisków w locie.

Właściwie stworzyłem trzy nieco różne style, jeden dla lewego i prawego przycisku, a drugi dla środkowego (możesz to uprościć dzięki rozszerzającym/dziedziczącym stylom). Niektóre powtórzone kody zostały pominięte.

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

Trzeba by dodać dodatkowe Triggers itp dla państwa IsPressed oraz wszelkie inne wymagane (np IsEnabled).