ColumnDefinition.Width of Grid in Viewbox being set to Auto? - wpf-controls

Question

For a scoreboard app I'm building the client wants a particular look for the the team name and score:
Since I need to use these in various places in the UI, I figured I'd wrap them as a UserControl. Here's XAML for the image shown above (which has been significantly simplified from the actual):
<UserControl x:Class="Scoreboard.TeamNameAndScoreControl"
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:Scoreboard"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="100">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label
Name="TeamName"
BorderBrush="AliceBlue"
BorderThickness="1"
Content="WEST"
FontSize="20"
Padding="0"
Background="Gray"
FontWeight="Bold"
HorizontalContentAlignment="Center"
/>
<Label
Name="Score"
BorderBrush="AliceBlue"
BorderThickness="1"
Content="2"
Grid.Column="1"
Padding="0"
Background="White"
FontSize="20"
FontWeight="Bold"
HorizontalContentAlignment="Center"
/>
</Grid>
</UserControl>
What's important to note, for the purposes of this question, is that the 5-2 proportional sizing of the TeamName and Score labels is critical.
Since some of the various locations within the app's UI that I want to use this control are differently sized, and since I want the control to proportionally respond to window size changes, I figured I'd wrap the Grid in a Viewbox:
<UserControl x:Class="Scoreboard.TeamNameAndScoreControl"
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:Scoreboard"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="100">
<Viewbox>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label
BorderBrush="AliceBlue"
BorderThickness="1"
Content="WEST"
FontSize="20"
Padding="0"
Background="Gray"
FontWeight="Bold"
HorizontalContentAlignment="Center"
/>
<Label
BorderBrush="AliceBlue"
BorderThickness="1"
Content="2"
Grid.Column="1"
Padding="0"
Background="White"
FontSize="20"
FontWeight="Bold"
HorizontalContentAlignment="Center"
/>
</Grid>
</Viewbox>
</UserControl>
The problem is that when wrapped by the Viewbox, the Grid seems to convert the ColumnDefinition.Width values effectively to "Auto", so that the result looks like this:
I've tried every possible combination of the Viewbox.Stretch and Viewbox.StretchDirection properties which of course significantly change the appearance, but do not "fix" the issue with the Grid's column widths.
Changing the HorizontalContentAlignment of the Labels seems to have no effect.
I have tried setting setting the SharedSizeGroup attribute but no joy:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" SharedSizeGroup="A"/>
<ColumnDefinition Width="2*" SharedSizeGroup="A"/>
</Grid.ColumnDefinitions>
I've tried restructuring to instead just wrap each Label in a Viewbox, but the Viewboxes don't fill the Grid cells, making it look just weird:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Viewbox>
<Label
BorderBrush="AliceBlue"
BorderThickness="1"
Content="WEST"
FontSize="20"
Padding="0"
Background="Gray"
FontWeight="Bold"
HorizontalContentAlignment="Center"
/>
</Viewbox>
<Viewbox Grid.Column="1">
<Label
BorderBrush="AliceBlue"
BorderThickness="1"
Content="2"
Padding="0"
Background="White"
FontSize="20"
FontWeight="Bold"
HorizontalContentAlignment="Center"
/>
</Viewbox>
</Grid>
Please note again that the images and XAML shown here have been significantly simplified for the purposes of this question, and actually include an extensive set of styles to enhance the look of the borders, backgrounds, and fonts of each Label. The point is, the fix will unfortunately not be as simple as setting the background of the Grid (or something like that).
So, any thoughts as to why are my ColumnDefinition.Width values seemingly being changed to Auto and how can I fix it?

Answer 1

I've largely figured it out.
I needed to manually set the Width/Height of the Grid, which forced the Viewbox (which takes its size from its child) to be the same size:
<UserControl x:Class="Scoreboard.TeamNameAndScoreControl"
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:Scoreboard"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="100">
<Viewbox>
<Grid Width="100" Height="30">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label
BorderBrush="AliceBlue"
BorderThickness="1"
Content="WEST"
FontSize="20"
Padding="0"
Background="Gray"
FontWeight="Bold"
HorizontalContentAlignment="Center"
/>
<Label
BorderBrush="AliceBlue"
BorderThickness="1"
Content="2"
Grid.Column="1"
Padding="0"
Background="White"
FontSize="20"
FontWeight="Bold"
HorizontalContentAlignment="Center"
/>
</Grid>
</Viewbox>
</UserControl>
Now the Grid is honoring the 5*/2* column widths I'd assigned.
It's now clear (to me) that before I made this change the Grid really had no idea how large to make itself (since when I added the Viewbox the Grid went from having a parent that dictated its size - the UserControl - to a parent that gets its size from its child). So apparently under these circumstances it simply decides to have each cell wrap (take its size from) its children (i.e. "Auto" sizing).