WPF矩形锚

Question

我有一个画布，我为它设置了背景图像。我在画布中有一些矩形。当窗体调整大小时，背景图像会被拉伸，但我也希望矩形到达新位置。有什么帮助吗？

<Window x:Class="abc.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:jas="clr-namespace:foo"
        Title="foo" Width="1200" Height="800"  >

    <jas:DragCanvas   x:Name="jasCanvas" >
        <jas:DragCanvas.Background>
            <DrawingBrush Stretch="None" TileMode="Tile" Viewport="0,0,20,20" ViewportUnits="Absolute">

                <!-- a drawing of 4 checkerboard tiles -->
                <DrawingBrush.Drawing>
                    <DrawingGroup>
                        <!-- checkerboard background -->
                        <!--<GeometryDrawing Brush="White">
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0,0,20,20" />
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>-->

                        <!-- two checkerboard foreground tiles -->
                        <!--<GeometryDrawing Brush="LightGray">
                            <GeometryDrawing.Geometry>
                                <GeometryGroup>
                                    <RectangleGeometry Rect="0,0,10,10" />
                                    <RectangleGeometry Rect="10,10,10,10" />
                                </GeometryGroup>
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>-->

                    </DrawingGroup>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </jas:DragCanvas.Background>

            <TextBlock x:Name="m_resultText" FontSize="16" Canvas.Left="10" Canvas.Top="10"  
               jas:DragCanvas.CanBeDragged="False"
               FontWeight="Bold"
               Background="Black"/>

        <Rectangle x:Name="m_redRect" Width="40" Height="120" Canvas.Left="100"  Canvas.Top="50"   Stroke="Gray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
StrokeThickness="1"               >
            <Rectangle.Fill>
                <!--<SolidColorBrush Color="#99FF0000"/>-->
                <ImageBrush ImageSource="Media/yacht.png" />

            </Rectangle.Fill>

            <Rectangle.RenderTransform>
                <RotateTransform x:Name="m_redRectRotate"   Angle="0" CenterX="20" CenterY="60"/>
            </Rectangle.RenderTransform>

        </Rectangle>

        <Rectangle x:Name="m_greenRect" Width="40" Height="120" Canvas.Left="247" Canvas.Top="113"  Stroke="Gray"
StrokeThickness="1"
                >
            <Rectangle.Fill>
                <!--<SolidColorBrush Color="#9900FF00" />-->
                <ImageBrush ImageSource="Media/yacht.png"/>
            </Rectangle.Fill>
            <Rectangle.RenderTransform>
                <RotateTransform x:Name="m_greenRectRotate"   Angle="0" CenterX="20" CenterY="60"/>
            </Rectangle.RenderTransform>
        </Rectangle>

        <Rectangle x:Name="m_greenRect2" Width="40" Height="120" Canvas.Left="338"   Canvas.Top="113"  Stroke="Gray"
StrokeThickness="1"
               >
            <Rectangle.Fill>
                <!--<SolidColorBrush Color="#9900FF00" />-->
                <ImageBrush ImageSource="Media/yacht.png"/>
            </Rectangle.Fill>
            <Rectangle.RenderTransform>
                <RotateTransform x:Name="m_greenRectRotate2"   Angle="0" CenterX="20" CenterY="60"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Button Content="Button" Canvas.Left="464" Canvas.Top="10" Width="75" Click="Button_Click" x:Name="buton" jas:DragCanvas.CanBeDragged="false"/>


    </jas:DragCanvas>

</Window>

这里是背景图片集：

ImageBrush ib = new ImageBrush();
        ib.ImageSource = new BitmapImage(new Uri(@"Media\foo.jpg", UriKind.Relative));
        jasCanvas.Background = ib;

Answer 1

我不确定您的jas命名空间，但标准Canvas面板中没有布局系统支持。因此，如果由于父画布位置更改而需要在画布内放置某些内容来自动移动和调整大小，则必须手动为此行为创建一些代码。

像这样修改你的XAML代码：

<jas:DragCanvas x:Name="jasCanvas" SizeChanged="jasCanvas_SizeChanged">

然后在你的代码后面的文件：

private void Canvas_SizeChanged(object sender, SizeChangedEventArgs e)
{
  var deltaWidth = (e.NewSize.Width - e.PreviousSize.Width);
  m_redRect.Width += deltaWidth;
  // and so on
}

Answer 2

您可以使用一个非常简单的解决方案......只需将Canvas放在ViewBox控件中即可。在MSDN上的链接页面上，ViewBox 定义了一个内容装饰器，可以拉伸和缩放单个子级以填充可用空间：

<ViewBox Stretch="Fill">
    <jas:DragCanvas x:Name="jasCanvas">
        ...
    </jas:DragCanvas>
</ViewBox>

如果它不能直接使用，那么只需试用Stretch和StretchDirection属性。