We Keep Coding

WPF button size and font responsiveness

I attempted to make a simple calculator app to start learning about WPF.
The issue that I am currently facing is that when I resize (Maximize, Minimize) the window the layout of my calculator app will change in a bad way. I cannot tell if it is the font of each button that is causing this issue or the overall layout of my XAML.
Here is the XAML:
<Window x:Class="Calculator.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:Calculator"
mc:Ignorable="d"
Title="Calculator" Height="600" Width="500"
WindowStartupLocation="CenterScreen">
<!-- Container -->
<Grid Margin="10"
Style="{StaticResource Root}"
>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*"
/>
<ColumnDefinition
Width="30*"
/>
<ColumnDefinition
Width="*"
/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition
Height="*"
/>
<RowDefinition
Height="16*"
/>
<RowDefinition
Height="32*"
/>
<RowDefinition
Height="*"
/>
</Grid.RowDefinitions>
<!-- Display -->
<Border
Grid.Column="1"
Grid.Row="1"
Style="{StaticResource Display}"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*"
/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition
Height="*"
/>
<RowDefinition
Height="2*"
/>
</Grid.RowDefinitions>
<Label
x:Name="Label_DisplayNumber"
Content="0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Grid.Column="0"
Grid.Row="1"
FontSize="75"
Foreground="#183B5D"
Margin="0, 0, 20, 0"
/>
<Label
x:Name="Label_DisplayOperation"
Content=""
HorizontalAlignment="left"
VerticalAlignment="Center"
Grid.Column="0"
Grid.Row="0"
FontSize="40"
Foreground="#183B5D"
Margin="20, 0, 0, 0"
/>
</Grid>
</Border>
<!-- Controls -->
<Grid
Grid.Column="1"
Grid.Row="2"
Style="{StaticResource Interface}"
>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*"
/>
<ColumnDefinition
Width="*"
/>
<ColumnDefinition
Width="*"
/>
<ColumnDefinition
Width="*"
/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition
Height="*"
/>
<RowDefinition
Height="*"
/>
<RowDefinition
Height="*"
/>
<RowDefinition
Height="*"
/>
<RowDefinition
Height="*"
/>
</Grid.RowDefinitions>
<!-- Buttons_Numbers -->
<Button
Content="0"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="4"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="1"
Grid.Column="0"
Grid.Row="3"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="2"
Grid.Column="1"
Grid.Row="3"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="3"
Grid.Column="2"
Grid.Row="3"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="4"
Grid.Column="0"
Grid.Row="2"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="5"
Grid.Column="1"
Grid.Row="2"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="6"
Grid.Column="2"
Grid.Row="2"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="7"
Grid.Column="0"
Grid.Row="1"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="8"
Grid.Column="1"
Grid.Row="1"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="9"
Grid.Column="2"
Grid.Row="1"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<!-- Buttons_Operators -->
<Button
Content="AC"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="0"
Style="{StaticResource Button_Operator}"
Click="Button_Click_AllClear"
/>
<Button
Content="+/-"
Grid.Column="2"
Grid.Row="0"
Style="{StaticResource Button_Operator}"
Click="Button_Click_SignConversion"
/>
<Button
Content="/"
Grid.Column="3"
Grid.Row="0"
Style="{StaticResource Button_Operator}"
Click="Button_Click_Operator"
/>
<Button
Content="*"
Grid.Column="3"
Grid.Row="1"
Style="{StaticResource Button_Operator}"
Click="Button_Click_Operator"
/>
<Button
Content="-"
FontStretch="UltraExpanded"
Grid.Column="3"
Grid.Row="2"
Style="{StaticResource Button_Operator}"
Click="Button_Click_Operator"
/>
<Button
Content="+"
Grid.Column="3"
Grid.Row="3"
Style="{StaticResource Button_Operator}"
Click="Button_Click_Operator"
/>
<Button
Content="="
Grid.Column="3"
Grid.Row="4"
Style="{StaticResource Button_Operator}"
Click="Button_Click_Equal"
/>
<Button
Content="."
Grid.Column="2"
Grid.Row="4"
Style="{StaticResource Button_Operator}"
Click="Button_Click_Period"
/>
</Grid>
</Grid>
</Window>
Here is how the calculator app looks in normal size:
Here is how the calculator app looks when the window is maximized:
I am not exactly sure what is causing it to look so bad when the window is maximized. It seems to me that my buttons are stretching way too much which makes them look wide and the font inside very small. So here are my questions:
How can I improve the layout to make it better?
Does the "Button" element contain a property that allows the font inside it to stretch so that it won't look so small on maximized windows?

WPF fixed rows are resizing

I'm new in WPF and I try to creat specific UserControl to display data for a single product. I used Grid inside UserControl. So I create 5 columns and 3 rows. I want ot make 4 columns fixed (image, green-clored, blue-colored and column with controls) and last column (orange-colored) to fill all availabel space. Here my XAML and few screenshots:
<Grid Margin="0,0,0,5" Background="#FFDCD9D9" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="4" Source="{Binding ItemThumbnailUrl}" Stretch="None" HorizontalAlignment="Right" Margin="5,0" />
<StackPanel Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4" Background="#FFDA6F6F">
<Label BorderThickness="0" Content="dsgsdgsgsgsdgsdg sd " FontSize="13.333" FontWeight="Bold" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Horizontal" Background="#FF517823" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding ItemPrice}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="грн." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Orientation="Horizontal" Background="#FF214299" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding Quantity}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="шт." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" Background="#FF88B91E" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="грн." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="2" Orientation="Horizontal" Background="#FF228CBD" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="шт." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<CheckBox Grid.Column="3" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Grid.Column="3" Grid.Row="2" Background="{x:Null}" Content="Редакт." Foreground="#FF444343" Width="50" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Grid.Column="4" Grid.RowSpan="2" Grid.Row="1" Background="#FFE08212" HorizontalContentAlignment="Stretch" />
</Grid>
If I have "Title" text (in red-colored cell) less than sum of 3 my fixed columns, everything is OK, but if a text larger I have problems with some paddings between columns (please see pictures)
So how can I resolve this problem?

I could reproduce your issue in a variety of cases when a Grid is used in a DataTemplate. I removed the StackPanel and used a TextBlock, then a a TextBlock hosted in a separate Grid, but all with the same result. I guess something is going wrong when WPF is determining the required size. I have often occurred this kind of strange behaviour in Grids (when part of an ItemTemplate). If you need a quick workaround then this should do the trick
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="80" MaxWidth="80" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

How to maintain the aspect ratio of Grid in this case?

I am working on silverligth 5 and under a situation where I have 3 row in a grid.
frst contains some text second contains a Scrollviewer and the third one contains buttons.
I want something like that when i resize the grid (suppose make it smaller) then button(on row 3) must persist but the data inside the scrollviewer (row2) can become smaller(which can be further view by scrollviewer) whereas UIelement on first row also must persist like buttons.
Here is my try of code:
<Grid x:Name="LayoutRoot" Background="{StaticResource BGBrush_1}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="EOD" FontWeight="Bold" Foreground="Orange" Margin="10" VerticalAlignment="Center" />
<ScrollViewer x:Name="panelScrollViewer" Grid.Row="1" VerticalScrollBarVisibility="Hidden" Height="600">
<telerik:RadTreeView Name="RadTreeViewObj" VerticalAlignment="Center" Margin="50" Background="{StaticResource BGBrush_1}" BorderBrush="{StaticResource BGBrush_1}" ItemsSource="{Binding EODDataStepsCollection}" SelectionMode="Single" ItemContainerStyle="{StaticResource TreeViewItemStyle}">
<telerik:RadTreeView.ItemTemplate>
<telerik:HierarchicalDataTemplate ItemsSource="{Binding RelatedItems}">
// here are some UI elements
</telerik:HierarchicalDataTemplate>
</telerik:RadTreeView.ItemTemplate>
</telerik:RadTreeView>
</ScrollViewer>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" x:Name="CancelButton" Content="Cancel" FontWeight="Bold" Command="{Binding ButtonCancelCommand}" Height="23" HorizontalAlignment="Left" Margin="30,10,10,10" Style="{StaticResource ButtonStyle_Blue}" VerticalAlignment="Bottom" Width="80" Visibility="{Binding IsValidateVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<Button Grid.Column="1" x:Name="ValidateButton" Content="Validate" FontWeight="Bold" Command="{Binding ButtonValidateCommand}" Height="23" HorizontalAlignment="Right" Margin="10,10,30,10" Style="{StaticResource ButtonStyle_Blue}" VerticalAlignment="Bottom" Width="80" Visibility="{Binding IsValidateVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
</Grid>
</Grid>
How to achieve this ?
Please see that second button is hidden behind. (only half visible). How to solve this ?

Change your rowdefinitions to this:
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
And remove the fixed Height from the ScrollViewer.
The first and last rows will be as small as possible, while the middle row will take up the remaining space.
To avoid the Buttons overlapping, you can position them like this:
<StackPanel Grid.Row="2" HorizontalAlignment="Right" Orientation="Horizontal">
<Button x:Name="ValidateButton" Content="Validate" FontWeight="Bold" Margin="10,10,30,10" VerticalAlignment="Bottom" Width="80"/>
<Button x:Name="CancelButton" Content="Cancel" FontWeight="Bold" Margin="30,10,10,10" VerticalAlignment="Bottom" Width="80" />
</StackPanel>
Note: This will right-align the Cancel button. (I have also placed it to the right of the Validate button)

WPF: Create box with text in four corners

In WPF, I'm trying to create a button with four labels at each corner. It would look like a dice (die?) with text in the corners instead of dots.
This code doesn't work:
<Button HorizontalAlignment="Stretch" Background="Red" Height="100" >
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="TopLeft"/>
<Label Grid.Row="0" Grid.Column="1" Content="TopRight" HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
<Label Grid.Row="1" Grid.Column="0" Content="BottomLeft"/>
<Label Grid.Row="1" Grid.Column="1" Content="BottomRight" HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
</Grid>
</Button>
It mashes the text into the center of the grid instead of moving it to the corners. It seems like the grid is not taking up all the space in the button.
Any help appreciated. Thank you.

Set the VerticalContentAlignment and HorizontalContentAlignment for the Button to Stretch.
<Button HorizontalAlignment="Stretch" Background="Red" Height="100" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Grid ShowGridLines="True" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="TopLeft"/>
<Label Grid.Row="0" Grid.Column="1" Content="TopRight" HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
<Label Grid.Row="1" Grid.Column="0" Content="BottomLeft" VerticalContentAlignment="Bottom" />
<Label Grid.Row="1" Grid.Column="1" Content="BottomRight" HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
</Grid>
</Button>

Why does my wpf-grid ignore Grid.Row?

I have the following code:
<Popup Name="enterNamePopup" Width="250" Height="200" AllowsTransparency="True" Placement="Center" IsOpen="true">
<Grid Background="Aquamarine">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="7"/>
<RowDefinition Height="20" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<TextBlock Name="PleaseEnterName" Foreground="Black" Grid.Row="1" Text="Save as..." Grid.ColumnSpan="2" />
<TextBox Name="ProjectNameTextBox" Visibility="Visible" Grid.Row="2" Grid.ColumnSpan="2" />
<Button Name="SaveProjectButton" Content="Save Project" Grid.Row="3" Grid.Column="1"/>
<Button Name="CancelButton" Content="Cancel" Grid.Row="3" Grid.Column="2" />
</Grid>
</Popup>
Can anyone tell me why it looks like this
When i want to have something like this

You only have three RowDefinitions. They will be numbered 0, 1 and 2. Any row number higher than 2 will go into row 2.