La alineación vertical del contenido de WPF de casilla de verificación en relación con checkbox

Question

que tienen una casilla de verificación cuya marcado XAML es el siguiente:

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

La idea es que puedo cambiar entre TextBlock (pantalla) y el cuadro de texto (editar). Sin embargo, cuando se ejecuta la aplicación, el visualizador CheckBox (el cuadrado seleccionable) está centrado verticalmente. Me gustaría que esté alineado con la parte superior de TextBlock/TextBox en su lugar.

He notado que cuando solo incluyo un TextBlock (entonces no hay StackPanel, ni TextBox), la casilla de verificación está de hecho alineada con la parte superior del TextBlock, entonces asumo que me falta algo de configuración en el StackPanel?

Answer 1

CheckBox.Content no le da mucho control sobre cómo se muestran las cosas. Tal vez puedas probar:

<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

En primer lugar no pierda su tiempo con VerticalAlignment o VerticalContentAlignment (o incluso ControlTemplate). No harán lo que quieran o esperen.

Como se describe en MSDN a BulletDecorator (que es el control que CheckBox y RadioButton utilizan para generar un botón de radio/comprobación) configurará la posición del icono automáticamente. Usted no tiene ningún control adicional sobre esto:

una bala siempre se alinea con la primera línea de texto cuando el objeto Niño es un objeto de texto. Si el objeto secundario no es un objeto de texto, la viñeta se alinea con el centro del objeto secundario.

A menos que cambie la plantilla de control (innecesaria), solo podrá colocar el icono de radio/comprobación en la parte superior si el contenido es texto.

Así que si haces algo como esto no se verá bien porque no podrás mover el ícono sin importar cuántas propiedades VerticalAlignment intentes establecer.

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

PERO Afortunadamente, usted puede poner casi cualquier cosa que desee en un TextBlock usando InlineUIContainer. El texto (o contenido) en la primera línea determinará la posición del icono automáticamente. Si quieres algo por debajo de la primera línea que no es de texto, sólo tiene que utilizar <Linebreak/> y luego <InlineUIContainer/>

Aquí hay un ejemplo que tiene un gran tamaño TextBox para mostrar con mayor claridad lo que está pasando.

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