0

I want to layout 2 labels on top of each other and then two buttons horizontally next to each other but below the labels (below is an example of what I would like it to look like)

(All items are centered)

Welcome
Please Select A Language

English     Spanish

Here is my XAML

<Window x:Class="Probation_Sign_In.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="768" Width="1024" Closing="Window_Closing" ResizeMode="NoResize" Topmost="True" WindowStartupLocation="CenterScreen" WindowState="Maximized">
    <Grid>        
        <GroupBox Header="GroupBox" HorizontalAlignment="Left" Height="492" Margin="10,10,0,0" VerticalAlignment="Top" Width="505">
            <StackPanel>
                <Label x:Name="labelWelcome" Content="Welcome." HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="48" FontWeight="Bold" Margin="136,55,0,0"/>
                <Label x:Name="labelWelcomeMessage" Content="Please select a language." HorizontalAlignment="Left" Margin="50,193,0,0" VerticalAlignment="Top" FontSize="36"/>
                <Button x:Name="englishButton" Content="English" HorizontalAlignment="Center" Margin="109,410,767,297" VerticalAlignment="Center" Width="142" FontSize="20" TouchUp="englishButton_TouchUp" Click="englishButton_Click">
                    <Button.Background>
                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                            <GradientStop Color="#FFF3F3F3" Offset="0"/>
                            <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                            <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                            <GradientStop Color="#FF71B5BB" Offset="1"/>
                        </LinearGradientBrush>
                    </Button.Background>
                </Button>
                <Button Content="Español" HorizontalAlignment="Center" Margin="269,410,607,300" VerticalAlignment="Center" Width="142" FontSize="20" Height="30">
                    <Button.Background>
                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                            <GradientStop Color="#FFF3F3F3" Offset="0"/>
                            <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                            <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                            <GradientStop Color="#FF71B5BB" Offset="1"/>
                        </LinearGradientBrush>
                    </Button.Background>
                </Button>
            </StackPanel>
        </GroupBox>


    </Grid>
</Window>

The above XAML doesn't give me the desired result. But all controls must be inside the GroupBox

2 Answers 2

3

Wrap your Button controls in another StackPanel and set its Orientation property to Horizontal:

<Grid>
    <GroupBox Header="GroupBox" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="505">
        <StackPanel>
            <Label x:Name="labelWelcome" Content="Welcome." HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="48" FontWeight="Bold" Margin="136,10,0,0"/>
            <Label x:Name="labelWelcomeMessage" Content="Please select a language." HorizontalAlignment="Left" Margin="50,0,0,0" VerticalAlignment="Top" FontSize="36"/>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button x:Name="englishButton" Content="English" Width="142" FontSize="20" Margin="5" TouchUp="englishButton_TouchUp" Click="englishButton_Click">
                    <Button.Background>
                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                            <GradientStop Color="#FFF3F3F3" Offset="0"/>
                            <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                            <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                            <GradientStop Color="#FF71B5BB" Offset="1"/>
                        </LinearGradientBrush>
                    </Button.Background>
                </Button>
                <Button Content="Español" Width="142" FontSize="20" Height="30" Margin="5">
                    <Button.Background>
                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                            <GradientStop Color="#FFF3F3F3" Offset="0"/>
                            <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                            <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                            <GradientStop Color="#FF71B5BB" Offset="1"/>
                        </LinearGradientBrush>
                    </Button.Background>
                </Button>
            </StackPanel>
        </StackPanel>
    </GroupBox>
</Grid>

EDIT: Altered margin values so that controls stack closer. Play with the Margin property to get your spacing how you want it.

2
  • Excellent but when I drag the "Select a language" label up, it bounces back down. Commented Oct 9, 2013 at 20:01
  • Your Label controls both had top Margin values applied. I've altered my answer so that the controls stack closer.
    – user1548266
    Commented Oct 9, 2013 at 20:08
0

try this

                </Grid.ColumnDefinitions>
            <Button x:Name="englishButton" Content="English" HorizontalAlignment="Center"  VerticalAlignment="Center" Width="142" FontSize="20" Click="englishButton_Click">
                <Button.Background>
                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#FFF3F3F3" Offset="0"/>
                        <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                        <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                        <GradientStop Color="#FF71B5BB" Offset="1"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
            <Button  Grid.Column="1" Content="Español" HorizontalAlignment="Center" VerticalAlignment="Center" Width="142" FontSize="20" Height="30">
                <Button.Background>
                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#FFF3F3F3" Offset="0"/>
                        <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                        <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                        <GradientStop Color="#FF71B5BB" Offset="1"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
            </Grid>
        </StackPanel>
    </GroupBox>


</Grid>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.