调整 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 变小。

如果我使用选择工具，我会将所有图片从画布复制到 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>
    <InkCanvas>
    ...
    </InkCanvas>
</Grid>

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

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

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