WPF StackPanel Disposición Pregunta

Question

Estoy intentando crear un diseño similar a esto:

alt text http://img20.imageshack.us/img20/3533/stackn.png

Aquí está el código que tengo:

<StackPanel TextBlock.FontFamily="Segoe UI" Orientation="Horizontal"> 
    <StackPanel HorizontalAlignment="Stretch" Width="Auto"> 
     <TextBlock Padding="5,0,5,0" FontSize="12" FontWeight="Bold" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" /> 
     <TextBlock Padding="5,0,5,0" FontSize="12" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Id}" /> 
    </StackPanel> 
    <StackPanel> 
     <TextBlock Padding="5,0,5,0" FontSize="10" Text="Delete"> 
      <TextBlock.Style> 
       <Style TargetType="{x:Type TextBlock}"> 
        <Style.Triggers> 
         <Trigger Property="IsMouseOver" Value="true"> 
          <Setter Property="FontWeight" Value="Bold" /> 
         </Trigger> 
        </Style.Triggers> 
       </Style> 
      </TextBlock.Style>  
     </TextBlock> 
     <TextBlock Padding="5,0,5,0" FontSize="10" Text="Move"> 
      <TextBlock.Style> 
       <Style TargetType="{x:Type TextBlock}"> 
        <Style.Triggers> 
         <Trigger Property="IsMouseOver" Value="true"> 
          <Setter Property="FontWeight" Value="Bold" /> 
         </Trigger> 
        </Style.Triggers> 
       </Style> 
      </TextBlock.Style>  
     </TextBlock> 
    </StackPanel> 
</StackPanel> 

Answer 1

¿Por qué no utiliza una rejilla para esto?

<Grid x:Name="LayoutRoot" Background="White"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="300" /> 
    </Grid.ColumnDefinitions> 

    <StackPanel Grid.Column="0"> 
     <TextBlock Text="{Binding Title}" /> 
    </StackPanel> 

    <StackPanel Grid.Column="1">   
     <TextBlock Text="Move" /> 
    </StackPanel> 

</Grid> 

Answer 2

creo que podría ser mejor con una rejilla como su elemento principal. Omitiendo sus estilos y lo que no, aquí está el XAML para el diseño en su dibujo.

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="50" /> <!-- or some other fixed width --> 
    </Grid.ColumnDefinitions> 

    <StackPanel Grid.Column="0"> 
    <!-- left hand stackpanel content --> 
    </StackPanel> 
    <StackPanel Grid.Column="1"> 
     <!-- right hand StackPanel content --> 
    </StackPanel> 
</Grid> 

Answer 3

No desea realmente un StackPanel para su contenedor rojo. Me gustaría ir con un DockPanel, acoplar el panel azul más a la derecha y asegurarme de que LastChildFill está activado para asegurar que el panel azul más a la izquierda se expanda al ancho de la ventana.

Answer 4

Este es el código para lo que recibo de su mensaje:

<DockPanel TextBlock.FontFamily="Segoe UI" LastChildFill="True"> 
    <StackPanel DockPanel.Dock="Right"> 
     <TextBlock Padding="5,0,5,0" FontSize="10" Text="Delete"> 
     <TextBlock.Style> 
      <Style TargetType="{x:Type TextBlock}"> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="true"> 
         <Setter Property="FontWeight" Value="Bold" /> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </TextBlock.Style> 
     </TextBlock> 
     <TextBlock Padding="5,0,5,0" FontSize="10" Text="Move"> 
     <TextBlock.Style> 
      <Style TargetType="{x:Type TextBlock}"> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="true"> 
         <Setter Property="FontWeight" Value="Bold" /> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </TextBlock.Style> 
     </TextBlock> 
    </StackPanel> 
    <StackPanel HorizontalAlignment="Stretch" Width="Auto"> 
     <TextBlock Padding="5,0,5,0" FontSize="12" FontWeight="Bold" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" /> 
     <TextBlock Padding="5,0,5,0" FontSize="12" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Id}" /> 
    </StackPanel> 
</DockPanel> 

Espero que esto ayude !!