WPF RadioButton/ToggleButton Styling

Question

Ich möchte einen Stil für eine Gruppe von ToggleButtons wie im Bild unten imitieren. Nur eine der Schaltflächen kann jederzeit "überprüft" werden.

ist Meine Frage an Styling bezogen werden:

• Ich möchte auf die Schaltfläche ganz links abgerundete Ecken haben und die äußerste rechte Taste wie im Bild, aber wenn es eine Taste zwischen ist (wie im Bild), sollte das keine abgerundeten Ecken haben. Manchmal sind nur zwei Schaltflächen zum Umschalten verfügbar.
• Ich brauche Stil für verschiedene Zustände: "Normal/Ungeprüft", "Mouseover", "Gedrückt" und "Überprüft" mindestens.

Die Stromsteuer ich dafür bin mit wie dies geschehen ist:

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

In den Stackpanel Ressourcen I Style für ToggleButton zu setzen versuchen aber ich bin ziemlich verloren, wie das Ergebnis zu erreichen im Bild oben.

Answer 1

Dies kann nicht der einfachste/beste Ansatz sein, aber ich habe einen Stich an etwas ControlTemplates mit Kaxaml Klopfen auf, etwas zu produzieren, das wie folgt aussieht:

Sie diese Vorlagen könnte speichern in a ResourceDictionary und wenden Sie sie bei Bedarf an, oder verwenden Sie sie, wenn Sie Ihre Schaltflächenliste im laufenden Betrieb erstellen.

Ich habe tatsächlich drei leicht unterschiedliche Stile erstellt, einen für die linken und rechten Schaltflächen und einen für die Mitte (möglicherweise können Sie dies durch das Erweitern/Erben von Stilen vereinfachen). Einige wiederholte Code weggelassen.

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

Sie haben würden zusätzliche Triggers etc. für den IsPressed Zustand hinzuzufügen, und alle anderen erforderlichen (z IsEnabled).