WPF rectangle anchor

Question

I have a canvas and I set a background image to it. I have some rectangles within the canvas. When the form gets resized, the background image gets strechted but I also want the rectangles to get to the new positions. Any help?

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

here is the background image set :

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

Answer 1

There is a very simple solution that you can use... just put your Canvas inside a ViewBox control. From the linked page on MSDN, the ViewBox Defines a content decorator that can stretch and scale a single child to fill the available space:

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

If it doesn't work straight out of the box, then just experiment with the Stretch and StretchDirection properties.

Answer 2

I'm not sure about your jas namespace, but there is no layout system support in standard Canvas panel. So if you want something placed inside canvas to move and resize automatically due to parent canvas position change you have to create some code for this behavior manually.

Modify your XAML code like this:

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

And then in your code behind file:

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