WPF复选框与多行内容对齐到左上角

Question

I've got a WPF Treeview with HierachicalDatatemplates for the nodes. The Child nodes are containing checkboxes for selecting the children. So far so good.

The content of the childnode should be a checkbox with multiline content several Textboxes and according to the viewmodel some pics.

When I put the content inside the checkbox, the box is always displayed in the vertical center of the content. But I want the checkbox to be on the top left of the content.

Here is an example WPF code:

<Window x:Class="Spielwiese.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">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <!--THIS IS WHAT I LIKE TO USE-->
    <CheckBox Grid.Column="0" Margin="5">
        <StackPanel>
            <TextBlock Text="Some text" />
            <TextBlock Text="Some more text" />
            <TextBlock Text="a lot of more text" />
        </StackPanel>
    </CheckBox>       


    <!--THIS IS MY ACTUAL WORKAROUND-->
    <Grid Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>
        <CheckBox Grid.Column="0" Margin="0,3,5,0" />
        <StackPanel Grid.Column="1">
            <TextBlock Text="Some text" />
            <TextBlock Text="Some more text" />
            <TextBlock Text="a lot of more text" />
        </StackPanel>
    </Grid>
</Grid>

I would prefer the content to be inside the checkbock because of the selection of the nodes. I already tried to set verticalcontentalignment for the checkbock but it changed nothing.

EDIT: Padding is a solution but unfortunately the position of the checkbox should be always on top left no matter which content. The lines of the content may vary...

Maybe somone has already solution for this little problem.

Answer 1

I would prefer the content to be inside the checkbo[x] because of the selection of the nodes.

The checkbox control uses a ContentPresenter which (with the checkbox) is primarily designed to work with basic text scenarios.

because of the selection of the nodes.

This is where providing an answer gets tricky because now the requirement has to work within the context (so to speak) of a treeview. Only you can speak to those requirements...but...

Options

As I see it you have these options:

1. Create a custom composite control (can be used in a template mind you), an extended checkbox control really , which basically presents like the work around grid you have shown above. Note that you can then have the images and content bound to the internals of the custom control with dependency properties exposed which will be subsequently bound.
2. Create a new Checkbox style in Blend and take out the content presenter with the content you need included within it. (I did this in the example below).

There is no quick way of doing this...but either by a custom control (my primary advice to do) or a template change can be used.

New Check Box Style

The original ContentPresenter has been removed and replaced with a grid to hold the checkbox and text. The below style creates this:

<Style x:Key="OmegaCheckBoxStyle" TargetType="{x:Type CheckBox}">
<Setter Property="Foreground" 
        Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="{StaticResource CheckBoxFillNormal}"/>
<Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource EmptyCheckBoxFocusVisual}"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type CheckBox}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="4" />
                <ColumnDefinition Width="auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>

            </Grid.RowDefinitions>
                <BulletDecorator Background="Transparent" 
                                 SnapsToDevicePixels="true"  
                                 VerticalAlignment="Bottom">
                    <BulletDecorator.Bullet>
                         <Themes:BulletChrome BorderBrush="{TemplateBinding BorderBrush}" 
                                            Background="{TemplateBinding Background}" 
                                            IsChecked="{TemplateBinding IsChecked}" 
                                    RenderMouseOver="{TemplateBinding IsMouseOver}" 
                                            RenderPressed="{TemplateBinding IsPressed}"
                                                />
                    </BulletDecorator.Bullet>
                </BulletDecorator>

                <TextBlock Text="Some text"  Grid.Row="0" Grid.Column="2"/>
                <TextBlock Text="Some more text" Grid.Row="1" Grid.Column="2"/>
                <TextBlock Text="a lot of more text" Grid.Row="2" Grid.Column="2"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="HasContent" Value="true">
                    <Setter Property="FocusVisualStyle" 
                            Value="{StaticResource CheckRadioFocusVisual}"/>
                    <Setter Property="Padding" Value="4,0,0,0"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Foreground" 
                            Value="{DynamicResource {x:Static 
                                                     SystemColors.GrayTextBrushKey}}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>            
</Setter>