WPF StackPanel Układ Pytanie

Question

Próbuję utworzyć układ podobny do tego:

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

Oto kod mam:

<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

Dlaczego nie używasz do tego siatki?

<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

myślę, że może być lepiej z siatka jako element nadrzędny. Pomijanie stylów, a co nie, oto XAML dla układu na rysunku.

<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

Naprawdę nie chcesz StackPanel dla twojego czerwonego pojemnika. Poszedłbym z DockPanelem, zadokowałem prawy niebieski panel po prawej stronie i upewniłem się, że LastChildFill jest włączony, aby zapewnić, że lewy niebieski panel rozszerza się do szerokości okna.

Answer 4

Oto kod dla tego, co się z Twojego postu:

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

Nadzieja to pomaga !!