如何在WPF中自定义CheckBox的样式

Question

我刚开始学习WPF，所以我不熟悉样式和模板。 我想自定义一个CheckBox Image和两个Labels，如下所示：

我该怎么办？

的.xaml

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <StackPanel>
        <CheckBox Width="150" 
                  Height="40" 
                  Margin="4" 
                  Padding="4,0,0,0">
            <Grid Background="#FFEEEEEE" 
                  Width="130"
                  MaxWidth="Infinity">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Image Grid.Row="0"
                       Grid.RowSpan="2"
                       Grid.Column="0"
                       Margin="5" 
                       Source="/WpfApplication4;component/Images/LargeIcon.png" />
                <Label Grid.Row="0"
                       Grid.Column="1" 
                       Padding="0">
                    Label1
                </Label>
                <Label Grid.Row="1"
                       Grid.Column="1" 
                       Padding="0">
                    Label2
                </Label>
            </Grid>
        </CheckBox>
    </StackPanel>
</Window>

修改

的.xaml

<Application x:Class="WpfApplication4.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2006" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             StartupUri="MainWindow.xaml">

    <Application.Resources>
        <Style x:Key="MyCheckBox" 
               TargetType="{x:Type CheckBox}">
            <Setter Property="Width" Value="150"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="Margin" Value="4"/>
            <Setter Property="Padding" Value="4,0,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <DockPanel Background="#FFEEEEEE" 
                                   Height="34"
                                   Width="130">
                            <Image DockPanel.Dock="Left"
                                   Source="/WpfApplication4;component/Images/LargeIcon.png"
                                   Margin="5" />
                            <TextBlock DockPanel.Dock="Top" Text="Label1" />
                            <TextBlock DockPanel.Dock="Top" Text="Label2" />
                        </DockPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

用于.xaml

<CheckBox Style="{StaticResource ResourceKey=MyCheckBox}" />  

出现了一些东西，但小网格消失了，就像这样：

我该怎么办？

Answer 1

DockPanel可能是此布局的最佳选择

示例：

<CheckBox>
   <DockPanel Height="34">
      <Image DockPanel.Dock="Left" Source="/WpfApplication4;component/Images/LargeIcon.png" Margin="2" />
      <TextBlock DockPanel.Dock="Top" Text="Label1" />
      <TextBlock DockPanel.Dock="Top" Text="Label2" />
   </DockPanel>
</CheckBox>

编辑：

您似乎仍希望使用默认Checkbox Template，但只需覆盖Content中的Style。

示例：

<Style x:Key="MyCheckBox" TargetType="{x:Type CheckBox}">
    <Setter Property="Width" Value="150"/>
    <Setter Property="Height" Value="40"/>
    <Setter Property="Margin" Value="4"/>
    <Setter Property="Padding" Value="4,0,0,0"/>
    <Setter Property="Content">
        <Setter.Value>
            <DockPanel Background="#FFEEEEEE" Width="130"  MaxWidth="Infinity">
                <Image DockPanel.Dock="Left" Source="Capture.png" Margin="5" />
                <TextBlock DockPanel.Dock="Top" Text="Label1" />
                <TextBlock DockPanel.Dock="Top" Text="Label2" />
            </DockPanel>
        </Setter.Value>
    </Setter>
</Style>

结果：