WPF - scaling uniformtofill not working as expected - wpf

Question

Been struggling with this for a while now. I still don't really get what's going on. Viewbox Scale="UniformToFill" is supposed to make the content stretch out until it fills the screen. In the following pictures. I'm using the same control. Yet I get different results. What I really want is both to look like img1. When I say look I mean I want both to scale to fit the screen and not go out of bounds like on img1.
img1 - correct one
img2 - wrong scaling
<UserControl x:Class="lou"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:lou.Controls"
xmlns:src="clr-namespace:lou"
mc:Ignorable="d"
x:Name="control" DataContext="{Binding RelativeSource={RelativeSource Self}}" MaxHeight="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}, Path=ActualHeight}">
<Viewbox Stretch="UniformToFill">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Label x:Name="SportLabel" Content="{Binding Path=SportName}" Foreground="Orange"/>
<ScrollViewer x:Name="SV1" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Hidden" >
<DataGrid Name="dataGrid" ItemsSource="{Binding DataTable}" Style="{StaticResource dataGrid}" ColumnHeaderStyle="{StaticResource DataGridColumnStyle}"/>
</ScrollViewer>
</Grid>
</Viewbox>
<Window x:Class="lou.test"
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:lou"
mc:Ignorable="d"
Title="asdfasdf" Height="300" Width="300"
WindowStyle="None"
WindowState="Normal"
x:Name="this" DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid x:Name="grid1" Background="Black">
<ScrollViewer x:Name="mainWindowScroller" VerticalScrollBarVisibility="Visible" CanContentScroll="True">
<ItemsControl x:Name="itemsControl" ItemsSource="{Binding Collection}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate x:Name="itemsPanelTemplate">
<StackPanel x:Name="stackPanel" Orientation="Vertical" IsItemsHost="True"
MouseLeftButtonDown="stackPanel_MouseLeftButtonDown" ScrollViewer.VerticalScrollBarVisibility="Hidden"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>

Answer 1

UniformToFill will stretch input content into the output area by using the same horizontal and vertical scale ratios, and considering the top-left corner as origin point for the transform. Therefore, either the entire width or the entire height are matching the output area width or height (depending on size ratios of input and output).
You may want to use Fill if you want to stretch all input content to all output area, but it will use different size ratios for horizontal and vertical scales.
Another option is to use Uniform if you want to stretch using the same scale ratio and ensure all input is displayed in output area, but some margin may remain empty in the left-right or top-bottom sides of the output.
I tested with this XAML example (based on your question):
<Viewbox Stretch="UniformToFill">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Label x:Name="SportLabel" Content="Test" Foreground="Orange"/>
<ScrollViewer x:Name="SV1" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<DataGrid Name="dataGrid">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding}"/>
</DataGrid.Columns>
<DataGrid.Items>
<sys:String>Test1</sys:String>
<sys:String>Test2</sys:String>
<sys:String>Test3</sys:String>
<sys:String>Test4</sys:String>
</DataGrid.Items>
</DataGrid>
</ScrollViewer>
</Grid>
</Viewbox>
And checked the result in four ways:
If width of the container is large enough, with UniformToFill
If width of the container is smaller, with UniformToFill
If we use Fill instead of UniformToFill
If we use Uniform instead of UniformToFill
Test screenshots
I hope that by applying the same logic to your context will you will be able to understand the exact situation in your case, and you can choose the best solution for your needs.