WPF實現Win10單選框CheckBox效果
阿新 • • 發佈:2020-08-11
重寫控制元件模板
<Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="CheckBox"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <TextBlock Text="{TemplateBinding Content}" Grid.Column="1" Name="ShowText" Margin="5,0,0,0"/> <Rectangle Name="Rect" Grid.Column="0" Height="{Binding ElementName=ShowText,Path=ActualHeight}" Width="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}"/> <TextBlock Text="L" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" RenderTransformOrigin="0.5,0.5" Foreground="White"> <TextBlock.RenderTransform> <TransformGroup> <ScaleTransform ScaleY="1" ScaleX="-1"/> <SkewTransform AngleY="0" AngleX="0"/> <RotateTransform Angle="45"/> <TranslateTransform/> </TransformGroup> </TextBlock.RenderTransform> </TextBlock> </Grid> </Setter.Value> </Setter>
觸發器,當IsChecked
為true
時填充個顏色指向Rectangle
<Trigger Property="IsChecked" Value="true"> <Setter Property="Fill" Value="#555ED4" TargetName="Rect"/> </Trigger> <Trigger Property="IsChecked" Value="false"> <Setter Property="Fill" Value="Lightgray" TargetName="Rect"/> </Trigger>
引用資源樣式
<CheckBox IsChecked="True" Content="記住密碼"
Height="15" Style="{StaticResource checkboxStyle}"
Foreground="Gray"/>
效果圖
完整程式碼
<Style x:Key="checkboxStyle" TargetType="CheckBox"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="CheckBox"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <TextBlock Text="{TemplateBinding Content}" Grid.Column="1" Name="ShowText" Margin="5,0,0,0"/> <Rectangle Name="Rect" Grid.Column="0" Height="{Binding ElementName=ShowText,Path=ActualHeight}" Width="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}"/> <TextBlock Text="L" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" RenderTransformOrigin="0.5,0.5" Foreground="White"> <TextBlock.RenderTransform> <TransformGroup> <ScaleTransform ScaleY="1" ScaleX="-1"/> <SkewTransform AngleY="0" AngleX="0"/> <RotateTransform Angle="45"/> <TranslateTransform/> </TransformGroup> </TextBlock.RenderTransform> </TextBlock> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsChecked" Value="true"> <Setter Property="Fill" Value="#555ED4" TargetName="Rect"/> </Trigger> <Trigger Property="IsChecked" Value="false"> <Setter Property="Fill" Value="Lightgray" TargetName="Rect"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="Cursor" Value="Hand"/> </Style>