Why does the RenderSize of a Grid stay the same in all three of these cases?

Viewed 43
<Window x:Class="TestProject.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:TestProject"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

        <!--The following code snippets go here-->

</Window>

Example 1

<Grid>
    <Grid x:Name="myGrid" Width="200" Height="100" Background="Green">
        <Grid.LayoutTransform>
            <ScaleTransform ScaleX="3" ScaleY="1" CenterX=".5" CenterY=".5"></ScaleTransform>
        </Grid.LayoutTransform>
    </Grid>
</Grid>

Actual:

myGrid.RenderSize
{200,100}
    Height: 100
    IsEmpty: false
    Width: 200

myGrid.DesiredSize
{600,100}
    Height: 100
    IsEmpty: false
    Width: 600

Expected:

myGrid.RenderSize
{200,100}
    Height: 100
    IsEmpty: false
    Width: 600

myGrid.DesiredSize
{600,100}
    Height: 100
    IsEmpty: false
    Width: 600

Example 2

<Grid>
    <Grid x:Name="myGrid" Width="200" Height="100" Background="Green">
        <Grid.RenderTransform>
            <ScaleTransform ScaleX="3" ScaleY="1" CenterX=".5" CenterY=".5"></ScaleTransform>
        </Grid.RenderTransform>
    </Grid>
</Grid>

Actual:

myGrid.RenderSize
{200,100}
    Height: 100
    IsEmpty: false
    Width: 200

myGrid.DesiredSize
{200,100}
    Height: 100
    IsEmpty: false
    Width: 200

Expected:

myGrid.RenderSize
{200,100}
    Height: 100
    IsEmpty: false
    Width: 600

myGrid.DesiredSize
{200,100}
    Height: 100
    IsEmpty: false
    Width: 200

Example 3

<Viewbox Stretch="UniformToFill">
    <Grid x:Name="myGrid" Width="200" Height="100" Background="Green"></Grid>
</Viewbox>

Actual:

myGrid.RenderSize
{200,100}
    Height: 100
    IsEmpty: false
    Width: 200
myGrid.DesiredSize
{200,100}
    Height: 100
    IsEmpty: false
    Width: 200

Expected:

Not sure, if Viewbox uses RenderTransform then I would expect myGrid.RenderSize.Width to be 600 and myGrid.DesiredSize.Width to be 200, otherwise if Viewbox uses LayoutTransform then I would expect myGrid.RenderSize.Width and myGrid.DesiredSize.Width to be 600.


I am basing my expected results based on the following layout process stages:

  1. LayoutTransform
  2. Measure - DesiredSize of each element is computer here
  3. Arrange - Position of child elements within their parents is determined
  4. RenderTransform
  5. Render - RenderSize is computer here, elements are rendered to the screen

Questions:

  • Does Viewbox apply RenderTransform or LayoutTransform?
  • How does RenderTransform change the element such that RenderSize dimensions do not change?
  • For example 1, why is Rendered Width is 200, even though LayoutTransform is applied to myGrid and the Desired with is 600?

Thank you in advance.

0 Answers
Related