Why UniformToFill is not working?

Question

I have this xaml:

<Border  Grid.Row="3"  Margin="0" Background="Transparent" ClipToBounds="true" >
            <Canvas RenderTransformOrigin="0.5,0.5" >
                <Image  Source="{Binding ImageSource}" Stretch="UniformToFill"  HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" cal:Message.Attach="[Event MouseLeftButtonDown] = [Action MouseLeftButtonDown($source, $eventargs)];
                                [Event MouseLeftButtonUp] = [Action MouseLeftButtonUp($source, $eventargs)];
                                [Event MouseMove] = [Action MouseMove($source, $eventargs)]" >


                </Image>


                <Line  X1="1" Y1="1" X2="400" Y2="400" Stroke="Black" StrokeThickness="20" IsHitTestVisible="False"/>


                <Canvas.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="{Binding Scale}" ScaleY="{Binding Scale}" />
                        <TranslateTransform X="{Binding TranslateX}" Y="{Binding TranslateY}" />
                    </TransformGroup>
                </Canvas.RenderTransform>
            </Canvas>
        </Border>

in this xaml, the Stretch="UniformToFill" on image is not working, but strangly, it is working in this one:

<Border  Grid.Row="3"  Margin="0" Background="Transparent" ClipToBounds="true" >
            <!--<Canvas RenderTransformOrigin="0.5,0.5" >-->
                <Image  Source="{Binding ImageSource}" Stretch="UniformToFill"  HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" cal:Message.Attach="[Event MouseLeftButtonDown] = [Action MouseLeftButtonDown($source, $eventargs)];
                                [Event MouseLeftButtonUp] = [Action MouseLeftButtonUp($source, $eventargs)];
                                [Event MouseMove] = [Action MouseMove($source, $eventargs)]" >


                </Image>


                <!--<Line  X1="1" Y1="1" X2="400" Y2="400" Stroke="Black" StrokeThickness="20" IsHitTestVisible="False"/>-->


                <!--<Canvas.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="{Binding Scale}" ScaleY="{Binding Scale}" />
                        <TranslateTransform X="{Binding TranslateX}" Y="{Binding TranslateY}" />
                    </TransformGroup>
                </Canvas.RenderTransform>
              </Canvas>-->
        </Border>

which I removed the image parent canvas.

How can I fix this?

Answer 1

Try adding a surrounding Grid to apply size constraints to the Image and then just layer the Canvas over the stretched Image.

<Border  Grid.Row="3"  Margin="0" Background="Transparent" ClipToBounds="true" >
    <Grid RenderTransformOrigin="0.5,0.5" >
        <Grid.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="{Binding Scale}" ScaleY="{Binding Scale}" />
                <TranslateTransform X="{Binding TranslateX}" Y="{Binding TranslateY}" />
            </TransformGroup>
        </Grid.RenderTransform>
        <Image  Source="{Binding ImageSource}" Stretch="UniformToFill"  HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" cal:Message.Attach="[Event MouseLeftButtonDown] = [Action MouseLeftButtonDown($source, $eventargs)];
                            [Event MouseLeftButtonUp] = [Action MouseLeftButtonUp($source, $eventargs)];
                            [Event MouseMove] = [Action MouseMove($source, $eventargs)]" >
        </Image>
        <Canvas>
            <Line  X1="1" Y1="1" X2="400" Y2="400" Stroke="Black" StrokeThickness="20" IsHitTestVisible="False"/>
        </Canvas>
    </Grid>
</Border>