Search code examples
wpfxaml

How do I align a grid to the bottom and place two buttons in the bottom right corner?


Beginner with WPF here. I am trying to make a window that has a panel in the bottom of the window, that contains two buttons side by side in the bottom right corner like in this picture:

two buttons side by side in the bottom right corner

but so far all I have managed to code is this:

all I have managed to code

The bottom panel is a mess. How do I make it look like my original design? I have tried dragging within the designer, but it is not working.

My XAML below (for the entire window - because I'm a noob. feel free to correct any mistakes).

<Window x:Class="ace.views.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ace.views"
        mc:Ignorable="d"
        Title="Welcome to My software " Height="450" Width="800">

    <Grid VerticalAlignment="top"  HorizontalAlignment="Stretch">
        <StackPanel Margin="30">
            <TextBlock FontFamily="Segoe UI" FontSize="30" Foreground="#0078D7">Welcome to my software</TextBlock>
            <TextBlock FontFamily="Segoe UI" FontSize="20" TextWrapping="Wrap" Margin="0 20">This application is here to help you to teach vocabulary to your students, and to keep track of their progress.</TextBlock>
            <TextBlock FontFamily="Segoe UI" FontSize="20" TextWrapping="Wrap" Margin="0 20">Let's get started in the next step.</TextBlock>
        </StackPanel>

        <Grid Background="#EFEFEF" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Margin="0,0,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button  x:Name="cmdSubmit"
HorizontalAlignment="Center"
VerticalAlignment="Stretch" Grid.Row="0"  Width="120" Content="Next" />

            <Button x:Name="cmdReset"
HorizontalAlignment="Center"
VerticalAlignment="Stretch" Grid.Row="0"  Width="120" Content="Cancel" Grid.Column="1"/>
        </Grid>
    </Grid>
</Window>

Solution

  • Two RowDefinitions in outer Grid should do the trick for Window layout.

    Changing ColumnDefintions for inner Grid will help to pin buttons to the right side.

    <Window x:Class="ace.views.Window1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:ace.views"
            mc:Ignorable="d"
            Background="#EFEFEF" 
            Title="Welcome to My software " Height="450" Width="800">
    
        <Grid Background="White">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
    
            <StackPanel Margin="30">
                <TextBlock FontFamily="Segoe UI" FontSize="30" Foreground="#0078D7">Welcome to my software</TextBlock>
                <TextBlock FontFamily="Segoe UI" FontSize="20" TextWrapping="Wrap" Margin="0 20">This application is here to help you to teach vocabulary to your students, and to keep track of their progress.</TextBlock>
                <TextBlock FontFamily="Segoe UI" FontSize="20" TextWrapping="Wrap" Margin="0 20">Let's get started in the next step.</TextBlock>
            </StackPanel>
    
            <Grid Grid.Row="1" Background="#EFEFEF">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Button  x:Name="cmdSubmit" HorizontalAlignment="Center" Grid.Column="1"  Width="120" Margin="5" Content="Next"/>
    
                <Button x:Name="cmdReset" HorizontalAlignment="Center" Grid.Column="2"  Width="120" Margin="5" Content="Cancel"/>
            </Grid>
        </Grid>
    </Window>