Question

我有一个显示图像的自定义UserControl，我正在尝试使用此用户控件在MainWindow中，由于某种原因，图像不会填充它的内容。我无法弄清楚原因。

这是自定义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>

这是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>

此代码仍在继续，但我怀疑它对此问题有任何影响。

任何帮助人员？

编辑：经过一些调试我发现外包装画布填满了屏幕，但是LayoutRoot没有填充它的父级，但它（我猜）与图像大小相同，所以问题是不同的，然后我首先考虑

编辑2：问题解决了。随着Canvas根据内容改变大小，我需要做的只是设置图像的宽度/高度，它完美地工作。

Answer 1

Canvas永远不会调整其子项的大小。如果您希望图像自动填充某个区域，请考虑使用网格。试试这个

<Grid>
    <Image Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" />
</Grid>

与此

<Canvas>
    <Image Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" />
</Canvas>

感受到差异。并在“画布中的图像”上尝试Image.Stretch的不同设置。他们将被忽略。

Answer 2

问题解决了。由于Canvas根据其内容改变大小，所以我需要做的就是设置图像的宽度/高度，它完美地工作。

<Image x:Name="sheetImage" Source="C:\Users\Eric\Documents\Papa\BookWriter3D\Resources\Images\Page0.jpg"  Width="1280" Height="800" Stretch="Fill" />

Answer 3

Canvas不会改变或约束其他控件的大小或位置。也许Grid就是你所需要的。

为什么画布中的Canvas不会在WPF中填充它的父级？

3 个答案: