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

Question

I'm just begin study WPF, so I'm unfamiliar with style and template. I want to customize a CheckBox with a Image and two Labels like this:

How can I do?

.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>

Edit:

.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>

used in .xaml

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

Something be presented, but the small grid is disappeared, like this:

How can I do?

Answer 1

The DockPanel may be the best option for this layout

Example:

<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>

Edit:

It looks like you still want to use the default Checkbox Template but just override the Content in your Style .

Example:

<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>

Result: