Кнопка Toggle в WPF

Question

Я новичок в wpf. Я хочу создать кнопку переключения, как

, как можно достичь этого. должен ли я использовать две кнопки и по щелчку каждой из них мне нужно отключить другую. или есть что-то еще, как кнопка переключения в wpf. лучший способ достичь этого .. любое предложение оценено. Спасибо

Answer 1

Вот краткая версия. Хитрость заключается в использовании стиля.

Стиль:

<Style x:Key="ButtonFocusVisual"> 
     <Setter Property="Control.Template"> 
      <Setter.Value> 
       <ControlTemplate> 
        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#F3F3F3" Offset="0"/> 
     <GradientStop Color="#EBEBEB" Offset="0.5"/> 
     <GradientStop Color="#DDDDDD" Offset="0.5"/> 
     <GradientStop Color="#CDCDCD" Offset="1"/> 
    </LinearGradientBrush> 
    <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/> 
    <Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}"> 
     <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/> 
     <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/> 
     <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/> 
     <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}"> 
        <StackPanel Orientation="Horizontal"> 
         <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         <Border x:Name="on" Width="25" Height="25" Background="LightGray" CornerRadius="2,0,0,4" Margin="10,0,0,0"> 
          <TextBlock x:Name="onText" Text="On" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
         </Border> 
         <Border x:Name="off" Width="25" Height="25" Background="LightGray" CornerRadius="0,2,4,0"> 
          <TextBlock x:Name="offText" Text="Off" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
         </Border> 
        </StackPanel> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="#ADADAD"/> 
         </Trigger> 
         <Trigger Property="IsChecked" Value="true"> 
          <Setter TargetName="on" Property="Background" Value="LightBlue"/> 
          <Setter TargetName="onText" Property="Foreground" Value="White"/> 
         </Trigger> 
         <Trigger Property="IsChecked" Value="False"> 
          <Setter TargetName="off" Property="Background" Value="LightBlue"/> 
          <Setter TargetName="offText" Property="Foreground" Value="White"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

ToggleButton называют:

<ToggleButton 
     Content="ON LINE MODE" 
     Style="{StaticResource ToggleButtonStyle1}"/> 

Просмотр