Viewbox behavior that I cannot understand

Question

I have a DataTemplate that's used as a logo to describe a Version object. The logo is simply an image and some text on top of it.

I have to use the DataTemplate in 2 places: - As the Content of a Button - As a thumbnail item of a ListBox

The thing is, the logo has to be much smaller in the ListBox than in the Button. This doesn't cause trouble for the logo image, which is scaled automatically. But the font sizes are not scaled automatically.

So I was suggested to use a ViewBox as the parent of my whole logo's XAML description.

Here is the DataTemplate:

        <DataTemplate DataType="{x:Type l:Version}">
            <Viewbox>
                <Grid Width="175">
                    <Image Source="{StaticResource Crate}"/>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>

                        <TextBlock Grid.Row="0" FontSize="18" Text="{Binding Type}" />
                        <TextBlock Grid.Row="1" FontSize="20" Text="{Binding Platform}" />
                        <TextBlock Grid.Row="2" FontSize="20" Text="{Binding ApprovedVersion}" />
                        <TextBlock Grid.Row="3" FontSize="16" Text="{Binding StringFormat=C\{0\}, Path=CodeChangeList}" />
                        <TextBlock Grid.Row="4" FontSize="16" Text="{Binding StringFormat=D\{0\}, Path=DataChangeList}" />
                        <TextBlock Grid.Row="5" FontSize="16" Text="{Binding StringFormat=S\{0\}, Path=SoundChangeList}" />
                    </Grid>
                </Grid>
            </Viewbox>
        </DataTemplate>

Then I use this template simply by changing my button's DataContext to a Version object. The DataTemplate is then automatically used.

             <Button 
                x:Name="buttonVersion"
                Width="300"
                Height="300"
                Click="SelectVersionButton_Click"
                Background="Transparent"
                Content="{Binding}">
             </Button>

How come my logo doesn't fill the entire button? There clearly are margins coming from nowhere and I can't explain this.

What's interesting is that if I remove the Width="175" from the Grid child (the ViewBox's child), then the ViewBox will fill the button entirely. However, my logo's font sizes are not scaled correctly anymore, since this Grid Width is like the 'reference size' that the ViewBox should use to scale the rest appropriately...

Thanks in advance

Answer 1

Alright, here is how the problem was solved:

1. Remove Width=175 in DataTemplate's Grid
2. Adjust the font sizes again

My font sizes were adjusted for a crate image of 175x175. The crate image is 256x256. If you don't specify Width=175 in the Grid element, it seems the ViewBox will compute the ratio thanks to the original size of the image (256x256). And also, the button 300x300 is now completely filled by the crate image, thanks to the ViewBox, and the font sizes are increased accordingly.

So in step 2, I had to adjust the font sizes for a 256x256 image and not for a 175x175 image.