Question

我有以下代码：

<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中）应位于右侧。

我已经尝试了许多对齐组合，但我无法在右侧获得标签。我应该添加什么才能实现这一目标？

Answer 1

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

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

Answer 2

即使这已经过时了，如果有人像我一样遇到这个问题，这里有一个简单的解决方案。

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

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

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

Answer 3

由于您已将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>

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

Answer 5

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

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

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

5 个答案: