WPF中 CheckBox(复选框)自定成“开关”动态控件

<Style x:Key="CheckBoxSwitchStyle" TargetType="{x:Type CheckBox}">
        <Setter Property="IsChecked" Value="False"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Background" Value="#FFFFFF"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <Border Width="50" Name="CheckTrueBG" Height="26" BorderThickness="1" Background="#CCCCCC"  CornerRadius="13" BorderBrush="#CCCCCC" >
                        <Grid>
                            <Border BorderThickness="1" Background="#FFFFFF" x:Name="border" Width="22" Height="22" CornerRadius="10" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0"  >
                                <Border.RenderTransform>
                                    <TranslateTransform  X="1"/>
                                </Border.RenderTransform>
                            </Border>
                            <TextBlock x:Name="txt" Text="{TemplateBinding Content}"   FontSize="{TemplateBinding FontSize}" Margin="6.996,2.798,0,2.798" VerticalAlignment="Stretch" Foreground="#CCCCCC" HorizontalAlignment="Left" >
                                <TextBlock.RenderTransform>
                                    <TranslateTransform   X="17"></TranslateTransform>
                                </TextBlock.RenderTransform>
                            </TextBlock>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="Background" TargetName="CheckTrueBG"  Value="#00CC8F"/>
                            <Setter Property="Foreground" TargetName="txt"  Value="#FFFFFF"/>
                            <Setter Property="Background" TargetName="border"  Value="#FFFFFF"/>
                            <Setter Property="Text" TargetName="txt" Value="{Binding Tag,RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="26" Duration="00:00:0.2"/>
                                        <DoubleAnimation Storyboard.TargetName="txt" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="0" Duration="00:00:0.2"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="0" Duration="00:00:0.2"/>
                                        <DoubleAnimation Storyboard.TargetName="txt" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="17" Duration="00:00:0.2"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="False">
                            <Setter Property="Text" TargetName="txt" Value="{Binding Content,RelativeSource={RelativeSource TemplatedParent}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值