Как изменить размер холста в UWP - PullRequest
Новая
       45

Как изменить размер холста в UWP

0 голосов
/ 13 декабря 2018

У меня есть вид, который расширяет 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?

Ответы [ 3 ]

0 голосов
/ 13 декабря 2018

Вы можете просто использовать GridSplitter, предоставленный в Пример набора инструментов сообщества Microsoft .Я поместил холст в сетку.Размер холста может быть изменен с помощью разделителя сетки и Да, холст можно перетаскивать. Nuget Package

enter image description here

<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>
0 голосов
/ 14 декабря 2018

Ради того, кто столкнется с этим вопросом в будущем, я справился с ним, используя RelativePanel, а не Canvas.Теперь я могу перемещать и перетаскивать изменяемое свойство Margin и изменять его размер, используя свойства Width & Height.

0 голосов
/ 13 декабря 2018

Я вижу несколько проблем с вашим кодом.

Во-первых, , вы не установили Background из MyView (вы не упомянули).Таким образом, он нулевой, поэтому он не поймает PointerEvent.Итак, вот и все.

Во-вторых , если вы прошли первую проблему, вы не установили Width и Height для MyView.Если это так, то оба они NaN, что помешает работе любой из этих двух строк: 

myView.Width = myView.Width + 15; // what's NaN + 15 ? 
myView.Height = myView.Height + 50; // huh ?

И наконец относительно

Обратите внимание, что такое представление также должно перетаскиваться пользователем, и это главная причина, по которой я хочу, чтобы такое представление было Canvas.

Что ж, вы можете использовать свойство Marginлюбой FrameworkElement, чтобы указать его положение в макете его родителя.

...