How to customize the style of CheckBox in WPF - wpf

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: