Selecting Shapes in Canvas for Windows Store App

Question

I am drawing shapes on canvas element. I want to select drawn shapes by clicking on it and want to add delete and re-size functions to it. How can i achieve that give me some tips, an example would be better if available.

Thank you

You probably need to use a `ListBox`. See [my example](http://stackoverflow.com/a/15821573/643085) — Federico Berasategui, Oct 18 '13 at 14:35
i have searched for in built properties for selection of element but dint got any. i am looking for approach itself — vinay hs, Oct 18 '13 at 14:50

score 2 · Answer 1 · answered Oct 18 '13 at 15:31

And in the code behind class we can add the events as bellow

We can do it with the help of InkManager

in the code behind class

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

I have added two answer becoz it is quite lengthy so plz first refer to the xaml part then the code behind part.hope it will help you — Debashrita, Oct 18 '13 at 15:34
Thanks for help but i have already implemented it what i want is to select the drawn shapes so that i can delete or resize it — vinay hs, Oct 21 '13 at 11:56

score 1 · Answer 2 · answered Oct 18 '13 at 15:16

This may help you for the Style of the Button you can add the style in the Page Resource as bellow

 <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

Selecting Shapes in Canvas for Windows Store App

2 Answers2