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

Question

我有一个带有 HierachicalDatatemplates 节点的 WPF Treeview。子节点包含用于选择子节点的复选框。到目前为止一切顺利。

子节点的内容应该是一个多行内容的复选框，几个文本框和根据视图模型的一些图片。

当我将内容放入复选框时，复选框始终显示在内容的垂直中心。但我希望复选框位于内容的左上角。

这是一个示例 WPF 代码：

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

由于节点的选择，我希望内容位于复选框内。我已经尝试为复选框设置 verticalcontentalignment，但它没有任何改变。

编辑：填充是一种解决方案，但不幸的是，无论内容是什么，复选框的位置都应始终位于左上角。内容的行可能会有所不同...

也许有人已经解决了这个小问题。

Answer 1

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

复选框控件使用 ContentPresenter，它（带有复选框）主要设计用于基本文本方案。

because of the selection of the nodes.

这是提供答案变得棘手的地方，因为现在要求必须在树视图的上下文（可以这么说）内工作。这些要求只有你能说...但是...

选项

据我所知，您有以下选择：

创建一个自定义复合控件（请注意，可以在模板中使用），一个扩展的复选框控件，基本上呈现就像上面显示的围绕网格的工作一样。请注意，您可以将图像和内容绑定到自定义控件的内部，并公开随后绑定的依赖属性。
在 Blend 中创建一个新的 Checkbox 样式，并取出包含 您需要 内容的内容呈现器。（我在下面的示例中这样做了）。

没有快速的方法来做到这一点...但是可以使用自定义控件（我的主要建议）或模板更改。

新复选框样式

原来的 ContentPresenter 已经被移除，取而代之的是一个网格来容纳复选框和文本。下面的样式创建了这个：

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

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

WPF Checkbox align to top left with multiline content

c#

wpf

checkbox

选项

新复选框样式