WPF - Select canvas UIElement

  • Article

This post goal is to demonstrate how to deal with canvas drawing and selection of items in the canvas.

! This post will be updated for further information.

In the MainWindow.xaml just create a Canvas and a CheckBox.

 <Window x:Class="TestCanvas.MainWindow"        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height="350" Width="525">    <Grid>        <Grid.RowDefinitions>            <RowDefinition></RowDefinition>            <RowDefinition Height="6*"></RowDefinition>        </Grid.RowDefinitions>
         <CheckBox Content="Enable drawing" IsChecked="True"                  Height="16" HorizontalAlignment="Left" Margin="12,12,0,0" Name="checkBox1" VerticalAlignment="Top" />
         <Canvas Name="myCanvas" MouseDown="myCanvas_MouseDown" MouseUp="myCanvas_MouseUp"                 Grid.Row="1" Background="White">        </Canvas>    </Grid></Window>
 
 In the MainWindow.cs file

 public partial class MainWindow : Window    {        public MainWindow()        {            InitializeComponent();        }        Point A;        Point B;        UIElement selectedElement;        private void myCanvas_MouseDown(object sender, MouseButtonEventArgs e)        {            A = e.GetPosition(this);        }        private void myCanvas_MouseUp(object sender, MouseButtonEventArgs e)        {            if (lineselection)            {                lineselection = false;                e.Handled = true;                return;            }            B = e.GetPosition(this);            if (checkBox1.IsChecked == true)            {                Line line = new Line()                {                    X1 = A.X,                    Y1 = A.Y,                    X2 = B.X,                    Y2 = B.Y,                    Stroke = new SolidColorBrush(Color.FromRgb(255, 0, 0)),                    StrokeThickness = 10                };                line.MouseDown += line_MouseDown;                line.MouseDown += line_MouseUp;                clearLinesColor();                myCanvas.Children.Add(line);                selectedElement = line;                myCanvas.UpdateLayout();            }        }        private void clearLinesColor()        {            foreach (UIElement element in myCanvas.Children)            {                if (element is Line)                    ((Line)element).Stroke = new SolidColorBrush(Color.FromRgb(0, 0, 0));                Canvas.SetZIndex(element, 0);            }        }        private bool lineselection = false;        private void line_MouseDown(object sender, MouseButtonEventArgs e)        {            lineselection = true;        }        private void line_MouseUp(object sender, MouseButtonEventArgs e)        {            clearLinesColor();            if (sender is Line)            {                Line selectedLine = (Line)sender;                selectedElement = selectedLine;                selectedLine.Stroke = new SolidColorBrush(Color.FromRgb(255, 0, 0));                Canvas.SetZIndex(selectedLine, 1);            }            e.Handled = true;        }        private void button1_Click(object sender, RoutedEventArgs e)        {            myCanvas.Children.Remove(selectedElement);        }
 }