垂直对齐于复选框

Question

我有一个复选框其XAML标记如下：

<CheckBox HorizontalContentAlignment="Stretch"> 
    <StackPanel Orientation="Vertical"> 
     <TextBox x:Name="editTextBox" 
      Text="{Binding Path=Caption, Mode=TwoWay}" 
      TextWrapping="Wrap" 
      Visibility="{Binding Path=IsBeingEdited, Converter={StaticResource booleanToVisibilityConverter}}" /> 
     <TextBlock x:Name="itemText" 
      TextWrapping="Wrap"       
      Text="{Binding Path=Caption}" 
      Visibility="{Binding Path=IsBeingEdited, Converter={StaticResource reverseBooleanToVisibilityConverter}}"> 
     </TextBlock> 
    </StackPanel> 
</CheckBox> 

的想法是，我可以将TextBlock（显示器）和文本框（编辑）之间进行切换。但是，在运行应用程序时，CheckBox视觉（可检查的方形）垂直居中。我希望它与TextBlock/TextBox的顶部对齐。

我注意到，当我只包含一个TextBlock（所以没有StackPanel，没有文本框），该复选框实际上与TextBlock的顶部对齐，所以我假设我错过了一些设置StackPanel的？

Answer 1

CheckBox.Content不给你很大的控制如何显示的东西。试试这个：

所有的

<DockPanel VerticalAlignment="Top"> <!-- can also be center or bottom --> 
    <CheckBox/> 
    <Grid> 
     <TextBox x:Name="editTextBox" 
      Text="{Binding Path=Caption, Mode=TwoWay}" 
      TextWrapping="Wrap" 
      Visibility="{Binding Path=IsBeingEdited, Converter={StaticResource booleanToVisibilityConverter}}" /> 
     <TextBlock x:Name="itemText" 
      TextWrapping="Wrap"       
      Text="{Binding Path=Caption}" 
      Visibility="{Binding Path=IsBeingEdited, Converter={StaticResource reverseBooleanToVisibilityConverter}}"> 
    </Grid> 
</DockPanel> 

Answer 2

首先不VerticalAlignment或VerticalContentAlignment（甚至ControlTemplate）浪费你的时间。他们不会做你想要的或者可能期望的。

如MSDN所述，a BulletDecorator（这是CheckBox和RadioButton用于呈现收音机/检查按钮的控件）将自动设置图标的位置。您无法对此加以控制：

当子对象是文本对象时，子弹总是与第一行文本对齐。如果子对象不是文本对象，则子项对齐到子对象的中心。

除非您更改控制模板（不必要），否则您只能将顶部的收音机/支票图标放在顶部（如果内容为文本）。

所以，如果你做这样的事情就不会好看，因为你不能不管你有多少VerticalAlignment属性来设置移动图标。

<RadioButton> 
    <StackPanel> 
     <TextBlock Text="First line"/> 
     <TextBlock Text="Something else"/> 
    </StackPanel> 
</RadioButton> 

但幸运的，你可以把使用InlineUIContainer你所需的内容在TextBlock。第一行中的文本（或内容）将自动规定图标的位置。如果你想，是不是文本的第一行下面的东西，只要使用<Linebreak/>然后<InlineUIContainer/>

下面是有一个超大TextBox更清楚地发生的事情表明一个例子。

<RadioButton> 

    <TextBlock VerticalAlignment="Top" TextWrapping="Wrap"> 

     <TextBlock Text="Products with &lt;" VerticalAlignment="Center" Margin="0,0,5,0"/> 

     <InlineUIContainer BaselineAlignment="Center"> 
      <TextBox FontSize="30" Width="25" Text="10" Margin="0,0,5,0"/>   
     </InlineUIContainer> 

     <TextBlock VerticalAlignment="Center" Margin="0,0,5,0"> 
      <Run Text="days" FontWeight="Bold"/> 
      <Run Text="inventory" /> 
     </TextBlock> 

     <LineBreak/>  

     <InlineUIContainer> 
      <StackPanel> 
       <CheckBox Content="Include unsold products" /> 
       <CheckBox Content="Include something else" /> 
      </StackPanel> 
     </InlineUIContainer> 

    </TextBlock> 
</RadioButton>