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:
but so far all I have managed to code is this:
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>
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>