Resizing inkcanvas to the left and top

Question

I want to resize width and height of inkcanvas to fit the screen. When I resized it, the width expands to the right and height expands to the bottom. But inkcanvas is not fit to screen.

I also want to fix the position of inkcanvas child element. If I can resize inkcanvas to fit the screen, the position of inkcanvas child element will not change.

How do I resize inkcanvas to the left and top to fit the screen?

<Canvas x:Name="Screen" >

                <InkCanvas Name="inkcanvas" ResizeEnabled="True"
                          Width="{Binding ElementName=LayoutRoot, Path=ActualWidth}"
                        Height="{Binding ElementName=LayoutRoot, Path=ActualHeight}"
                           EditingMode="Select" ClipToBounds="False"
                    Background="Bisque"
                    SelectionChanging="OnSelectionChanging" 
                    Visibility="Collapsed" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

                    <!-- InkCanvas' Child Elements -->
                </InkCanvas>
                <Canvas.RenderTransform>
                    <MatrixTransform/>
                </Canvas.RenderTransform>
            </Canvas>

Thanks

Update: I put inkcanvas in a grid. It fit to the screen but the position of child element is changed.

I want to fix the red rectangle position.

The position of red rectangle should not be changed.

<Grid>
        <InkCanvas x:Name="inkcanvas"  Background="Transparent">
            <Rectangle Height="41" HorizontalAlignment="Left"  Name="rectangle1" Stroke="Black" VerticalAlignment="Top" Width="69" Fill="#FFDB1111" />
        </InkCanvas>
        </Grid>

My big picure:

My WPF Application contain many pictures. I can zoom in/out the canvas. I can select the pictures by using selection tool.

I have canvas and inkcanvas.

• canvas: contain picture and zoom in/out

• inkcanvas: has selection tool

If I zoom out, the canvas and inkcanvas become smaller.

If I use selection tool, I copy all pictures from canvas to inkcanvas.

But the inkcanvas is zoom out, I cannot use selection tool if outside the inkcanvas boundary.

It is the reason why I want to resize inkcanvas and fix the children position.

Answer 1

<Window x:Class="WpfInkCavasSaveImage.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow"  Height="1091" Width="873" WindowState="Maximized">

<Grid Margin="0,0,0,10" >
    <Grid.RowDefinitions>
        <RowDefinition Height="1200*" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <InkCanvas HorizontalAlignment="Stretch" Margin="1,1,1,10" x:Name="inkCanvas1" VerticalAlignment="Stretch" Width="Auto" RenderTransformOrigin="0.5,0.5" Background="LightGreen" SnapsToDevicePixels="True" IsManipulationEnabled ="True"  Grid.RowSpan="2">
        <InkCanvas.CacheMode>
            <BitmapCache/>
        </InkCanvas.CacheMode>
        <InkCanvas.DefaultDrawingAttributes>
            <DrawingAttributes Color="Black" FitToCurve="True" Height="2.0031496062992127" IgnorePressure="False" IsHighlighter="False" StylusTip="Ellipse" StylusTipTransform="Identity" Width="2.0031496062992127"/>

        </InkCanvas.DefaultDrawingAttributes>
    </InkCanvas>
</Grid>
</Window>


public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        inkCanvas1.Width = System.Windows.SystemParameters.WorkArea.Width;
        inkCanvas1.Height = System.Windows.SystemParameters.WorkArea.Height;
    }
}

Answer 2

Remove all the margins from the inkcanvas and put it in a Grid.

Could you explain why this would not work for you?

<Grid>
    <InkCanvas>
    ...
    </InkCanvas>
</Grid>

Edit There are two way to keep the child element where it is:

1. As soon as the position or the size of the InkCanvas changes adjust the child positions accordingly. this means that you have to pick a fixed position (window topleft, screen topleft, ...) that determines the actual position of the child.
2. Remove the child from the InkCanvas and put it in the correct container (the one that determines the child's position.

I would prefer #2 as is is more logical and requires less calculations/event-handling

Answer 3

This depends on the container around the InkCanvas. Further you cannot expect the child-elements not to move if you mess with their container. If you need the child elements to behave independently of the InkCanvas you might want to rethink if that is a good idea and if what you want to accomplish can not be done more efficiently using another setup.

You should tell us more about what the big picture is of what you want to achieve, the fact that children are affected by manipulations of their container is expected and generally wanted. Maybe there is a better approach than to try and scale the container and at the same time having to shift all children around to nullify such a manipulation.