如何在 UWP 中调整画布大小

Question

我有一个扩展 Canvas 的视图。这样的视图位于另一个 Canvas 内。

public class MyView : Canvas

{

  //this is my view

}

protected override void OnNavigatedTo(NavigationEventArgs e)

{

  PointerEventManager manager = new PointerEventManager(); // utility to manage the resizing event...

  MyView myView = new MyView();

  myView.PointerPressed += manager.OnPointerDown; 

  myView.PointerMoved += manager.OnPointerMoved;

  myView.PointerReleased += manager.OnPointerUp;

  Canvas parent = new Canvas();

  parent.Children.Add(myView);

  // other stuff...

}

我希望用户能够调整 myView 的大小。

请注意，用户也应该可以拖动此类视图，这是我希望此类视图成为 Canvas 的主要原因。

该方法的代码manager.OnPointerMoved如下所示：

protected void OnPointerMoved(object sender, PointerRoutedEventArgs e)

{

    myView.Width = myView.Width + 15; // enlarge by 15 pixel the width 

    myView.Height = myView.Height + 50; // enlarge by 50 pixel the height

}

更改 myView 的宽度和高度不起作用。

我该怎么做才能正确调整 myView 的大小？

Answer 1

您可以简单地使用Microsoft community toolkit sampleGridSplitter中提供的。我在网格内放置了一个画布。画布的大小可以通过网格拆分器修改，是的，画布是可拖动的。Nuget 包<Page&nbsp; &nbsp; x:Class="App1.MainPage"&nbsp; &nbsp; xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"&nbsp; &nbsp; xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&nbsp; &nbsp; xmlns:local="using:App1"&nbsp; &nbsp; xmlns:d="http://schemas.microsoft.com/expression/blend/2008"&nbsp; &nbsp; xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"&nbsp; &nbsp; mc:Ignorable="d"&nbsp;&nbsp; &nbsp; xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"&nbsp; &nbsp; x:Name="YourPage"&nbsp; &nbsp; Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">&nbsp; &nbsp; <Grid x:Name="RootGrid"&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; Margin="48"&nbsp; &nbsp; &nbsp; &nbsp; BorderThickness="0,0,1,1"&nbsp; &nbsp; &nbsp; &nbsp; BorderBrush="{ThemeResource SystemControlHighlightChromeHighBrush}"&nbsp; &nbsp; &nbsp; &nbsp; Height="500"&nbsp; &nbsp; &nbsp; &nbsp; VerticalAlignment="Top">&nbsp; &nbsp; &nbsp; &nbsp; <Grid.RowDefinitions >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="Auto" />&nbsp; &nbsp; &nbsp; &nbsp; </Grid.RowDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; <Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*"></ColumnDefinition>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="Auto"></ColumnDefinition>&nbsp; &nbsp; &nbsp; &nbsp; </Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; <Canvas Background="Red" CanDrag="True" ></Canvas>&nbsp; &nbsp; &nbsp; &nbsp; <!--Column Grid Splitter-->&nbsp; &nbsp; &nbsp; &nbsp; <controls:GridSplitter&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; GripperCursor="Default"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; HorizontalAlignment="Right"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Grid.Column="0"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ResizeDirection="Auto"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ResizeBehavior="BasedOnAlignment"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; CursorBehavior="ChangeOnSplitterHover"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Width="16">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <controls:GridSplitter.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TranslateTransform X="-8" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </controls:GridSplitter.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; </controls:GridSplitter>&nbsp; &nbsp; &nbsp; &nbsp; <!--Row Grid Splitter-->&nbsp; &nbsp; &nbsp; &nbsp; <controls:GridSplitter&nbsp; &nbsp; &nbsp; &nbsp; Grid.Row="0"&nbsp; &nbsp; &nbsp; &nbsp; Grid.ColumnSpan="1"&nbsp; &nbsp; &nbsp; &nbsp; VerticalAlignment="Bottom"&nbsp; &nbsp; &nbsp; &nbsp; Height="16">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <controls:GridSplitter.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TranslateTransform Y="-8" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </controls:GridSplitter.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <controls:GridSplitter.Element>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TextBlock HorizontalAlignment="Center"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;IsHitTestVisible="False"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;VerticalAlignment="Center"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Text="&#xE76F;"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Foreground="White"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;FontFamily="Segoe MDL2 Assets">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TextBlock>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </controls:GridSplitter.Element>&nbsp; &nbsp; &nbsp; &nbsp; </controls:GridSplitter>&nbsp; &nbsp; </Grid></Page>

Answer 2

为了将来谁会遇到这个问题，我使用RelativePanel而不是 Canvas 来管理它。有了它，我可以移动和拖动更改 Margin 属性，并使用 Width&Height 属性调整大小。

Answer 3

我看到你的代码有几个问题。首先，你没有设置Backgroundof MyView（你没有提到）。所以，它是空的，因此，它不会捕获任何PointerEvent. 所以，就在那里。其次，如果你通过了第一个问题，但是，你没有设置Widthand Heightof MyView。如果是这种情况，它们都是NaN，这将阻止这两条线中的任何一条线工作：myView.Width = myView.Width + 15; // what's NaN + 15 ?&nbsp;myView.Height = myView.Height + 50; // huh ?最后，关于请注意，用户也应该可以拖动此类视图，这是我希望此类视图成为 Canvas 的主要原因。好吧，您可以利用Marginany 的属性FrameworkElement来指定它在其父布局中的位置。