<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:
- LayoutTransform
- Measure - DesiredSize of each element is computer here
- Arrange - Position of child elements within their parents is determined
- RenderTransform
- 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
myGridand the Desired with is 600?
Thank you in advance.