如何在 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

    x:Class="App1.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:App1"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" 

    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

    x:Name="YourPage"

    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid x:Name="RootGrid"  

        Margin="48"

        BorderThickness="0,0,1,1"

        BorderBrush="{ThemeResource SystemControlHighlightChromeHighBrush}"

        Height="500"

        VerticalAlignment="Top">

        <Grid.RowDefinitions >

            <RowDefinition Height="*" />

            <RowDefinition Height="Auto" />

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="*"></ColumnDefinition>

            <ColumnDefinition Width="Auto"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Canvas Background="Red" CanDrag="True" ></Canvas>

        <!--Column Grid Splitter-->

        <controls:GridSplitter

            GripperCursor="Default"

            HorizontalAlignment="Right"

            Grid.Column="0"

            ResizeDirection="Auto"

            ResizeBehavior="BasedOnAlignment"

            CursorBehavior="ChangeOnSplitterHover"

            Width="16">

            <controls:GridSplitter.RenderTransform>

                <TranslateTransform X="-8" />

            </controls:GridSplitter.RenderTransform>

        </controls:GridSplitter>

        <!--Row Grid Splitter-->

        <controls:GridSplitter

        Grid.Row="0"

        Grid.ColumnSpan="1"

        VerticalAlignment="Bottom"

        Height="16">

            <controls:GridSplitter.RenderTransform>

                <TranslateTransform Y="-8" />

            </controls:GridSplitter.RenderTransform>

            <controls:GridSplitter.Element>

                <Grid>

                    <TextBlock HorizontalAlignment="Center"

                         IsHitTestVisible="False"

                         VerticalAlignment="Center"

                         Text="&#xE76F;"

                         Foreground="White"

                         FontFamily="Segoe MDL2 Assets">

                    </TextBlock>

                </Grid>

            </controls:GridSplitter.Element>

        </controls:GridSplitter>

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

myView.Height = myView.Height + 50; // huh ?

最后，关于

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

好吧，您可以利用Marginany 的属性FrameworkElement来指定它在其父布局中的位置。