none
Border的背景和边沿之间有白色 RRS feed

答案

  • Hi,

    我测试了你的代码,具体的原因我也不知道,应该是设置了margin之后导致的位移偏差。

    建议删除下面的行,不要改变border的颜色。

     <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource BulletCheckBox.Ckecked.Background}"/>

    你也可以将Boreder的宽度扩大一点,添加上面一句。

     <Setter TargetName="border" Property="BorderThickness" Value="3"/>

    你也可以删除整个border,就是不要border这一层。

    另外,你的模板很多都没有用,所以我精简了你的代码,供你参考:

    <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">20</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_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"  
                 
                    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="Red"  
                            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="BorderThickness" Value="3"/>-->
    
    
                    <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 TargetType="{x:Type local:BulletCheckBox}">
            <Setter Property="Template" Value="{StaticResource BulletCheckBox_Templeate}"/>
        </Style>

    Best Regards,

    Bob


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.


    2017年8月11日 7:38
    版主

全部回复

  • Hi,

    请展示相关代码,以便我们可以重现你的问题。

    你可以参考: WPF  自定义ToggleButton样式

    Best Regards,

    Bob


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    2017年8月10日 10:56
    版主
  • <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>
    

    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); }
        }
    }

    2017年8月10日 12:18
  • Hi,

    我测试了你的代码,具体的原因我也不知道,应该是设置了margin之后导致的位移偏差。

    建议删除下面的行,不要改变border的颜色。

     <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource BulletCheckBox.Ckecked.Background}"/>

    你也可以将Boreder的宽度扩大一点,添加上面一句。

     <Setter TargetName="border" Property="BorderThickness" Value="3"/>

    你也可以删除整个border,就是不要border这一层。

    另外,你的模板很多都没有用,所以我精简了你的代码,供你参考:

    <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">20</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_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"  
                 
                    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="Red"  
                            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="BorderThickness" Value="3"/>-->
    
    
                    <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 TargetType="{x:Type local:BulletCheckBox}">
            <Setter Property="Template" Value="{StaticResource BulletCheckBox_Templeate}"/>
        </Style>

    Best Regards,

    Bob


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.


    2017年8月11日 7:38
    版主
  • 呵呵,我是看到系统自带的有背景,颜色也是跟它一样的。非常感谢你的一直指导~
    2017年8月11日 9:29
  • Hi,

    很高兴为你解答,欢迎在MSDN论坛发帖。

    Best Regards,

    Bob


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    2017年8月11日 9:32
    版主