我正在画布元素上绘制形状。我想通过单击它来选择绘制的形状，并想向它添加删除和调整大小的功能。我怎样才能做到这一点给我一些提示，如果有一个例子会更好。
谢谢
【问题讨论】：
ListBox。见my example
标签： c# xaml windows-8 windows-store-apps winrt-xaml
在类后面的代码中，我们可以如下添加事件
我们可以在 InkManager 的帮助下做到这一点
在类后面的代码中
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
【讨论】：
这可能对您有所帮助 对于按钮的样式，您可以在页面资源中添加样式，如下所示
<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="╱" Style="{StaticResource PaintButton}" ToolTipService.ToolTip="Line"/>
<Button x:Name="btnEllipse" Click="btnEllipse_Click" Style="{StaticResource PaintButton}" Content="◯" ToolTipService.ToolTip="Ellipse"/>
<Button x:Name="btnPencil" Click="btnPencil_Click" Style="{StaticResource PaintButton}" Content="✎" ToolTipService.ToolTip="Pencil"/>
<Button x:Name="btnRectagle" Click="btnRectagle_Click" Style="{StaticResource PaintButton}" Content="▭" ToolTipService.ToolTip="Rectangle"/>
<Button x:Name="btnEraser" Click="btnEraser_Click" Style="{StaticResource PaintButton}" Content="∅" ToolTipService.ToolTip="Eraser"/>
<Button x:Name="btnClearScreen" Click="btnClearScreen_Click" Style="{StaticResource PaintButton}" Content="❌" 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
【讨论】：