Question

我使用this answer将ListBox设置为RadioButton，以便通过枚举驱动选中已选中的单选按钮来简化我的MVVM代码 - 而不是一堆我必须手动地来回映射到枚举。

当ListBoxItem内容是一个简单的文本行时，这非常有效。单选按钮与文本对齐，一切都很开心。但是，当我将内容更改为UserControl时，该选项的单选按钮将呈现在UserControl的垂直中点，而不是顶部（我想要的位置）。

下面是一些代码和图片，可以更好地解释我想要做的事情（请注意，为清晰起见，遗漏了一堆内容）：

我作为内容插入其中一个选项的UserControl

<UserControl x:Class="TestCtl">
    <StackPanel Orientation="Vertical" >
        <Label Margin="-5,0,0,0" Content="Choice #2"/>
        <CheckBox Margin="10,0,0,5">Option 1</CheckBox>
        <CheckBox Margin="10,0,0,5">Option 2</CheckBox>
        <CheckBox Margin="10,0,0,0">Option 3</CheckBox>
    </StackPanel>
</UserControl>

ListBox（其他地方定义的上述风格）

<StackPanel Orientation="Vertical">
    <ListBox SelectedValuePath="Tag" 
             Style="{StaticResource RadioButtonList}" 
             SelectedValue="{Binding Blah Blah"}>
        <ListBoxItem Tag="Choice1" Content="Choice #1" />
        <ListBoxItem Tag="Choice2">
            <ContentControl>
                <subf:TestCtl />
            </ContentControl>
        </ListBoxItem>
        <ListBoxItem Tag="Choice3" Content="Choice #3"/>
        <ListBoxItem Tag="Choice4" Content="Choice #4" /> 
    </ListBox>
    <ComboBox blah blah/>
</StackPanel>

呈现时的样子：

我尝试同时设置VerticalAlignment和VerticalContentAlignment以及在我的xaml代码和我的xaml代码中可以想到的每个位置都使用Margin和Padding我链接的风格，但无论我设置什么，我都可以让单选按钮和用户控件在它们的顶部对齐。

无论如何通过修改我使用的样式或我的代码来实现我想要的东西？或者我只是做错了吗？

Answer 1

将Padding的{{1}}设置为Label：

这应该可以解决垂直对齐问题。但是您不必首先使用<ListBoxItem Tag="Choice1" Content="Choice #1" /> <ListBoxItem Tag="Choice2"> <UserControl> <StackPanel Orientation="Vertical" > <Label Content="Choice #2" Padding="0"/> <CheckBox Margin="10,0,0,5">Option 1</CheckBox> <CheckBox Margin="10,0,0,5">Option 2</CheckBox> <CheckBox Margin="10,0,0,0">Option 3</CheckBox> </StackPanel> </UserControl> </ListBoxItem> <ListBoxItem Tag="Choice3" Content="Choice #3"/> <ListBoxItem Tag="Choice4" Content="Choice #4" />来将ListBox绑定到单个源属性：

WPF + MVVM + RadioButton : Handle binding with single property

Answer 2

在RabioButtonList样式中更改：

 <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="{x:Type ListBoxItem}" >
                    <Setter Property="Margin" Value="5" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <Border BorderThickness="0" Background="Transparent">
                                    <!-- CHANGE THIS -->
                                    <StackPanel Orientation="Horizontal">
                                        <RadioButton 
                                        Focusable="False"
                                        IsHitTestVisible="False"
                                        IsChecked="{TemplateBinding IsSelected}"/>
                                        <ContentPresenter />
                                    </StackPanel>
                                     <!------------------>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>

在用户控件中将标签Padding设置为5,0,0,0（感谢mm8）

 <StackPanel Orientation="Vertical" >
    <Label Margin="-5,0,0,0" Content="Choice #2" Padding="5,0,0,0"/>
    <CheckBox Margin="10,0,0,5">Option 1</CheckBox>
    <CheckBox Margin="10,0,0,5">Option 2</CheckBox>
    <CheckBox Margin="10,0,0,0">Option 3</CheckBox>
</StackPanel>

ContentControl在样式ListBox中的垂直对齐方式

2 个答案: