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

Question

我刚开始学习WPF,所以我不熟悉样式和模板.我想CheckBox用a Image和2 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>

结果: