WPF子弹头复选框(BulletCheckBox)
2017-08-10 16:11
246 查看
效果：
Style:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:CheckBoxTest.Controls"
xmlns:converter="clr-namespace:CheckBoxTest.Controls.Converter">
<sys:Double x:Key="BulletCheckBox.FixWidth">70</sys:Double>
<sys:Double x:Key="BulletCheckBox.FixHeight">28</sys:Double>
<sys:Double x:Key="BulletCheckBox.Unckecked.HandleWidth">15</sys:Double>
<sys:Double x:Key="BulletCheckBox.Ckecked.HandleWidth">21</sys:Double>
<sys:Double x:Key="BulletCheckBox.MovePosition">40</sys:Double>
<SolidColorBrush x:Key="BulletCheckBox.Unckecked.BorderBrush" Color="#FF333333"/>
<SolidColorBrush x:Key="BulletCheckBox.Unckecked.Background" Color="#FFEEEEEE"/>
<SolidColorBrush x:Key="BulletCheckBox.Unckecked.HandleBackground" Color="#FF333333"/>
<SolidColorBrush x:Key="BulletCheckBox.Ckecked.Background" Color="#FF0078D7"/>
<SolidColorBrush x:Key="BulletCheckBox.OutSide.Foreground" Color="#FF444444"/>
<sys:Double x:Key="BulletCheckBox.OutsideTextFixWidth">44</sys:Double>
<sys:Double x:Key="BulletCheckBox.OutsideTextFixHeight">20</sys:Double>
<sys:Double x:Key="BulletCheckBox.OutsideTextMovePosition">22</sys:Double>
<sys:Double x:Key="BulletCheckBox.Unckecked.OutsideTextHandleWidth">8</sys:Double>
<sys:Double x:Key="BulletCheckBox.Ckecked.OutsideTextHandleWidth">12</sys:Double>
<SolidColorBrush x:Key="BulletCheckBox.Unckecked.OutsideTextBackground" Color="#FFEEEEEE"/>
<SolidColorBrush x:Key="BulletCheckBox.Ckecked.OutsideTextBackground" Color="#FF0078D7"/>
<ControlTemplate x:Key="BulletCheckBox_FixTempleate" TargetType="{x:Type local:BulletCheckBox}">
<Grid HorizontalAlignment="Left" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="border" Grid.Column="1" SnapsToDevicePixels="True"
Margin="0"
BorderThickness="2"
CornerRadius="12"
Background="{StaticResource BulletCheckBox.Unckecked.Background}"
BorderBrush="{StaticResource BulletCheckBox.Unckecked.BorderBrush}"
Width="{StaticResource BulletCheckBox.FixWidth}"
Height="{StaticResource BulletCheckBox.FixHeight}"
VerticalAlignment="Stretch">
<Grid>
<Border x:Name="checkHandle"
Margin="3,2"
CornerRadius="12"
Width="{StaticResource BulletCheckBox.Unckecked.HandleWidth}"
Height="{StaticResource BulletCheckBox.Unckecked.HandleWidth}"
SnapsToDevicePixels="True"
Background="{StaticResource BulletCheckBox.Unckecked.HandleBackground}"
HorizontalAlignment="Left">
<Border.RenderTransform>
<TranslateTransform x:Name="handleTranslate" X="0"/>
</Border.RenderTransform>
</Border>
<TextBlock x:Name="checkedText" Text="{TemplateBinding CheckedText}" FontSize="16"
HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Center"
Margin="5,0,0,0" Visibility="Collapsed"
Foreground="{Binding CheckedForeground, RelativeSource={RelativeSource TemplatedParent}}"/>
<TextBlock x:Name="uncheckedText" Text="{TemplateBinding UncheckedText}" FontSize="16"
Foreground="{TemplateBinding Foreground}"
VerticalAlignment="Center" HorizontalAlignment="Right" TextAlignment="Center"
Margin="0,0,5,0" Visibility="Visible">
</TextBlock>
</Grid>
</Border>
<TextBlock x:Name="outsideText" Grid.Column="2"
Text="{TemplateBinding UncheckedText}" FontSize="18"
HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Center"
Margin="8,0,0,0" Visibility="Collapsed"
Foreground="{StaticResource BulletCheckBox.OutSide.Foreground}"/>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsTextOutside, RelativeSource={RelativeSource Mode=Self}}" Value="True">
<Setter TargetName="checkedText" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="checkedText" Property="Foreground" Value="Transparent"/>
<Setter TargetName="uncheckedText" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="outsideText" Property="Visibility" Value="Visible"/>
<Setter TargetName="border" Property="Width" Value="{StaticResource BulletCheckBox.OutsideTextFixWidth}"/>
<Setter TargetName="border" Property="Height" Value="{StaticResource BulletCheckBox.OutsideTextFixHeight}"/>
<Setter TargetName="border" Property="CornerRadius" Value="8"/>
<Setter TargetName="checkHandle" Property="Width" Value="{StaticResource BulletCheckBox.Unckecked.OutsideTextHandleWidth}"/>
<Setter TargetName="checkHandle" Property="Height" Value="{StaticResource BulletCheckBox.Unckecked.OutsideTextHandleWidth}"/>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=IsChecked, RelativeSource={RelativeSource Mode=Self}}" Value="True"/>
<Condition Binding="{Binding Path=IsTextOutside, RelativeSource={RelativeSource Mode=Self}}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter TargetName="border" Property="Background" Value="{StaticResource BulletCheckBox.Ckecked.OutsideTextBackground}"/>
<Setter TargetName="border" Property="BorderBrush" Value="{StaticResource BulletCheckBox.Ckecked.OutsideTextBackground}"/>
<Setter TargetName="checkHandle" Property="Background" Value="{StaticResource BulletCheckBox.Unckecked.OutsideTextBackground}"/>
<Setter TargetName="checkHandle" Property="Width" Value="{StaticResource BulletCheckBox.Ckecked.OutsideTextHandleWidth}"/>
<Setter TargetName="checkHandle" Property="Height" Value="{StaticResource BulletCheckBox.Ckecked.OutsideTextHandleWidth}"/>
<MultiDataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="handleTranslate" Storyboard.TargetProperty="X" To="{StaticResource BulletCheckBox.OutsideTextMovePosition}" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="handleTranslate" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=IsChecked, RelativeSource={RelativeSource Mode=Self}}" Value="True"/>
<Condition Binding="{Binding Path=IsTextOutside, RelativeSource={RelativeSource Mode=Self}}" Value="False"/>
</MultiDataTrigger.Conditions>
<Setter TargetName="checkedText" Property="Visibility" Value="Visible"/>
<Setter TargetName="uncheckedText" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="checkHandle" Property="Background" Value="{StaticResource BulletCheckBox.Unckecked.Background}"/>
<Setter TargetName="checkHandle" Property="Width" Value="{StaticResource BulletCheckBox.Ckecked.HandleWidth}"/>
<Setter TargetName="checkHandle" Property="Height" Value="{StaticResource BulletCheckBox.Ckecked.HandleWidth}"/>
<Setter TargetName="border" Property="Background" Value="{StaticResource BulletCheckBox.Ckecked.Background}"/>
<Setter TargetName="border" Property="BorderBrush" Value="{StaticResource BulletCheckBox.Ckecked.Background}"/>
<Setter TargetName="outsideText" Property="Text" Value="{Binding CheckedText, RelativeSource={RelativeSource TemplatedParent}}"/>
<MultiDataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="handleTranslate" Storyboard.TargetProperty="X" To="{StaticResource BulletCheckBox.MovePosition}" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="handleTranslate" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="border" Property="Opacity" Value="0.5"/>
<Setter TargetName="outsideText" Property="Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="BulletCheckBox_Templeate" TargetType="{x:Type local:BulletCheckBox}">
<Viewbox x:Name="viewBox" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Center">
<Grid HorizontalAlignment="Left" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="border" Grid.Column="1" SnapsToDevicePixels="True"
Margin="0"
BorderThickness="2"
CornerRadius="12"
Background="{StaticResource BulletCheckBox.Unckecked.Background}"
BorderBrush="{StaticResource BulletCheckBox.Unckecked.BorderBrush}"
Width="{StaticResource BulletCheckBox.FixWidth}"
Height="{StaticResource BulletCheckBox.FixHeight}"
VerticalAlignment="Stretch">
<Grid>
<Border x:Name="checkHandle"
Margin="3,2"
CornerRadius="12"
Width="{StaticResource BulletCheckBox.Unckecked.HandleWidth}"
Height="{StaticResource BulletCheckBox.Unckecked.HandleWidth}"
SnapsToDevicePixels="True"
Background="{StaticResource BulletCheckBox.Unckecked.HandleBackground}"
HorizontalAlignment="Left">
<Border.RenderTransform>
<TranslateTransform x:Name="handleTranslate" X="0"/>
</Border.RenderTransform>
</Border>
<TextBlock x:Name="checkedText" Text="{TemplateBinding CheckedText}" FontSize="16"
HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Center"
Margin="5,0,0,0" Visibility="Collapsed"
Foreground="{Binding CheckedForeground, RelativeSource={RelativeSource TemplatedParent}}"/>
<TextBlock x:Name="uncheckedText" Text="{TemplateBinding UncheckedText}" FontSize="16"
Foreground="{TemplateBinding Foreground}"
VerticalAlignment="Center" HorizontalAlignment="Right" TextAlignment="Center"
Margin="0,0,5,0" Visibility="Visible">
</TextBlock>
</Grid>
</Border>
<TextBlock x:Name="outsideText" Grid.Column="2"
Text="{TemplateBinding UncheckedText}" FontSize="18"
HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Center"
Margin="8,0,0,0" Visibility="Collapsed"
Foreground="{StaticResource BulletCheckBox.OutSide.Foreground}"/>
</Grid>
</Viewbox>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsViewBoxEnable,RelativeSource={RelativeSource Self}}" Value="True">
<Setter TargetName="viewBox" Property="Stretch" Value="Uniform"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsTextOutside, RelativeSource={RelativeSource Mode=Self}}" Value="True">
<Setter TargetName="checkedText" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="checkedText" Property="Foreground" Value="Transparent"/>
<Setter TargetName="uncheckedText" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="outsideText" Property="Visibility" Value="Visible"/>
</DataTrigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="checkedText" Property="Visibility" Value="Visible"/>
<Setter TargetName="uncheckedText" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="checkHandle" Property="Background" Value="{StaticResource BulletCheckBox.Unckecked.Background}"/>
<Setter TargetName="checkHandle" Property="Width" Value="{StaticResource BulletCheckBox.Ckecked.HandleWidth}"/>
<Setter TargetName="checkHandle" Property="Height" Value="{StaticResource BulletCheckBox.Ckecked.HandleWidth}"/>
<Setter TargetName="border" Property="Background" Value="{StaticResource BulletCheckBox.Ckecked.Background}"/>
<Setter TargetName="border" Property="BorderBrush" Value="{StaticResource BulletCheckBox.Ckecked.Background}"/>
<Setter TargetName="outsideText" Property="Text" Value="{Binding CheckedText, RelativeSource={RelativeSource TemplatedParent}}"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="handleTranslate" Storyboard.TargetProperty="X" To="{StaticResource BulletCheckBox.MovePosition}" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="handleTranslate" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="border" Property="Opacity" Value="0.5"/>
<Setter TargetName="outsideText" Property="Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--固定大小-->
<Style x:Key="BulletCheckBoxFixedStyle" TargetType="{x:Type local:BulletCheckBox}">
<Setter Property="Background" Value="#FF4A9E4A"/>
<Setter Property="Foreground" Value="#FFAAAAAA"/>
<Setter Property="CheckedForeground" Value="White"/>
<Setter Property="CheckedBackground" Value="#FF0CC50C"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Width" Value="{Binding Width, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="Height" Value="{Binding Height, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="Margin" Value="1"/>
<Setter Property="Template" Value="{StaticResource BulletCheckBox_FixTempleate}"/>
</Style>
<!--ViewBox可缩放-->
<Style TargetType="{x:Type local:BulletCheckBox}">
<Setter Property="Background" Value="#FF4A9E4A"/>
<Setter Property="Foreground" Value="#FFAAAAAA"/>
<Setter Property="CheckedForeground" Value="White"/>
<Setter Property="CheckedBackground" Value="#FF0CC50C"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Width" Value="{Binding Width, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="Height" Value="{Binding Height, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template" Value="{StaticResource BulletCheckBox_Templeate}"/>
</Style>
</ResourceDictionary>
CS:
public class BulletCheckBox : CheckBox
{
static BulletCheckBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(BulletCheckBox), new FrameworkPropertyMetadata(typeof(BulletCheckBox)));
}
public BulletCheckBox()
{
}
//protected override void OnChecked(RoutedEventArgs e)
//{
// base.OnChecked(e);
//}
public static readonly DependencyProperty UncheckedTextProperty = DependencyProperty.Register(nameof(UncheckedText), typeof(string), typeof(BulletCheckBox),
new PropertyMetadata(""));
/// <summary>
/// 默认文本（未选中）
/// </summary>
public string UncheckedText
{
get { return (string)GetValue(UncheckedTextProperty); }
set { SetValue(UncheckedTextProperty, value); }
}
public static readonly DependencyProperty CheckedTextProperty = DependencyProperty.Register(nameof(CheckedText), typeof(string), typeof(BulletCheckBox),
new PropertyMetadata(""));
/// <summary>
/// 选中状态文本
/// </summary>
public string CheckedText
{
get { return (string)GetValue(CheckedTextProperty); }
set { SetValue(CheckedTextProperty, value); }
}
public static readonly DependencyProperty CheckedForegroundProperty =
DependencyProperty.Register(nameof(CheckedForeground), typeof(Brush), typeof(BulletCheckBox), new PropertyMetadata(Brushes.WhiteSmoke));
/// <summary>
/// 选中状态前景样式
/// </summary>
public Brush CheckedForeground
{
get { return (Brush)GetValue(CheckedForegroundProperty); }
set { SetValue(CheckedForegroundProperty, value); }
}
public static readonly DependencyProperty CheckedBackgroundProperty = DependencyProperty.Register(nameof(CheckedBackground), typeof(Brush), typeof(BulletCheckBox),
new PropertyMetadata(new SolidColorBrush(Color.FromArgb(255, 0, 120,215))));
/// <summary>
/// 选中状态背景色
/// </summary>
public Brush CheckedBackground
{
get { return (Brush)GetValue(CheckedBackgroundProperty); }
set { SetValue(CheckedBackgroundProperty, value); }
}
public static readonly DependencyProperty IsTextOutsideProperty = DependencyProperty.Register(nameof(IsTextOutside), typeof(bool), typeof(BulletCheckBox),
new PropertyMetadata(false));
/// <summary>
/// 文本显示在外面
/// </summary>
public bool IsTextOutside
{
get { return (bool)GetValue(IsTextOutsideProperty); }
set { SetValue(IsTextOutsideProperty, value); }
}
public static readonly DependencyProperty IsViewBoxEnableProperty = DependencyProperty.Register(nameof(IsViewBoxEnable), typeof(bool), typeof(BulletCheckBox),
new PropertyMetadata(false));
/// <summary>
/// 是否是能ViewBox缩放功能
/// </summary>
public bool IsViewBoxEnable
{
get { return (bool)GetValue(IsViewBoxEnableProperty); }
set { SetValue(IsViewBoxEnableProperty, value); }
}
}
使用：
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<CheckBox Content="男"/>
<TextBlock x:Name="icon"
Text=""
FontFamily="/CheckBoxTest;component/Resources/#iconfont"
FontSize="30"
Margin="5"
Foreground="Red"/>
<contros:BulletCheckBox UncheckedText="OFF" CheckedText="ON" Width="70" HorizontalAlignment="Left"/>
<contros:BulletCheckBox UncheckedText="@_@" CheckedText="~_~"/>
<contros:BulletCheckBox UncheckedText="OFF" CheckedText="ON" Style="{StaticResource BulletCheckBoxFixedStyle}"/>
<contros:BulletCheckBox UncheckedText="关" CheckedText="开"
IsTextOutside="True"
IsViewBoxEnable="True"/>
<contros:BulletCheckBox UncheckedText="关" CheckedText="开"
IsTextOutside="True"/>
<contros:BulletCheckBox UncheckedText="关" CheckedText="开"
IsTextOutside="True"
Style="{StaticResource BulletCheckBoxFixedStyle}"/>
<contros:BulletCheckBox
IsTextOutside="True"
Style="{StaticResource BulletCheckBoxFixedStyle}"/>
</StackPanel>
Style:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:CheckBoxTest.Controls"
xmlns:converter="clr-namespace:CheckBoxTest.Controls.Converter">
<sys:Double x:Key="BulletCheckBox.FixWidth">70</sys:Double>
<sys:Double x:Key="BulletCheckBox.FixHeight">28</sys:Double>
<sys:Double x:Key="BulletCheckBox.Unckecked.HandleWidth">15</sys:Double>
<sys:Double x:Key="BulletCheckBox.Ckecked.HandleWidth">21</sys:Double>
<sys:Double x:Key="BulletCheckBox.MovePosition">40</sys:Double>
<SolidColorBrush x:Key="BulletCheckBox.Unckecked.BorderBrush" Color="#FF333333"/>
<SolidColorBrush x:Key="BulletCheckBox.Unckecked.Background" Color="#FFEEEEEE"/>
<SolidColorBrush x:Key="BulletCheckBox.Unckecked.HandleBackground" Color="#FF333333"/>
<SolidColorBrush x:Key="BulletCheckBox.Ckecked.Background" Color="#FF0078D7"/>
<SolidColorBrush x:Key="BulletCheckBox.OutSide.Foreground" Color="#FF444444"/>
<sys:Double x:Key="BulletCheckBox.OutsideTextFixWidth">44</sys:Double>
<sys:Double x:Key="BulletCheckBox.OutsideTextFixHeight">20</sys:Double>
<sys:Double x:Key="BulletCheckBox.OutsideTextMovePosition">22</sys:Double>
<sys:Double x:Key="BulletCheckBox.Unckecked.OutsideTextHandleWidth">8</sys:Double>
<sys:Double x:Key="BulletCheckBox.Ckecked.OutsideTextHandleWidth">12</sys:Double>
<SolidColorBrush x:Key="BulletCheckBox.Unckecked.OutsideTextBackground" Color="#FFEEEEEE"/>
<SolidColorBrush x:Key="BulletCheckBox.Ckecked.OutsideTextBackground" Color="#FF0078D7"/>
<ControlTemplate x:Key="BulletCheckBox_FixTempleate" TargetType="{x:Type local:BulletCheckBox}">
<Grid HorizontalAlignment="Left" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="border" Grid.Column="1" SnapsToDevicePixels="True"
Margin="0"
BorderThickness="2"
CornerRadius="12"
Background="{StaticResource BulletCheckBox.Unckecked.Background}"
BorderBrush="{StaticResource BulletCheckBox.Unckecked.BorderBrush}"
Width="{StaticResource BulletCheckBox.FixWidth}"
Height="{StaticResource BulletCheckBox.FixHeight}"
VerticalAlignment="Stretch">
<Grid>
<Border x:Name="checkHandle"
Margin="3,2"
CornerRadius="12"
Width="{StaticResource BulletCheckBox.Unckecked.HandleWidth}"
Height="{StaticResource BulletCheckBox.Unckecked.HandleWidth}"
SnapsToDevicePixels="True"
Background="{StaticResource BulletCheckBox.Unckecked.HandleBackground}"
HorizontalAlignment="Left">
<Border.RenderTransform>
<TranslateTransform x:Name="handleTranslate" X="0"/>
</Border.RenderTransform>
</Border>
<TextBlock x:Name="checkedText" Text="{TemplateBinding CheckedText}" FontSize="16"
HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Center"
Margin="5,0,0,0" Visibility="Collapsed"
Foreground="{Binding CheckedForeground, RelativeSource={RelativeSource TemplatedParent}}"/>
<TextBlock x:Name="uncheckedText" Text="{TemplateBinding UncheckedText}" FontSize="16"
Foreground="{TemplateBinding Foreground}"
VerticalAlignment="Center" HorizontalAlignment="Right" TextAlignment="Center"
Margin="0,0,5,0" Visibility="Visible">
</TextBlock>
</Grid>
</Border>
<TextBlock x:Name="outsideText" Grid.Column="2"
Text="{TemplateBinding UncheckedText}" FontSize="18"
HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Center"
Margin="8,0,0,0" Visibility="Collapsed"
Foreground="{StaticResource BulletCheckBox.OutSide.Foreground}"/>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsTextOutside, RelativeSource={RelativeSource Mode=Self}}" Value="True">
<Setter TargetName="checkedText" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="checkedText" Property="Foreground" Value="Transparent"/>
<Setter TargetName="uncheckedText" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="outsideText" Property="Visibility" Value="Visible"/>
<Setter TargetName="border" Property="Width" Value="{StaticResource BulletCheckBox.OutsideTextFixWidth}"/>
<Setter TargetName="border" Property="Height" Value="{StaticResource BulletCheckBox.OutsideTextFixHeight}"/>
<Setter TargetName="border" Property="CornerRadius" Value="8"/>
<Setter TargetName="checkHandle" Property="Width" Value="{StaticResource BulletCheckBox.Unckecked.OutsideTextHandleWidth}"/>
<Setter TargetName="checkHandle" Property="Height" Value="{StaticResource BulletCheckBox.Unckecked.OutsideTextHandleWidth}"/>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=IsChecked, RelativeSource={RelativeSource Mode=Self}}" Value="True"/>
<Condition Binding="{Binding Path=IsTextOutside, RelativeSource={RelativeSource Mode=Self}}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter TargetName="border" Property="Background" Value="{StaticResource BulletCheckBox.Ckecked.OutsideTextBackground}"/>
<Setter TargetName="border" Property="BorderBrush" Value="{StaticResource BulletCheckBox.Ckecked.OutsideTextBackground}"/>
<Setter TargetName="checkHandle" Property="Background" Value="{StaticResource BulletCheckBox.Unckecked.OutsideTextBackground}"/>
<Setter TargetName="checkHandle" Property="Width" Value="{StaticResource BulletCheckBox.Ckecked.OutsideTextHandleWidth}"/>
<Setter TargetName="checkHandle" Property="Height" Value="{StaticResource BulletCheckBox.Ckecked.OutsideTextHandleWidth}"/>
<MultiDataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="handleTranslate" Storyboard.TargetProperty="X" To="{StaticResource BulletCheckBox.OutsideTextMovePosition}" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="handleTranslate" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=IsChecked, RelativeSource={RelativeSource Mode=Self}}" Value="True"/>
<Condition Binding="{Binding Path=IsTextOutside, RelativeSource={RelativeSource Mode=Self}}" Value="False"/>
</MultiDataTrigger.Conditions>
<Setter TargetName="checkedText" Property="Visibility" Value="Visible"/>
<Setter TargetName="uncheckedText" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="checkHandle" Property="Background" Value="{StaticResource BulletCheckBox.Unckecked.Background}"/>
<Setter TargetName="checkHandle" Property="Width" Value="{StaticResource BulletCheckBox.Ckecked.HandleWidth}"/>
<Setter TargetName="checkHandle" Property="Height" Value="{StaticResource BulletCheckBox.Ckecked.HandleWidth}"/>
<Setter TargetName="border" Property="Background" Value="{StaticResource BulletCheckBox.Ckecked.Background}"/>
<Setter TargetName="border" Property="BorderBrush" Value="{StaticResource BulletCheckBox.Ckecked.Background}"/>
<Setter TargetName="outsideText" Property="Text" Value="{Binding CheckedText, RelativeSource={RelativeSource TemplatedParent}}"/>
<MultiDataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="handleTranslate" Storyboard.TargetProperty="X" To="{StaticResource BulletCheckBox.MovePosition}" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="handleTranslate" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="border" Property="Opacity" Value="0.5"/>
<Setter TargetName="outsideText" Property="Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="BulletCheckBox_Templeate" TargetType="{x:Type local:BulletCheckBox}">
<Viewbox x:Name="viewBox" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Center">
<Grid HorizontalAlignment="Left" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="border" Grid.Column="1" SnapsToDevicePixels="True"
Margin="0"
BorderThickness="2"
CornerRadius="12"
Background="{StaticResource BulletCheckBox.Unckecked.Background}"
BorderBrush="{StaticResource BulletCheckBox.Unckecked.BorderBrush}"
Width="{StaticResource BulletCheckBox.FixWidth}"
Height="{StaticResource BulletCheckBox.FixHeight}"
VerticalAlignment="Stretch">
<Grid>
<Border x:Name="checkHandle"
Margin="3,2"
CornerRadius="12"
Width="{StaticResource BulletCheckBox.Unckecked.HandleWidth}"
Height="{StaticResource BulletCheckBox.Unckecked.HandleWidth}"
SnapsToDevicePixels="True"
Background="{StaticResource BulletCheckBox.Unckecked.HandleBackground}"
HorizontalAlignment="Left">
<Border.RenderTransform>
<TranslateTransform x:Name="handleTranslate" X="0"/>
</Border.RenderTransform>
</Border>
<TextBlock x:Name="checkedText" Text="{TemplateBinding CheckedText}" FontSize="16"
HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Center"
Margin="5,0,0,0" Visibility="Collapsed"
Foreground="{Binding CheckedForeground, RelativeSource={RelativeSource TemplatedParent}}"/>
<TextBlock x:Name="uncheckedText" Text="{TemplateBinding UncheckedText}" FontSize="16"
Foreground="{TemplateBinding Foreground}"
VerticalAlignment="Center" HorizontalAlignment="Right" TextAlignment="Center"
Margin="0,0,5,0" Visibility="Visible">
</TextBlock>
</Grid>
</Border>
<TextBlock x:Name="outsideText" Grid.Column="2"
Text="{TemplateBinding UncheckedText}" FontSize="18"
HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Center"
Margin="8,0,0,0" Visibility="Collapsed"
Foreground="{StaticResource BulletCheckBox.OutSide.Foreground}"/>
</Grid>
</Viewbox>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsViewBoxEnable,RelativeSource={RelativeSource Self}}" Value="True">
<Setter TargetName="viewBox" Property="Stretch" Value="Uniform"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsTextOutside, RelativeSource={RelativeSource Mode=Self}}" Value="True">
<Setter TargetName="checkedText" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="checkedText" Property="Foreground" Value="Transparent"/>
<Setter TargetName="uncheckedText" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="outsideText" Property="Visibility" Value="Visible"/>
</DataTrigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="checkedText" Property="Visibility" Value="Visible"/>
<Setter TargetName="uncheckedText" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="checkHandle" Property="Background" Value="{StaticResource BulletCheckBox.Unckecked.Background}"/>
<Setter TargetName="checkHandle" Property="Width" Value="{StaticResource BulletCheckBox.Ckecked.HandleWidth}"/>
<Setter TargetName="checkHandle" Property="Height" Value="{StaticResource BulletCheckBox.Ckecked.HandleWidth}"/>
<Setter TargetName="border" Property="Background" Value="{StaticResource BulletCheckBox.Ckecked.Background}"/>
<Setter TargetName="border" Property="BorderBrush" Value="{StaticResource BulletCheckBox.Ckecked.Background}"/>
<Setter TargetName="outsideText" Property="Text" Value="{Binding CheckedText, RelativeSource={RelativeSource TemplatedParent}}"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="handleTranslate" Storyboard.TargetProperty="X" To="{StaticResource BulletCheckBox.MovePosition}" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="handleTranslate" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="border" Property="Opacity" Value="0.5"/>
<Setter TargetName="outsideText" Property="Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--固定大小-->
<Style x:Key="BulletCheckBoxFixedStyle" TargetType="{x:Type local:BulletCheckBox}">
<Setter Property="Background" Value="#FF4A9E4A"/>
<Setter Property="Foreground" Value="#FFAAAAAA"/>
<Setter Property="CheckedForeground" Value="White"/>
<Setter Property="CheckedBackground" Value="#FF0CC50C"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Width" Value="{Binding Width, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="Height" Value="{Binding Height, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="Margin" Value="1"/>
<Setter Property="Template" Value="{StaticResource BulletCheckBox_FixTempleate}"/>
</Style>
<!--ViewBox可缩放-->
<Style TargetType="{x:Type local:BulletCheckBox}">
<Setter Property="Background" Value="#FF4A9E4A"/>
<Setter Property="Foreground" Value="#FFAAAAAA"/>
<Setter Property="CheckedForeground" Value="White"/>
<Setter Property="CheckedBackground" Value="#FF0CC50C"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Width" Value="{Binding Width, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="Height" Value="{Binding Height, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template" Value="{StaticResource BulletCheckBox_Templeate}"/>
</Style>
</ResourceDictionary>
CS:
public class BulletCheckBox : CheckBox
{
static BulletCheckBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(BulletCheckBox), new FrameworkPropertyMetadata(typeof(BulletCheckBox)));
}
public BulletCheckBox()
{
}
//protected override void OnChecked(RoutedEventArgs e)
//{
// base.OnChecked(e);
//}
public static readonly DependencyProperty UncheckedTextProperty = DependencyProperty.Register(nameof(UncheckedText), typeof(string), typeof(BulletCheckBox),
new PropertyMetadata(""));
/// <summary>
/// 默认文本（未选中）
/// </summary>
public string UncheckedText
{
get { return (string)GetValue(UncheckedTextProperty); }
set { SetValue(UncheckedTextProperty, value); }
}
public static readonly DependencyProperty CheckedTextProperty = DependencyProperty.Register(nameof(CheckedText), typeof(string), typeof(BulletCheckBox),
new PropertyMetadata(""));
/// <summary>
/// 选中状态文本
/// </summary>
public string CheckedText
{
get { return (string)GetValue(CheckedTextProperty); }
set { SetValue(CheckedTextProperty, value); }
}
public static readonly DependencyProperty CheckedForegroundProperty =
DependencyProperty.Register(nameof(CheckedForeground), typeof(Brush), typeof(BulletCheckBox), new PropertyMetadata(Brushes.WhiteSmoke));
/// <summary>
/// 选中状态前景样式
/// </summary>
public Brush CheckedForeground
{
get { return (Brush)GetValue(CheckedForegroundProperty); }
set { SetValue(CheckedForegroundProperty, value); }
}
public static readonly DependencyProperty CheckedBackgroundProperty = DependencyProperty.Register(nameof(CheckedBackground), typeof(Brush), typeof(BulletCheckBox),
new PropertyMetadata(new SolidColorBrush(Color.FromArgb(255, 0, 120,215))));
/// <summary>
/// 选中状态背景色
/// </summary>
public Brush CheckedBackground
{
get { return (Brush)GetValue(CheckedBackgroundProperty); }
set { SetValue(CheckedBackgroundProperty, value); }
}
public static readonly DependencyProperty IsTextOutsideProperty = DependencyProperty.Register(nameof(IsTextOutside), typeof(bool), typeof(BulletCheckBox),
new PropertyMetadata(false));
/// <summary>
/// 文本显示在外面
/// </summary>
public bool IsTextOutside
{
get { return (bool)GetValue(IsTextOutsideProperty); }
set { SetValue(IsTextOutsideProperty, value); }
}
public static readonly DependencyProperty IsViewBoxEnableProperty = DependencyProperty.Register(nameof(IsViewBoxEnable), typeof(bool), typeof(BulletCheckBox),
new PropertyMetadata(false));
/// <summary>
/// 是否是能ViewBox缩放功能
/// </summary>
public bool IsViewBoxEnable
{
get { return (bool)GetValue(IsViewBoxEnableProperty); }
set { SetValue(IsViewBoxEnableProperty, value); }
}
}
使用：
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<CheckBox Content="男"/>
<TextBlock x:Name="icon"
Text=""
FontFamily="/CheckBoxTest;component/Resources/#iconfont"
FontSize="30"
Margin="5"
Foreground="Red"/>
<contros:BulletCheckBox UncheckedText="OFF" CheckedText="ON" Width="70" HorizontalAlignment="Left"/>
<contros:BulletCheckBox UncheckedText="@_@" CheckedText="~_~"/>
<contros:BulletCheckBox UncheckedText="OFF" CheckedText="ON" Style="{StaticResource BulletCheckBoxFixedStyle}"/>
<contros:BulletCheckBox UncheckedText="关" CheckedText="开"
IsTextOutside="True"
IsViewBoxEnable="True"/>
<contros:BulletCheckBox UncheckedText="关" CheckedText="开"
IsTextOutside="True"/>
<contros:BulletCheckBox UncheckedText="关" CheckedText="开"
IsTextOutside="True"
Style="{StaticResource BulletCheckBoxFixedStyle}"/>
<contros:BulletCheckBox
IsTextOutside="True"
Style="{StaticResource BulletCheckBoxFixedStyle}"/>
</StackPanel>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【WPF】自定义CheckBox复选框
- Silverlight Telerik控件学习：带CheckBox复选框的树形TreeView控件
- Android 自定义CheckBoxPreference的CheckBox复选框
- WPF 带CheckBox、图标的TreeView
- 纯CSS设置Checkbox复选框控件的样式
- ExtJS4 grid添加复选框（checkbox）列
- html 复选框checkbox
- （DataTable_checkbox复选框）批量审核全流程（前台到服务器）
- jquery如何判断checkbox（复选框）是否被选中
- wpf DataGrid CheckBox 变相的全选
- JQUERY对复选框（CHECKBOX)的的操作
- WPF DataGridCheckBoxColumn列不更新问题方案
- asp.net中复选框checkbox选中datalist中的商品后显示选中商品的临时表
- Android中复选框CheckBox的初始化细节
- ASP.net(c#)取得CheckBoxList(复选框)的值
- Android练习-----单选按钮(RadioButton) && 复选框(CheckBox)
- android 在listView中如果需要使用复选框功能，强烈建议使用图片作为背景代替checkBox。亲测好用
- Android-单选按钮RadioButton和复选框checkbox
- jquery如何判断checkbox（复选框）是否被选中