WPF Grid of buttons, non-percise row count and even spacing - wpf

Question

I'm trying to duplicate this https://i.stack.imgur.com/WawQc.png, which is a 4*11 grid of 64*64 buttons, made in JavaFX, with WPF
<Window x:Class="Kassa.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Kassa"
Title="Kassa" Width="1280" Height="720" Icon="Resources/Kassa.ico" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}">
<Grid ShowGridLines="True" Width="264" Height="720" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="64"/>
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="64" />
<ColumnDefinition Width="64" />
<ColumnDefinition Width="64" />
</Grid.ColumnDefinitions>
<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Margin="0" Grid.Row="0" Grid.Column="0" Width="64" Height="64">Kogus</Button>
<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Grid.Row="10" Grid.Column="3" Width="64" Height="64">Kassa</Button>
</Grid>
</Window>
No matter what I try, it looks like this https://i.imgur.com/HNBCo3r.png which is horrible. Is there a way to create a button grid in WPF that is normal enough to scale itself properly? Thanks. 10 rows minimum...

Answer 1

I'd suggest ignoring the pixel specificity of your buttons and instead allowing your grid to scale to any size within the window. Your buttons would then auto-size to fit, and you'd just ensure that, at all times, you have a grid of 4x11.
Code similar to the below should get you the desired effect.
<Window x:Class="WpfApp1.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:WpfApp1"
mc:Ignorable="d" Title="Kassa" Width="1280" Height="720" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.Resources>
<ResourceDictionary>
<Style TargetType="{x:Type Button}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
</Style>
</ResourceDictionary>
</Grid.Resources>
<Button Margin="0" Grid.Row="0">Kogus</Button>
<Button Grid.Row="10" Grid.Column="3">Kassa</Button>
</Grid>
</Grid>
</Window>
(EDIT: I've updated this to have your 2 panel layout, with the right panel (your buttons) taking up 20% of available space at all times)

Answer 2

Try this. You are missing SizeToContent="WidthAndHeight" on the main widnow
And if you want to fix the width and height and prevent user from resizing you can add this property ResizeMode="NoResize"(also remove the scrollviewer if you want in that case since it wont be really needed if you prevent resizing)
<Window x:Class="WpfApplication3.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:WpfApplication3"
mc:Ignorable="d"
Title="MainWindow" Height="750" Width="300" SizeToContent="WidthAndHeight">
<ScrollViewer >
<Grid ShowGridLines="True" Width="Auto" Height="Auto" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="64"/>
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="64" />
<ColumnDefinition Width="64" />
<ColumnDefinition Width="64" />
<ColumnDefinition Width="64" />
</Grid.ColumnDefinitions>
<Button Grid.Row="10" Grid.Column="3">TEST</Button>
</Grid>
</ScrollViewer>
</Window>

Answer 3

You can change the column width and height from Auto to * if you want the grid buttons to stretch and collapse with the containing window.
<Grid x:Name="container" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
<Button Grid.Row="1" Grid.Column="2" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
<Button Grid.Row="3" Grid.Column="4" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
<Button Grid.Row="5" Grid.Column="3" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
<Button Grid.Row="7" Grid.Column="2" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
<Button Grid.Row="9" Grid.Column="1" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
<Button Grid.Row="0" Grid.Column="0" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
<Button Grid.Row="0" Grid.Column="0" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
</Grid>