CheckBox樣式設置成按鈕

前端代碼:
<UserControl x:Class="CO_AS.UI.PersonManage.Dialogs.CheckBoxControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:uCommom="clr-namespace:AT_BC.Common.Controls;assembly=AT_BC.Common"
             mc:Ignorable="d" 
             d:DesignHeight="24" d:DesignWidth="112">
    <UserControl.Resources>
        <Style x:Key="chkBullet" TargetType="CheckBox">
            <Setter Property="IsChecked" Value="False"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="#999"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Border Width="112" Height="24" CornerRadius="5" BorderThickness="0">
                            <Grid>
                                <Border x:Name="border" Width="80" Cursor="Hand" Height="24" BorderBrush="#D8DADE" BorderThickness="1" CornerRadius="5,0,0,5" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="1 0" Background="White">
                                    <TextBlock Text="{TemplateBinding Content}"  x:Name="txt" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                                </Border>
                                <Border x:Name="borBtn" CornerRadius="0,5,5,0"  Width="32" Height="24" BorderBrush="#D8DADE" HorizontalAlignment="Right" BorderThickness="0,1,1,1">
                                    <uCommom:AppImageButton x:Name="btnChk" IsEnabled="True" Cursor="Hand"  BorderThickness="0" Background="White" ImageSource="../images/u52.png" HorizontalContentAlignment="Center" Click="btnChk_Click"> </uCommom:AppImageButton>
                                </Border>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="#1890FF"></Setter>
                                <Setter Property="Background" TargetName="border" Value="#1890FF"></Setter>
                                <Setter Property="Background" TargetName="txt"  Value="#1890FF"></Setter>
                                <Setter Property="Foreground" TargetName="txt" Value="White"></Setter>
                                <Setter Property="BorderBrush" TargetName="borBtn" Value="#1890FF"></Setter>
                                <Setter Property="ImageSource" TargetName="btnChk" Value="../images/u49.png"></Setter>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="False">

                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid>
        <CheckBox x:Name="chkUC" FontSize="12" Style="{StaticResource chkBullet}" Checked="chkUC_Checked" Unchecked="chkUC_Unchecked"/>
    </Grid>
</UserControl>

後臺代碼:
 public bool IsChecked;
 public void SetTxt(string txt)
        {
            chkUC.Content = txt;
        }
        public void SetChecked(bool IsChecked)
        {
            chkUC.IsChecked = IsChecked;
        }
private void btnChk_Click(object sender, RoutedEventArgs e)
        {
            if (chkUC.IsChecked==true)
                chkUC.IsChecked = false;
            else
                chkUC.IsChecked = true;
        }
 private void chkUC_Checked(object sender, RoutedEventArgs e)
      {
            IsChecked = true;
     }

private void chkUC_Unchecked(object sender, RoutedEventArgs e)
        {
             IsChecked= false;
        }

AppImageButton使用放圖片的按鈕替換即可。最後的樣式如圖:
這裏寫圖片描述

資源:
這裏寫圖片描述
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章