CODEWITHSUNDEEP
wpfimagexamlcanvas
eric.itzhak
eric.itzhak

Reputation: 16072

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

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.

Upvotes: 1

Views: 5279

Answers (3)

NestorArturo
NestorArturo

Reputation: 2516

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

Upvotes: 0

Clemens
Clemens

Reputation: 128106

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.

Upvotes: 3

eric.itzhak
eric.itzhak

Reputation: 16072

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" />

Upvotes: 0

Related Questions