WPF StackPanel mise en page Question

Question

Je suis en train de créer une mise en page similaire à ceci:

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

Voici le code que j'ai:

<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

Pourquoi n'utilisez-vous pas une grille pour cela?

<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

Je pense que vous pourriez être mieux avec un grille comme votre élément parent. En omettant vos styles et quoi d'autre, voici le XAML pour la mise en page dans votre dessin.

<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

Vous ne voulez pas vraiment de StackPanel pour votre conteneur rouge. J'irais avec un DockPanel, ancrez le panneau bleu le plus à droite vers la droite et assurez-vous que LastChildFill est activé pour que le panneau bleu le plus à gauche s'étende à la largeur de la fenêtre.

Answer 4

Voici le code pour ce que je reçois de votre message:

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

Hope this helps !!