ContentControl在風格化列表框中的垂直對齊

-1

我使用this answer將ListBox設置爲RadioButton，以便通過驅動通過枚舉選擇單選按鈕來簡化我的MVVM代碼 - 而不是使用一堆布爾手動來回映射到枚舉。ContentControl在風格化列表框中的垂直對齊

當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以及與Margin和Padding在每個位置都打，我可以在我的兩個XAML代碼和我聯繫的風格想到，但無論我設置了什麼，我都無法讓單選按鈕和用戶控件在頂部對齊。

有無論如何通過修改我使用的樣式或我的代碼來實現我想要的嗎？或者我只是平淡地做這個錯誤？

來源

2017-08-31 Peter M

將ListBox設置爲RadioButton？你應該閱讀：https：//stackoverflow.com/questions/37790017/wpf-mvvm-radiobutton-handle-binding-with-single-property – mm8

@ mm8有趣的是，我真的看到了第一次今天和以前的第一次已經多次使用了MVVM Radio按鈕。我可能會嘗試這種方法，但我想知道我是否仍然會遇到相同的對齊問題。 –

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

來源

2017-08-31 13:03:36 Tuco

這非常接近，但它已將單選按鈕的頂部與文本標籤的頂部對齊。而不是文本標籤的中間部分。我猜'ContentPresenter'上的負邊距會修復這個問題 –

是的，我即將解決此問題 – Tuco

以下是相同的情況https://stackoverflow.com/a/16342879/3596441 – Tuco

集的Padding的Label到0：

<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首先要能一RadioButton綁定到單個源屬性：

WPF + MVVM + RadioButton : Handle binding with single property

來源

2017-08-31 12:59:58 mm8

這實際上並沒有在我的實施中做任何事情。 –

它確實在你發佈的示例代碼中。 – mm8

使'Padding = 0'變爲我的'UserControl'時，它不會改變任何東西。 –

ContentControl在風格化列表框中的垂直對齊

回答

相關問題