WPF StackPanel 内容垂直对齐

Posted 2023-03-05

【中文标题】WPF StackPanel 内容垂直对齐

【英文标题】：WPF StackPanel content vertical alignment

【发布时间】：2015-06-21 02:14:48

【问题描述】：

XAML 中是否有办法说我想将水平方向的StackPanel 内的所有组件垂直居中对齐？

我通过以下XAML 达到了预期的结果：

<StackPanel Orientation="Horizontal">
     <TextBlock VerticalAlignment="Center"/>
     <Button VerticalAlignment="Center"/>
     <TextBox VerticalAlignment="Center"/>
     <Button VerticalAlignment="Center"/>
     <TextBlock VerticalAlignment="Center"/>
</StackPanel>

但我需要为每个控件分别重复VerticalAlignment="Center"。

有没有办法在StackPanel 级别上声明如下？

<StackPanel Orientation="Horizontal" VERTICALCONTENTALIGNMENT="Center">
     <TextBlock/>
     <Button/>
     <TextBox/>
     <Button/>
     <TextBlock/>
</StackPanel>

【参考方案1】：

将StackPanel 放入Grid 并在StackPanel 上设置VerticalAlignment="Center"

<Grid>
    <StackPanel VerticalAlignment="Center">
        ...
    </StackPanel
</Grid>

【参考方案2】：

您可以使用 Trigger 为 StackPanel 定义样式，该样式设置为所有子级的 VerticalAlignment：

<Style x:Key="HorizontalStackPanel" TargetType="x:Type StackPanel">
    <Setter Property="Orientation" Value="Horizontal" />
    <Style.Triggers>
        <Trigger Property="Orientation" Value="Horizontal">
            <Setter Property="FrameworkElement.VerticalAlignment"  Value="Center" />
        </Trigger>
    </Style.Triggers>
</Style>

并应用这种风格：

<StackPanel Style="StaticResource HorizontalStackPanel">
    <TextBlock />
    <Button />
    <TextBox />
    <Button />
    <TextBlock />
</StackPanel>

它对我有用。 整个代码：

<Window x:Class="WpfApplication11.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="HorizontalStackPanel" TargetType="x:Type StackPanel">
            <Setter Property="Orientation" Value="Horizontal" />
            <Style.Triggers>
                <Trigger Property="Orientation" Value="Horizontal">
                    <Setter Property="FrameworkElement.VerticalAlignment"  Value="Center" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel Style="StaticResource HorizontalStackPanel">
            <TextBlock Text="One"/>
            <Button Content="Two"/>
            <TextBox Text="Three"/>
            <Button Content="Four"/>
            <TextBlock Text="Five"/>
        </StackPanel>
    </Grid>
</Window>

【讨论】：

@Muds 你在哪里定义了 Horizo​​ntalStackPanel 样式？

在资源中，与其他答案似乎完全相同的问题

@Muds Resources 哪个元素？我包含了整个代码。

窗口，而不是任何单个元素

让我们continue this discussion in chat。

【参考方案3】：

定义这样的样式；

<Style x:Key="StackHorizontal" TargetType="StackPanel">
    <Style.Resources>
        <Style TargetType="TextBlock" BasedOn="StaticResource x:Type TextBlock">
            <Setter Property="VerticalAlignment"  Value="Center" />
        </Style>
        <Style TargetType="Button" BasedOn="StaticResource x:Type Button">
            <Setter Property="VerticalAlignment"  Value="Center" />
        </Style>
    </Style.Resources>
</Style>

【参考方案4】：

就用这个吧：

<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
     <TextBlock/>
     <Button/>
     <TextBox/>
     <Button/>
     <TextBlock/>
</StackPanel>