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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12150914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-08 23:29:48  来源:igfitidea点击:

Aligning controls on both left and right side in a stack panel in WPF

wpfxamllayoutalignmentstackpanel

提问by Michel Keijzers

I have the following code:

我有以下代码:

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

The radio button should be placed on the left side in the stack panel (I removed some buttons for not cluttering the example) and the label (which I put temporarily in a nested StackPanel) should be on the right side.

单选按钮应该放在堆栈面板的左侧(我删除了一些按钮以免使示例混乱),标签(我暂时放在嵌套的 StackPanel 中)应该在右侧。

I tried already lots of combinations of alignments but I cannot get the label on the right side. What should I add to accomplish this?

我已经尝试了很多对齐组合,但我无法在右侧获得标签。我应该添加什么来实现这一点?

回答by H.B.

Just do not use a StackPanel, StackPanelsstack. They do, for obvious reasons, not allow alignment in the direction in which they stack. Use a Grid, with column definitions like so:

只是不要使用StackPanel,StackPanels堆栈。出于显而易见的原因,它们不允许在它们堆叠的方向上对齐。使用Grid带有列定义的 , 如下所示:

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

回答by Chris

Even though this is old, should someone come across this like I did, here's a simple solution.

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

Make a new grid and inside that grid put two stack panels with different Horizontal Alignment.

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

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

The possible issue is that now without extra handling the two could overlap with each other.

可能的问题是,现在如果没有额外的处理,两者可能会相互重叠。

回答by newfurniturey

As you have set the StackPanel's orientation to Horizontal, the HorizontalAlignmentproperty won't work on child-elements. You can keep the StackPanelif you need additional controls, though I would recommend switching to a Grid(among other things) to build the layout you want.

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

Also, the Gridwill allow you to control the actual width of each column:

此外,Grid将允许您控制每列的​​实际宽度:

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

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

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

回答by Alex34758

User @pasx is right. You should use DockPanel and dock the RadioButton to the left side, and your StackPanel with the label to the right side.

用户@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>
    ...