将 inkcanvas 调整到左侧和顶部

Question

我想调整 inkcanvas 的宽度和高度以适应屏幕。当我调整它的大小时，宽度向右扩展，高度向底部扩展。但 inkcanvas 不适合屏幕。

我也想固定 inkcanvas 子元素的位置。如果我可以调整 inkcanvas 的大小以适应屏幕，则 inkcanvas 子元素的位置不会改变。

如何将 inkcanvas 向左和向上调整大小以适应屏幕？

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

谢谢

更新： 我把inkcanvas放在一个网格里。它适合屏幕，但子元素的位置发生了变化。

我想修复红色矩形的位置。

红色矩形的位置不应该改变。

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

我的大图：

我的 WPF 应用程序包含许多图片。我可以放大/缩小画布。我可以使用选择工具选择图片。

我有 canvas 和 inkcanvas。

• 画布：包含图片和放大/缩小

• inkcanvas：有选择工具

如果我缩小，canvas 和 inkcanvas 会变小。

如果我使用选择工具，我会将所有图片从画布复制到 inkcanvas。

但是 inkcanvas 被缩小了，如果超出 inkcanvas 边界，我无法使用选择工具。

这就是我要调整 inkcanvas 大小并固定子位置的原因。

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

这取决于 InkCanvas 周围的容器。此外，如果您弄乱它们的容器，您不能期望子元素不会移动。如果您需要子元素的行为独立于 InkCanvas，您可能需要重新考虑这是否是一个好主意，以及您想要完成的任务是否无法使用其他设置更有效地完成。

您应该告诉我们更多关于您想要实现的大局是什么，孩子们会受到对其容器的操纵的影响这一事实是预期的并且通常是需要的。也许有一个更好的方法，而不是尝试缩放容器，同时必须移动所有孩子来消除这种操作。

Answer 3

从 inkcanvas 中删除所有边距并将其放入 Grid 中。

您能解释一下为什么这对您不起作用吗？

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

编辑有两种方法可以将子元素保持在原来的位置：

1. 一旦 InkCanvas 的位置或大小发生变化，就会相应地调整子位置。这意味着您必须选择一个确定孩子实际位置的固定位置（窗口左上角、屏幕左上角……）。
2. 从 InkCanvas 中移除孩子并将其放入正确的容器（确定孩子位置的容器。

我更喜欢 #2，因为它更符合逻辑并且需要更少的计算/事件处理