在 WPF 的堆栈面板中对齐左侧和右侧的控件

Posted 2023-03-05

【中文标题】在 WPF 的堆栈面板中对齐左侧和右侧的控件

【英文标题】：Aligning controls on both left and right side in a stack panel in WPF

【发布时间】：2012-08-22 11:14:29

【问题描述】：

我有以下代码：

<DockPanel>
    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
        <RadioButton Content="_Programs" 
                    IsChecked="Binding Path=ProgramBanksSelected" IsEnabled="Binding Path=ProgramsEnabled" Margin="8" />
        <StackPanel>
            <Label Content="Master" Height="28" Name="MasterFileStatus" VerticalContentAlignment="Center"/>
        </StackPanel>
    </StackPanel>
    ...

单选按钮应放在堆栈面板的左侧（我删除了一些按钮以免使示例混乱），而标签（我暂时放在嵌套的 StackPanel 中）应位于右侧。

我已经尝试了很多对齐组合，但我无法在右侧找到标签。 我应该添加什么来完成此操作？

【问题讨论】：

你真的不能对堆栈面板要求太多，只要你想要任何一种半高级结构就去网格

正确的答案是使用 DockPanel，如本文所述：***.com/questions/2023201/…

并将水平对齐添加到最后一个元素。

【参考方案1】：

由于您已将StackPanel 的方向设置为Horizontal，因此HorizontalAlignment 属性将不适用于子元素。如果您需要其他控件，可以保留 StackPanel，但我建议切换到 Grid（除其他外）来构建您想要的布局。

另外，Grid 将允许您控制每列的​​实际宽度：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="150" />
    </Grid.ColumnDefinitions>

    <RadioButton
        Grid.Column="0"
        ...
    />

    <Label
        Grid.Column="1"
        ...
    />
</Grid>

【讨论】：

你的第一个例子不起作用，它们仍然会在空间允许的情况下水平堆叠，并且对齐不会做任何事情。

@KDiTraglia 是的，刚刚测试过——你是对的；当Orientation="Horizontal" 时，忽略HorizontalAlignment；现在删除，谢谢 =]

【参考方案2】：

只是不要使用StackPanel、StackPanels 堆栈。出于显而易见的原因，它们确实不允许在它们堆叠的方向上对齐。使用Grid，列定义如下：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

【讨论】：

我想这会起作用，但是我会等待更多的答案，因为使用 StackPanels 我的好处是当屏幕变窄时，项目会包裹起来，我在使用时会松动一个网格。

@MichelKeijzers：如果你想要一些花哨的东西，你可能需要实现自己的面板。

感谢您的回答...我不知道我是否更喜欢您在这种情况下不正确对齐的解决方案，但这不在我问的问题范围内。

工作正常。谢谢！

感谢您的提示。我把所有 ColumnDefinition Width="*" 平均分配

【参考方案3】：

即使这是旧的，如果有人像我一样遇到这个，这里有一个简单的解决方案。

创建一个新网格，并在该网格内放置两个具有不同水平对齐方式的堆栈面板。

<Grid>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
        <!--Code here-->
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <!--Code here-->
    </StackPanel>
</Grid>

可能的问题是，现在如果不进行额外处理，两者可能会相互重叠。

【讨论】：

这是一个超级棒的解决方案。不过，如果每个面板只有一个孩子，您实际上并不需要 StackPanels。

优雅的...可以在没有太多网格定义的情况下完成这项工作。

【参考方案4】：

用户@pasx 是对的。您应该使用 DockPanel 并将 RadioButton 停靠在左侧，将带有标签的 StackPanel 停靠在右侧。

<DockPanel>

    <DockPanel 
        DockPanel.Dock="Top" 
        LastChildFill="False" >

        <RadioButton 
            DockPanel.Dock="Left" 
            Content="_Programs" 
            IsChecked="Binding Path=ProgramBanksSelected"
            IsEnabled="Binding Path=ProgramsEnabled" 
            Margin="8" />

        <StackPanel
            DockPanel.Dock="Right">

            <Label 
                Content="Master" 
                Height="28" 
                Name="MasterFileStatus" 
                VerticalContentAlignment="Center"/>

        </StackPanel>

    </DockPanel>
    ...

【参考方案5】：

以嵌套方式使用 Stackpanel 方向类型，如示例中所示。 Grid Width 设置为父宽度以实现全宽。

<StackPanel x:Name="stackBlah" Orientation="Vertical">
    <StackPanel Orientation="Horizontal">
        <Grid Width="Binding ActualWidth, ElementName=stackBlah" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>

            <StackPanel Grid.Column="0" HorizontalAlignment="Left" >
                <Button Content="Some button" />
            </StackPanel>
            <StackPanel Grid.Column="1" HorizontalAlignment="Right">
                <ToggleSwitch Header="Some toggle" AutomationProperties.Name="ToggleNotifications"/>
            </StackPanel>
        </Grid>
    </StackPanel>
</StackPanel>