WPF Checkbox phong cách thay đổi

Question

Tôi vừa bắt đầu với WPF và cần tính năng cụ thể cho một hộp kiểm:

1. Tôi muốn thay đổi hình dạng từ một hộp để một hình elip.
2. Hơn nữa, phải có thay đổi màu (xanh = true, red = false) thay vì gạch chéo.

Nền: Tôi có các cảm biến khác nhau và muốn bật/tắt chúng thông qua các hộp kiểm này. Tôi cũng nghĩ về việc sử dụng các nút thay vì các hộp kiểm, nhưng tôi nghĩ rằng chức năng được nhiều hơn cho bởi các hộp kiểm.

Tôi hy vọng mô tả của tôi là dễ hiểu. Có thể định nghĩa một mẫu kiểu như vậy không?

Kind coi

Alex

Answer 1

Bạn sẽ cần để tùy chỉnh Checkbox và tạo ra một Tuỳ chỉnh Template.
Để làm điều đó, bạn cần thay đổi default Checkbox Template.

Điều bạn muốn làm là phát một chút với trình kích hoạt và nền để tạo kiểu như bạn muốn. Lưu ý rằng thuộc tính CheckMark, bạn có thể muốn giữ nó Hidden

Answer 2

Ok cuối cùng tôi đã làm được! Trong đính kèm bạn có thể thấy giải pháp của tôi và tôi confortable với kết quả. Nếu ai đó có bất kỳ bình luận nào, xin đừng ngần ngại viết bình luận. Cảm ơn bạn rất nhiều vì đã giúp đỡ của bạn

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Style TargetType="CheckBox" x:Key="CircleCheckbox"> 
     <Setter Property="Cursor" Value="Hand"></Setter> 
     <Setter Property="Content" Value=""></Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type CheckBox}">     
        <Grid>      
         <Ellipse x:Name="outerEllipse"> 
          <Ellipse.Fill> 
           <RadialGradientBrush> 
            <GradientStop Offset="0" Color="Red"/> 
            <GradientStop Offset="0.88" Color="LightCoral"/> 
            <GradientStop Offset="1" Color="DarkRed"/> 
           </RadialGradientBrush> 
          </Ellipse.Fill> 
         </Ellipse> 
         <Ellipse Margin="10" x:Name="highlightCircle" > 
          <Ellipse.Fill > 
           <LinearGradientBrush > 
            <GradientStop Offset="0" Color="Green"/> 
            <GradientStop Offset="0.5" Color="LightGreen"/> 
            <GradientStop Offset="1" Color="DarkGreen"/> 
           </LinearGradientBrush> 
          </Ellipse.Fill> 
         </Ellipse> 
         <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsChecked" Value="True"> 
          <Setter TargetName="highlightCircle" Property="Fill"> 
           <Setter.Value> 
            <LinearGradientBrush StartPoint="0.3,0" EndPoint="0.7,1"> 
             <GradientStop Offset="0" Color="Green"/> 
             <GradientStop Offset="0.5" Color="LightGreen"/> 
             <GradientStop Offset="1" Color="DarkGreen"/> 
            </LinearGradientBrush> 
           </Setter.Value> 
          </Setter> 
          <Setter TargetName="outerEllipse" Property="Fill"> 
           <Setter.Value> 
            <RadialGradientBrush> 
             <GradientStop Offset="0" Color="Green"/> 
             <GradientStop Offset="0.88" Color="LightGreen"/> 
             <GradientStop Offset="1" Color="DarkGreen"/> 
            </RadialGradientBrush> 
           </Setter.Value> 
          </Setter> 
         </Trigger> 
         <Trigger Property="IsChecked" Value="False"> 
          <Setter TargetName="highlightCircle" Property="Fill"> 
           <Setter.Value> 
            <LinearGradientBrush StartPoint="0.3,0" EndPoint="0.7,1"> 
             <GradientStop Offset="0" Color="Red"/> 
             <GradientStop Offset="0.5" Color="LightCoral"/> 
             <GradientStop Offset="1" Color="DarkRed"/> 
            </LinearGradientBrush> 
           </Setter.Value> 
          </Setter> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>  
</ResourceDictionary>