CODEWITHSUNDEEP
wpfxaml
Viva
Viva

Reputation: 45

Matching grid and window size WPF

I just started using WPF (instead of winforms) and I'm trying to create a fixed-sized window (see image).

image 1

Problem is, whenever I run the app the bottom right corner gets messed up, having near zero space between the button and the edge. (see other image)

image 2

Here's the XAML code (mostly generated by the Visual Studio designer)

<Window x:Class="UseCaseHelper.MainWindow"
        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:UseCaseHelper"
        mc:Ignorable="d"
        Title="UseCaseHelper" Height="500" Width="900">
    <Grid>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75"/>
        <Button x:Name="button1" Content="Button" HorizontalAlignment="Left" Margin="809,441,0,0" VerticalAlignment="Top" Width="75"/>

    </Grid>
</Window>

I've tried googling for a solution without much success. Hopefully someone can point out what I'm doing wrong here.

Upvotes: 0

Views: 1559

Answers (1)

rmojab63
rmojab63

Reputation: 3631

I always find DockPanel more flexible in these settings. Instead of the VerticalAlighnment and the Margin you set, you can set DockPanel.Dock to Left, Right, Bottom or Top. 

<DockPanel LastChildFill="False"> 
        <Button DockPanel.Dock="Top" 
                Content="Button" HorizontalAlignment="Left" Margin="10,10,0,0" 
                 Width="75"/>
    <Button DockPanel.Dock="Bottom" 
            Content="Button" HorizontalAlignment="Right" Margin="0,0,10,10" Width="75"/>
</DockPanel>

Note that you can also use Margin="10" for both Buttons.

However, if you want to use Grid, you can use the following structure:

<Grid>
    <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0" 
             Width="75"/>
    <Button Content="Button" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,10,10" Width="75"/>
</Grid>

Note that in this case they will overlap if the Window is small enough.

Another option is to add RowDefinitions and ColumnDefinitions to the Grid:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Button 
            Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0" 
             Width="75"/>
    <Button Grid.Column="2" Grid.Row="2"
        Content="Button" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,10,10" Width="75"/>
</Grid>

Its perfomance is better than the other two, if Window is very small.

Upvotes: 1

Related Questions