WPF StackPanel 布局问题答案

【问题标题】：WPF StackPanel Layout QuestionWPF StackPanel 布局问题
【发布时间】：2011-01-22 14:04:50
【问题描述】：

我正在尝试创建类似这样的布局：

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

这是我的代码：

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

【问题讨论】：

你的问题在哪里？

标签： c# wpf visual-studio visual-studio-2008

【解决方案1】：

为什么不为此使用网格？

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

【讨论】：

完美！我从不知道您可以使用星号作为宽度。谢谢！
<ColumnDefinition Width="*" /> 等价于<ColumnDefinition />
也称为<ColumnDefinition Width="1*" />

【解决方案2】：

我认为使用网格作为父元素可能会更好。省略您的样式等等，这是您绘图中布局的 XAML。

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

【讨论】：

似乎输出相同的布局=/

【解决方案3】：

您并不真正需要 StackPanel 用于您的红色容器。我会使用 DockPanel，将最右侧的蓝色面板停靠在右侧，并确保 LastChildFill 已打开以确保最左侧的蓝色面板扩展到窗口宽度。

【讨论】：

【解决方案4】：

这是我从您的帖子中得到的代码：

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

希望这会有所帮助！

【讨论】：