在Windows應用商店中爲畫布選擇形狀

Question

我在畫布元素上繪製形狀。我想通過點擊選擇繪製的形狀，並希望添加刪除和重新調整大小的功能。我如何才能實現這一點，給我一些提示，如果可用，一個例子會更好。

謝謝

Answer 1

這可能會幫助你 的按鈕的樣式，你可以在頁面資源爲波紋管

<Page.Resources> 
     <Style x:Key="PaintButton" TargetType="Button"> 
      <Setter Property="FontFamily" Value="Segoe UI Symbol"/> 
      <Setter Property="FontWeight" Value="Normal"/> 
      <Setter Property="FontSize" Value="20"/> 
      <Setter Property="Width" Value="auto"/> 
      <Setter Property="Height" Value="50"/> 
      <Setter Property="VerticalAlignment" Value="Center" /> 
      <Setter Property="Grid.Row" Value="0"/> 
     </Style> 
    </Page.Resources> 

then for adding the drawn shape list we can add it to the Grid 
    <StackPanel Orientation="Horizontal" Margin="80,0,-43,0" Grid.Row="1"> 
      <Button x:Name="btnLine" Click="btnLine_Click" Content="&#x2571;" Style="{StaticResource PaintButton}" ToolTipService.ToolTip="Line"/> 
      <Button x:Name="btnEllipse" Click="btnEllipse_Click" Style="{StaticResource PaintButton}" Content="&#x25EF;" ToolTipService.ToolTip="Ellipse"/> 
      <Button x:Name="btnPencil" Click="btnPencil_Click" Style="{StaticResource PaintButton}" Content="&#x270E;" ToolTipService.ToolTip="Pencil"/> 
      <Button x:Name="btnRectagle" Click="btnRectagle_Click" Style="{StaticResource PaintButton}" Content="&#x25AD;" ToolTipService.ToolTip="Rectangle"/> 
      <Button x:Name="btnEraser" Click="btnEraser_Click" Style="{StaticResource PaintButton}" Content="&#x2205;" ToolTipService.ToolTip="Eraser"/> 
      <Button x:Name="btnClearScreen" Click="btnClearScreen_Click" Style="{StaticResource PaintButton}" Content="&#x274C;" ToolTipService.ToolTip="Clear Screen"/> 
      <Button x:Name="btnRecognize" Click="btnRecognize_Click" Style="{StaticResource PaintButton}" Content="R" ToolTipService.ToolTip="Handwriting Recognition"/> 
      <TextBlock x:Name="tbBorderColor" Text="Border Colors : " VerticalAlignment="Center" FontSize="15" TextWrapping="Wrap" Padding="15,0,0,0" Margin="0"/> 
      <ComboBox x:Name="cbBorderColor" Width="200" Height="40" ItemsSource="{Binding Colors}" SelectedItem="{Binding SelectedColorName, Mode=TwoWay}" SelectionChanged="cbBorderColor_SelectionChanged" Padding="8,0" Margin="10,0,0,0"> 
       <ComboBox.ItemTemplate> 
        <DataTemplate> 
         <Grid> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <Rectangle Width="35" Height="20" Fill="{Binding Name}" Margin="5,0"/> 
          <TextBlock Grid.Column="1" Margin="10,0,0,0" Text="{Binding Name}" Foreground="Black"/> 
         </Grid> 
        </DataTemplate> 
       </ComboBox.ItemTemplate> 
      </ComboBox> 
      <TextBlock x:Name="tbFillColor" Text="Fill Colors : " VerticalAlignment="Center" FontSize="15" Padding="15,0,0,0"/> 
      <ComboBox x:Name="cbFillColor" Width="200" Height="40" ItemsSource="{Binding Colors}" SelectedItem="{Binding SelectedColorName, Mode=TwoWay}" SelectionChanged="cbFillColor_SelectionChanged" Margin="10,0,0,0"> 
       <ComboBox.ItemTemplate> 
        <DataTemplate> 
         <Grid> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <Rectangle Width="35" Height="20" Fill="{Binding Name}" Margin="5,0"/> 
          <TextBlock Grid.Column="1" Margin="10,0,0,0" Text="{Binding Name}" Foreground="Black"/> 
         </Grid> 
        </DataTemplate> 
       </ComboBox.ItemTemplate> 
      </ComboBox> 

      <!--<Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="20"/> 
        <RowDefinition Height="20"/> 
        <RowDefinition Height="20"/> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="80"/> 
        <ColumnDefinition Width="20"/> 
        <ColumnDefinition Width="20"/> 
        <ColumnDefinition Width="20"/> 
       </Grid.ColumnDefinitions> 
       <TextBlock x:Name="tbBorderColor" Text="Border Colors : " Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" FontSize="15" TextWrapping="Wrap" Grid.RowSpan="3" Padding="15,0,0,0"/> 
       <Button x:Name="btnRed" Background="Red" Height="20" Width="20" Click="btnRed_Click" Grid.Row="0" Grid.Column="1" BorderThickness="0"/> 
       <Button x:Name="btnGreen" Background="Green" Height="20" Width="20" Click="btnGreen_Click" Grid.Row="0" Grid.Column="2" BorderThickness="0"/> 
       <Button x:Name="btnBlue" Background="Blue" Height="20" Width="20" Click="btnBlue_Click" Grid.Row="0" Grid.Column="3" BorderThickness="0"/> 
       <Button x:Name="btnBlack" Background="Black" Height="20" Width="20" Click="btnBlack_Click" Grid.Row="1" Grid.Column="1" BorderThickness="0"/> 
       <Button x:Name="btnYellow" Background="Yellow" Height="20" Width="20" Click="btnYellow_Click" Grid.Row="1" Grid.Column="2" BorderThickness="0"/> 
       <Button x:Name="btnMagenta" Background="Magenta" Height="20" Width="20" Click="btnMagenta_Click" Grid.Row="1" Grid.Column="3" BorderThickness="0"/> 
       <Button x:Name="btnCyan" Background="Cyan" Height="20" Width="20" Click="btnCyan_Click" Grid.Row="2" Grid.Column="1" BorderThickness="0"/> 
       <Button x:Name="btnWhite" Background="White" Height="20" Width="20" Click="btnWhite_Click" Grid.Row="2" Grid.Column="2" BorderThickness="0"/> 
       <Button x:Name="btnPink" Background="Pink" Height="20" Width="20" Click="btnPink_Click" Grid.Row="2" Grid.Column="3" BorderThickness="0"/> 
      </Grid> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="20"/> 
        <RowDefinition Height="20"/> 
        <RowDefinition Height="20"/> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="70"/> 
        <ColumnDefinition Width="20"/> 
        <ColumnDefinition Width="20"/> 
        <ColumnDefinition Width="20"/> 
       </Grid.ColumnDefinitions> 
       <TextBlock x:Name="tbFillColor" Text="Fill Colors : " Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Grid.RowSpan="3" FontSize="15" TextWrapping="Wrap" Padding="15,0,0,0"/> 
       <Button x:Name="btnFillRed" Background="Red" Height="20" Width="20" Click="btnFillRed_Click" Grid.Row="0" Grid.Column="1" BorderThickness="0"/> 
       <Button x:Name="btnFillGreen" Background="Green" Height="20" Width="20" Click="btnFillGreen_Click" Grid.Row="0" Grid.Column="2" BorderThickness="0"/> 
       <Button x:Name="btnFillBlue" Background="Blue" Height="20" Width="20" Click="btnFillBlue_Click" Grid.Row="0" Grid.Column="3" BorderThickness="0"/> 
       <Button x:Name="btnFillBlack" Background="Black" Height="20" Width="20" Click="btnFillBlack_Click" Grid.Row="1" Grid.Column="1" BorderThickness="0"/> 
       <Button x:Name="btnFillYellow" Background="Yellow" Height="20" Width="20" Click="btnFillYellow_Click" Grid.Row="1" Grid.Column="2" BorderThickness="0"/> 
       <Button x:Name="btnFillMagenta" Background="Magenta" Height="20" Width="20" Click="btnFillMagenta_Click" Grid.Row="1" Grid.Column="3" BorderThickness="0"/> 
       <Button x:Name="btnFillCyan" Background="Cyan" Height="20" Width="20" Click="btnFillCyan_Click" Grid.Row="2" Grid.Column="1" BorderThickness="0"/> 
       <Button x:Name="btnFillWhite" Background="White" Height="20" Width="20" Click="btnFillWhite_Click" Grid.Row="2" Grid.Column="2" BorderThickness="0"/> 
       <Button x:Name="btnFillPink" Background="Pink" Height="20" Width="20" Click="btnFillPink_Click" Grid.Row="2" Grid.Column="3" BorderThickness="0"/> 
      </Grid>--> 
      <TextBlock x:Name="tbStrokeThickness" Text="Stroke Thickness :" FontSize="15" TextWrapping="Wrap" Padding="15,0,0,0" MaxWidth="90" VerticalAlignment="Center"/> 
      <ComboBox x:Name="cbStrokeThickness" SelectionChanged="cbStrokeThickness_SelectionChanged" Margin="10,0,0,0" Height="30"/> 

     </StackPanel> 

then add the canvas 
<Canvas Name="canvas" Background="Wheat" Grid.Row="3" Grid.RowSpan="1" Margin="0,20,0,0"> 
     </Canvas> 

This will for the xaml 

Answer 2

而在背後類的代碼，我們可以添加事件添加樣式如波紋管

我們可以InkManager

的背後

0級代碼的幫助做到這一點

InkManager MyInkManager = new InkManager(); 
     string DrawingTool; 
     double X1, X2, Y1, Y2, StrokeThickness = 1; 
     Line NewLine; 
     Ellipse NewEllipse; 
     Point StartPoint, PreviousContactPoint, CurrentContactPoint; 
     Polyline Pencil; 
     Rectangle NewRectangle; 
     Color BorderColor = Colors.Black, FillColor; 
     uint PenID, TouchID; 

public MainPage() 
     { 
      this.InitializeComponent(); 
      canvas.PointerMoved += canvas_PointerMoved; 
      canvas.PointerReleased += canvas_PointerReleased; 
      canvas.PointerPressed += canvas_PointerPressed; 
      canvas.PointerExited += canvas_PointerExited; 

      for (int i = 1; i < 21; i++) 
      { 
       ComboBoxItem Items = new ComboBoxItem(); 
       Items.Content = i; 
       cbStrokeThickness.Items.Add(Items); 
      } 
      cbStrokeThickness.SelectedIndex = 0; 

      //var t = typeof(Colors); 
      //var ti = t.GetTypeInfo(); 
      //var dp = ti.DeclaredProperties; 

      var colors = typeof(Colors).GetTypeInfo().DeclaredProperties; 
      foreach (var item in colors) 
      { 
       cbBorderColor.Items.Add(item); 
       cbFillColor.Items.Add(item); 
      } 
     } 


then we need to define the canvas pointer events.here i am giving one example lets say pointer move event 



void canvas_PointerMoved(object sender, PointerRoutedEventArgs e) 
     { 
      if (DrawingTool != "Eraser") 
       Window.Current.CoreWindow.PointerCursor = new CoreCursor(CoreCursorType.Cross, 1); 
      else 
       Window.Current.CoreWindow.PointerCursor = new CoreCursor(CoreCursorType.UniversalNo, 1); 

      switch (DrawingTool) 
      { 
       case "Pencil": 
        { 
         /* Old Code 
         if (e.GetCurrentPoint(canvas).Properties.IsLeftButtonPressed == true) 
         { 
          if (StartPoint != e.GetCurrentPoint(canvas).Position) 
          { 
           Pencil.Points.Add(e.GetCurrentPoint(canvas).Position); 
          } 
         } 
         */ 

         if (e.Pointer.PointerId == PenID || e.Pointer.PointerId == TouchID) 
         { 
          // Distance() is an application-defined function that tests 
          // whether the pointer has moved far enough to justify 
          // drawing a new line. 
          CurrentContactPoint = e.GetCurrentPoint(canvas).Position; 
          X1 = PreviousContactPoint.X; 
          Y1 = PreviousContactPoint.Y; 
          X2 = CurrentContactPoint.X; 
          Y2 = CurrentContactPoint.Y; 

          if (Distance(X1, Y1, X2, Y2) > 2.0) 
          { 
           Line line = new Line() 
           { 
            X1 = X1, 
            Y1 = Y1, 
            X2 = X2, 
            Y2 = Y2, 
            StrokeThickness = StrokeThickness, 
            Stroke = new SolidColorBrush(BorderColor) 
           }; 

           PreviousContactPoint = CurrentContactPoint; 
           canvas.Children.Add(line); 
           MyInkManager.ProcessPointerUpdate(e.GetCurrentPoint(canvas)); 
          } 
         } 
        } 
        break; 

       case "Line": 
        { 
         if (e.GetCurrentPoint(canvas).Properties.IsLeftButtonPressed == true) 
         { 
          NewLine.X2 = e.GetCurrentPoint(canvas).Position.X; 
          NewLine.Y2 = e.GetCurrentPoint(canvas).Position.Y; 
         } 
        } 
        break; 

       case "Rectagle": 
        { 
         if (e.GetCurrentPoint(canvas).Properties.IsLeftButtonPressed == true) 
         { 
          X2 = e.GetCurrentPoint(canvas).Position.X; 
          Y2 = e.GetCurrentPoint(canvas).Position.Y; 
          if ((X2 - X1) > 0 && (Y2 - Y1) > 0) 
           NewRectangle.Margin = new Thickness(X1, Y1, X2, Y2); 
          else if ((X2 - X1) < 0) 
           NewRectangle.Margin = new Thickness(X2, Y1, X1, Y2); 
          else if ((Y2 - Y1) < 0) 
           NewRectangle.Margin = new Thickness(X1, Y2, X2, Y1); 
          else if ((X2 - X1) < 0 && (Y2 - Y1) < 0) 
           NewRectangle.Margin = new Thickness(X2, Y1, X1, Y2); 
          NewRectangle.Width = Math.Abs(X2 - X1); 
          NewRectangle.Height = Math.Abs(Y2 - Y1); 
         } 
        } 
        break; 

       case "Ellipse": 
        { 
         if (e.GetCurrentPoint(canvas).Properties.IsLeftButtonPressed == true) 
         { 
          X2 = e.GetCurrentPoint(canvas).Position.X; 
          Y2 = e.GetCurrentPoint(canvas).Position.Y; 
          if ((X2 - X1) > 0 && (Y2 - Y1) > 0) 
           NewEllipse.Margin = new Thickness(X1, Y1, X2, Y2); 
          else if ((X2 - X1) < 0) 
           NewEllipse.Margin = new Thickness(X2, Y1, X1, Y2); 
          else if ((Y2 - Y1) < 0) 
           NewEllipse.Margin = new Thickness(X1, Y2, X2, Y1); 
          else if ((X2 - X1) < 0 && (Y2 - Y1) < 0) 
           NewEllipse.Margin = new Thickness(X2, Y1, X1, Y2); 
          NewEllipse.Width = Math.Abs(X2 - X1); 
          NewEllipse.Height = Math.Abs(Y2 - Y1); 
         } 
        } 
        break; 

       case "Eraser": 
        { 
         if (e.GetCurrentPoint(canvas).Properties.IsLeftButtonPressed == true) 
         { 
          if (StartPoint != e.GetCurrentPoint(canvas).Position) 
          { 
           Window.Current.CoreWindow.PointerCursor = new CoreCursor(CoreCursorType.UniversalNo, 1); 
           Pencil.Points.Add(e.GetCurrentPoint(canvas).Position); 
          } 
         } 
        } 
        break; 

       default: 
        break; 
      } 
     } 


Then lets say we need to define the drawing tools click event as bellow 

private void btnPencil_Click(object sender, RoutedEventArgs e) 
     { 
      DrawingTool = "Pencil"; 
     } 

     private void btnLine_Click(object sender, RoutedEventArgs e) 
     { 
      DrawingTool = "Line"; 
     } 

     private void btnEllipse_Click(object sender, RoutedEventArgs e) 
     { 
      DrawingTool = "Ellipse"; 
     } 

     private void btnRectagle_Click(object sender, RoutedEventArgs e) 
     { 
      DrawingTool = "Rectagle"; 
     } 

     private void btnEraser_Click(object sender, RoutedEventArgs e) 
     { 
      DrawingTool = "Eraser"; 
     } 

     private void btnClearScreen_Click(object sender, RoutedEventArgs e) 
     { 
      //MyInkManager.Mode = InkManipulationMode.Erasing; 
      //for (int i = 0; i < MyInkManager.GetStrokes().Count; i++) 
      // MyInkManager.GetStrokes().ElementAt(i).Selected = true; 
      //MyInkManager.DeleteSelected(); 
      txtRecognizedText.Text = string.Empty; 
      canvas.Children.Clear(); 
     } 

Here i am giving you example of some of the event. 
Hope this will help you in some extent