WPF Scaling Issue

Question

Hi!

I am perplexed with an issue that I am experiencing, using ScaleTransform. I have a Grid with a fixed width and height. The grid contains one child, a Rectangle. The Rectangle's Fill is a VisualBrush whose Visual binds to a canvas outside of the grid, whose dimensions are rather large. On the rectangle, I use a ScaleTransform, with ScaleX and ScaleY both being set to 0.18. Essentially, I am trying to scale the Rectangle's visual down to fit within my grid. What appears to be happening is that the Grid itself is being scaled down, resulting in a much smaller result than what I want. I have included the code below. Just as a point of reference, the height and width that the rectangle binds do are essentially 900 by 600, respectively. Any pointers as to what I might be doing wrong would be greatly appreciated.

<Grid Height="225" Width="200" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="PART_Content">
            <Rectangle Height="{Binding Path=ActualHeight}" Width="{Binding Path=ActualWidth}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Rectangle.Fill>
                    <VisualBrush Visual="{Binding}"/>
                </Rectangle.Fill>
                <Rectangle.RenderTransform>
                    <ScaleTransform ScaleX="0.183" ScaleY="0.183"/>
                </Rectangle.RenderTransform>
            </Rectangle>
        </Grid>

Answer 1

Can you post the XAML for the Canvas element? I tried the following and I am getting the behavior you are going for (the rectangle is scaled and the grid is sized correctly)

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid ShowGridLines="True"  Height="225" Width="200" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="PART_Content">
            <Rectangle Height="{Binding Path=ActualHeight}" Width="{Binding Path=ActualWidth}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Rectangle.Fill>
                    <VisualBrush Visual="{Binding ElementName=theCanvas}"/>
                </Rectangle.Fill>
                <Rectangle.RenderTransform>
                    <ScaleTransform ScaleX="0.183" ScaleY="0.183"/>
                </Rectangle.RenderTransform>
            </Rectangle>
        </Grid>

        <Canvas x:Name="theCanvas" Grid.Row="1">
            <Rectangle Fill="Brown" Height="300" Width="300" />

        </Canvas>
    </Grid>

Answer 2

What is ActualWidth and ActualHeight? Unless I am mistaken the ActualHeight and ActualWidth properties as they normally mean in WPF are not DP's and you cannot bind to them. As has been pointed out below these are readonly dependency properties. Assuming this is in a CustomControl style Binding should be changed to TemplateBinding first.

I removed the bindings and essentially created a static version of your XAML which looks just fine. Since you have Part_Content defined for the grid, I am curious, is this xaml part of a custom control style? Is the code of the CustomControl manipulating the grid via PART_Content?

<Grid Height="225" Width="200" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="PART_Content" Background="Red">
<Rectangle  Height="225" 
            Width="200" 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch"
            Fill="Blue">

            <Rectangle.RenderTransform>
                <ScaleTransform ScaleX="0.183" ScaleY="0.183"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>