CODEWITHSUNDEEP
wpfxamlalignmentstackpanel
Nuts
Nuts

Reputation: 2813

WPF StackPanel content vertical alignment

Is there a way in XAML to say that I want to center-align vertically all components inside a horizontal-oriented StackPanel?

I achieve the desired result with the below XAML:

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

But I need to repeat the VerticalAlignment="Center" for each control separately.

Is there a way to declare on the StackPanel level something like below?

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

Upvotes: 12

Views: 23608

Answers (4)

kaya
kaya

Reputation: 754

Define a style like this;

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

Upvotes: 1

Mauro Sampietro
Mauro Sampietro

Reputation: 2814

Put the StackPanel inside a Grid and set VerticalAlignment="Center" on the StackPanel

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

Upvotes: 5

John Zhu
John Zhu

Reputation: 1099

Just use this:

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

Upvotes: -2

user2250152
user2250152

Reputation: 20635

You can define style for StackPanel with Trigger which sets VerticalAlignment of all children:

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

And apply this style:

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

It works for me. The whole code:

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

Upvotes: 2

Related Questions