Why Canvas inside Canvas dosen't fill it's parent in WPF? - wpf

Question

I have an custom UserControl that displays an image, i'm trying to use this user control
in the MainWindow and for some reason the image dosen't fill it's content.
And i can't figure out why.
This is the custom UserControl :
<UserControl x:Class="BookWriter3D.Sheet"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
FlowDirection="RightToLeft">
<Canvas RenderTransformOrigin="0.0,0.0">
<Canvas.RenderTransform>
<RotateTransform x:Name="Angle"/>
</Canvas.RenderTransform>
<Canvas x:Name="LayoutRoot">
<Canvas.Clip>
<RectangleGeometry x:Name="imgRect" Rect="0,0,1500,800"/>
</Canvas.Clip>
<Image x:Name="sheetImage" Source="C:\Users\Eric\Documents\Papa\BookWriter3D\Resources\Images\Page0.jpg" Stretch="Fill"/>
<Image x:Name="shadowSpine" Source="C:\Users\Eric\Documents\Papa\BookWriter3D\Resources\Images\shadowspine.png" Canvas.Left="899" Canvas.Top="0"/>
<Image x:Name="curlShadow" Opacity="0.0" Source="C:\Users\Eric\Documents\Papa\BookWriter3D\Resources\Images\curlshadow.png" Canvas.Top="0" Stretch="Fill"
RenderTransformOrigin="1.0,0.66">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="curlShadowScale" ScaleX="1.0" ScaleY="2.0"/>
<RotateTransform x:Name="curlShadowRotate" Angle="0"/>
<TranslateTransform x:Name="curlShadowTranslate" X="0" Y="0"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Canvas>
</Canvas>
And this is the MainWindow.xaml :
<Canvas x:Name="layoutRoot" Background="White" RenderTransformOrigin=".5,.5">
<Canvas.RenderTransform>
<ScaleTransform ScaleX="1.0" ScaleY="1.0"/>
</Canvas.RenderTransform>
<local:Sheet x:Name="Page1Sheet"></local:Sheet>
<Canvas x:Name="traca" >
<Canvas x:Name="catrabs" Canvas.Top="0">
<Canvas.Clip >
<PathGeometry x:Name="baclpth" >
<PathGeometry.Figures >
<PathFigure IsClosed="True" x:Name="baclpz" StartPoint="0,0">
<PathFigure.Segments>
<LineSegment x:Name="baclzz" Point="400,0"/>
<LineSegment x:Name="baclzyy" Point="400,400"/>
<LineSegment x:Name="baclzyrq" Point="0,300" />
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Canvas.Clip>
<local:Sheet x:Name="Page1TraceSheet" X="0" Y="625"/>
</Canvas>
This code continues, though i doubt it has any influense on this problem.
Any help fellas?
EDIT :
After a bit of debugging i found out that the outerWrapper Canvas fills the screen but the LayoutRoot dosen't fill it's parent but it's ( i guess) same size as image, so problem is different then i first susspected
EDIT 2 :
Problem solved.
As Canvas changes size according to it's content,
All i needed to do is set the width/height of the Image, and it worked perfectly.

Answer 1

A Canvas never resizes its children. Consider using a Grid instead, if you want the Images to automatically fill a certain area. Try this
<Grid>
<Image Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" />
</Grid>
versus this
<Canvas>
<Image Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" />
</Canvas>
to get a feeling for the difference. And try different settings for Image.Stretch on an Image in a Canvas. They'll be ignored.

Answer 2

Problem solved. As Canvas changes size according to it's content, All i needed to do is set the width/height of the Image, and it worked perfectly.
<Image x:Name="sheetImage" Source="C:\Users\Eric\Documents\Papa\BookWriter3D\Resources\Images\Page0.jpg" Width="1280" Height="800" Stretch="Fill" />

Answer 3

Canvas does not alter or constrain other control's size or position. Maybe a Grid is what you need.