WPF/C#：讓繪制的圖形可以被選中并將信息顯示在ListBox中

本文通過一個小示例，跟大家介紹了如何在WPF上繪制矩形，并在其中添加文本，同時也介紹了ListBox的使用，通過數據綁定與數據模板顯示我們選中的單元格內的文本信息。希望對與我一樣正在學習WPF或者對WPF感興趣的同學有所幫助。

實現的效果

如果你對此感興趣，可以接著往下閱讀。

實現過程

繪制矩形

比如說我想繪制一個3行4列的表格：

 private void Button_Click_DrawRect(object sender, RoutedEventArgs e)
 {
     int Row = 3;
     int Col = 4;
     
     for(int i = 0; i < Row; i++)
     {
         for(int j = 0; j< Col; j++) 
         {
             // 添加矩形
             System.Windows.Shapes.Rectangle rectangle = new System.Windows.Shapes.Rectangle
             {
                 Width = 50,
                 Height = 50,
                 Stroke = System.Windows.Media.Brushes.Blue,

                 // 設置填充顏色為透明色
                 Fill = System.Windows.Media.Brushes.Transparent,
                 StrokeThickness = 1
             };
          
             Canvas.SetLeft(rectangle, 80 + 50 * j);
             Canvas.SetTop(rectangle, 50 + 50 * i);
           
             myCanvas1.Children.Add(rectangle);
            
         }
        
       
     }

實現的效果：

現在又想畫4行3列的表格了，只需修改這里：

int Row = 4;
int Col = 3;

實現的效果：

為每個單元格添加信息

繪制了單元格之后，我們想要在單元格中添加它所在的行與列的信息。

在繪制矩形后面添加：

 // 在矩形內部添加文字
 TextBlock textBlock = new TextBlock
 {
     Text = i + "-" + j,
     Foreground = System.Windows.Media.Brushes.Black,
     FontSize = 12
 };

 Canvas.SetLeft(textBlock, 80 + 50 * j + 10);
 Canvas.SetTop(textBlock, 50 + 50 * i + 10);

 myCanvas1.Children.Add(textBlock);

現在實現的效果如下所示：

讓每個單元格可以被選中與取消選中

我們設定鼠標左鍵點擊表示選中，鼠標右鍵點擊表示取消選中，選中之后，單元格邊框會變紅，取消選中后又恢復原來的顏色。

為每個單元格添加鼠標點擊事件處理程序：

 // 添加鼠標事件處理器，左鍵點擊表示選中
 rectangle.MouseLeftButtonDown += Rectangle_MouseLeftButtonDown;

 // 添加鼠標事件處理器，右鍵點擊表示取消選中
 rectangle.MouseRightButtonDown += Rectangle_MouseRightButtonDown;

鼠標點擊事件處理程序：

 // 鼠標事件處理程序，左鍵點擊表示選中
 private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 {   
     System.Windows.Shapes.Rectangle? rectangle = sender as System.Windows.Shapes.Rectangle;
     if (rectangle != null)
     {
         // 改變矩形的顏色以表示它被選中
         rectangle.Stroke = System.Windows.Media.Brushes.Red;             
     }
 }

  // 鼠標事件處理器，右鍵點擊表示選中
  private void Rectangle_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
  {   
      System.Windows.Shapes.Rectangle? rectangle = sender as System.Windows.Shapes.Rectangle;
      if (rectangle != null)
      {
          // 改變矩形的顏色以表示它被取消選中
          rectangle.Stroke = System.Windows.Media.Brushes.Blue;
                     
      }
  }

現在查看實現的效果：

將每個單元格與其中的信息對應起來

在這里可以發現每個單元格與其中的信息是一一對應的關系，我們就可以采用字典這種數據結構。

Dictionary<System.Windows.Shapes.Rectangle, string> rectangleText = new Dictionary<System.Windows.Shapes.Rectangle, string>();

 // 將單元格與對應的信息存入字典
 rectangleText[rectangle] = textBlock.Text;

這樣就實現了每個單元格與其中信息的一一對應。

ListBox的使用

首先設計兩個類。

public class SelectedRect
{      
    public string? Name {  get; set; }
}

表示選中的單元格，只有一個屬性就是它所存儲的信息。

public class SelectedRects : ObservableCollection<SelectedRect>
{

}

表示選中的多個單元格，繼承自ObservableCollection<SelectedRect>。

ObservableCollection<T>是.NET框架中的一個類，它表示一個動態數據集合，當添加、刪除項或者刷新整個列表時，它會提供通知。這對于數據綁定非常有用，因為當集合改變時，UI可以自動更新以反映這些更改。

 SelectedRects selectedRects;
 public Drawing()
 {
     InitializeComponent();
     this.selectedRects = new SelectedRects();
     DataContext = selectedRects;

 }

在WPF（Windows Presentation Foundation）中，DataContext是一個非常重要的概念，它是數據綁定的基礎。
DataContext是定義在FrameworkElement類中的一個屬性，幾乎所有的WPF控件都繼承自FrameworkElement，因此幾乎所有的WPF控件都有DataContext屬性。
DataContext屬性通常被設置為一個對象，這個對象包含了綁定到界面元素的數據。當你在XAML中創建數據綁定時，綁定表達式會查找DataContext中的屬性。

需要注意的是，DataContext是可以繼承的，如果一個元素的DataContext沒有被顯式設置，它將使用其父元素的DataContext。這使得你可以在窗口級別設置DataContext，然后在窗口的所有子元素中使用數據綁定。

在這里我們就是這樣設置了窗口的DataContext屬性為selectedRects。

現在我們修改點擊事件處理程序：

 private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 {
     System.Windows.Shapes.Rectangle? rectangle = sender as System.Windows.Shapes.Rectangle;
     if (rectangle != null)
     {
         // 改變矩形的顏色以表示它被選中
         rectangle.Stroke = System.Windows.Media.Brushes.Red;
         
         string text = rectangleText[rectangle];
         
         SelectedRect selectedRect = new SelectedRect();
         selectedRect.Name = text;
         selectedRects.Add(selectedRect);
        
     }

 }

 private void Rectangle_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
 {
     System.Windows.Shapes.Rectangle? rectangle = sender as System.Windows.Shapes.Rectangle;
     if (rectangle != null)
     {
         // 改變矩形的顏色以表示它被取消選中
         rectangle.Stroke = System.Windows.Media.Brushes.Blue;
         
         string text = rectangleText[rectangle];
         
         var selectedRect = selectedRects.Where(x => x.Name == text).FirstOrDefault();
         if (selectedRect != null)
         {
             selectedRects.Remove(selectedRect);
         }


     }

 }

在ListBox設置數據綁定：

 <ListBox Grid.Column="1" SelectedIndex="0" Margin="10,0,10,0"
           ItemsSource="{Binding}">
    
 </ListBox>

現在來看看效果：

我們會發現在ListBox中只會顯示類名，并不會顯示類中的信息。

這是為什么呢？

因為我們只設置了數據綁定，ListBox知道它的數據來自哪里了，但是我們沒有設置數據模板，ListBox不知道該按怎樣的方式顯示數據。

數據模板的使用

現在我們就來設置一下數據模板，先來介紹一下數據模板。

在WPF（Windows Presentation Foundation）中，數據模板（DataTemplate）是一種定義數據視覺表示的方式。它允許你自定義如何顯示綁定到控件的數據。

數據模板非常強大，它可以包含任何類型的元素，并可以使用復雜的綁定和樣式。通過使用數據模板，你可以創建豐富和個性化的UI，而無需在代碼中手動創建和管理元素。

現在開始嘗試去使用數據模板吧。

在xaml中添加：

<Window.Resources>
    <DataTemplate x:Key="MyTemplate">
        <TextBlock  Text="{Binding Path=Name}"/>
    </DataTemplate>
</Window.Resources>

<Window.Resources>：這是一個資源字典，它包含了在整個窗口中都可以使用的資源。在這個例子中，它包含了一個數據模板。
<DataTemplate x:Key="MyTemplate">：這定義了一個數據模板，并給它指定了一個鍵"MyTemplate"。這個鍵可以用來在其他地方引用這個模板。
<TextBlock Text="{Binding Path=Name}"/>：這是數據模板的內容。它是一個TextBlock，其Text屬性綁定到數據對象的Name屬性。{Binding Path=Name}是一個綁定表達式，它告訴WPF查找數據對象中名為Name的屬性，并將其值綁定到TextBlock的Text屬性。

讓ListBox使用這個數據模板：

<ListBox Grid.Column="1" SelectedIndex="0" Margin="10,0,10,0"
          ItemsSource="{Binding}"
         ItemTemplate="{StaticResource MyTemplate}">
   
</ListBox>

現在再來看一下效果：

發現可以正常顯示數據了，但是還有一個問題，就是會重復添加，最后解決這個問題就好了！

修改鼠標左鍵點擊事件處理程序：

 // 鼠標事件處理器，左鍵點擊表示選中
 private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 {
     System.Windows.Shapes.Rectangle? rectangle = sender as System.Windows.Shapes.Rectangle;
     if (rectangle != null)
     {
         // 改變矩形的顏色以表示它被選中
         rectangle.Stroke = System.Windows.Media.Brushes.Red;
         string text = rectangleText[rectangle];
         if (selectedRects.Where(x => x.Name == text).Any())
         {

         }
         else
         {
             SelectedRect selectedRect = new SelectedRect();
             selectedRect.Name = text;
             selectedRects.Add(selectedRect);
         }

     }

 }

現在再來看看最后的效果：

全部代碼

xaml：

<Window x:Class=""
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local=""
        xmlns:hc="https://handyorg.github.io/handycontrol"
        mc:Ignorable="d"
        Title="Drawing" Height="450" Width="800">
    <Window.Resources>
        <DataTemplate x:Key="MyTemplate">
            <TextBlock  Text="{Binding Path=Name}"/>
        </DataTemplate>
    </Window.Resources>
    <StackPanel>
        <hc:Row Margin="0,20,0,0">
            <hc:Col Span="8">
                <Label Content="畫矩形"></Label>
            </hc:Col>
            <hc:Col Span="8">
                <Button Style="{StaticResource ButtonPrimary}" Content="開始"
         Click="Button_Click_DrawRect"/>
            </hc:Col>
            <hc:Col Span="8">
                <Button Style="{StaticResource ButtonPrimary}" Content="清空"
                        Click="Button_Click_Clear"/>
            </hc:Col>
        </hc:Row>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Canvas Grid.Column="0" Background="Azure" x:Name="myCanvas1" Height="400">
                <!-- 在這里添加你的元素 -->
            </Canvas>


            <ListBox Grid.Column="1" SelectedIndex="0" Margin="10,0,10,0"
                      ItemsSource="{Binding}"
                     ItemTemplate="{StaticResource MyTemplate}">
               
            </ListBox>
        </Grid>



    </StackPanel>
</Window>

cs：

namespace xxx
{
    /// <summary>
    /// Drawing.xaml 的交互邏輯
    /// </summary>
    public partial class Drawing : System.Windows.Window
    {
        Dictionary<System.Windows.Shapes.Rectangle, string> rectangleText = new Dictionary<System.Windows.Shapes.Rectangle, string>();
        SelectedRects selectedRects;
        public Drawing()
        {
            InitializeComponent();
            this.selectedRects = new SelectedRects();
            DataContext = selectedRects;

        }

        private void Button_Click_DrawRect(object sender, RoutedEventArgs e)
        {
            int Row = 4;
            int Col = 3;
            
            for(int i = 0; i < Row; i++)
            {
                for(int j = 0; j< Col; j++) 
                {
                    // 添加矩形
                    System.Windows.Shapes.Rectangle rectangle = new System.Windows.Shapes.Rectangle
                    {
                        Width = 50,
                        Height = 50,
                        Stroke = System.Windows.Media.Brushes.Blue,

                        // 設置填充顏色為透明色
                        Fill = System.Windows.Media.Brushes.Transparent,
                        StrokeThickness = 1
                    };

                    // 添加鼠標事件處理器，左鍵點擊表示選中
                    rectangle.MouseLeftButtonDown += Rectangle_MouseLeftButtonDown;

                    // 添加鼠標事件處理器，右鍵點擊表示取消選中
                    rectangle.MouseRightButtonDown += Rectangle_MouseRightButtonDown;

                    Canvas.SetLeft(rectangle, 80 + 50 * j);
                    Canvas.SetTop(rectangle, 50 + 50 * i);
                  
                    myCanvas1.Children.Add(rectangle);

                    // 在矩形內部添加文字
                    TextBlock textBlock = new TextBlock
                    {
                        Text = i + "-" + j,
                        Foreground = System.Windows.Media.Brushes.Black,
                        FontSize = 12
                    };

                    Canvas.SetLeft(textBlock, 80 + 50 * j + 10);
                    Canvas.SetTop(textBlock, 50 + 50 * i + 10);

                    myCanvas1.Children.Add(textBlock);

                    // 將單元格與對應的信息存入字典
                    rectangleText[rectangle] = textBlock.Text;
                }
               
              
            }
          

        }

        private void Button_Click_Clear(object sender, RoutedEventArgs e)
        {
            myCanvas1.Children.Clear();
        }

        // 鼠標事件處理器，左鍵點擊表示選中
        private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            System.Windows.Shapes.Rectangle? rectangle = sender as System.Windows.Shapes.Rectangle;
            if (rectangle != null)
            {
                // 改變矩形的顏色以表示它被選中
                rectangle.Stroke = System.Windows.Media.Brushes.Red;
                string text = rectangleText[rectangle];
                if (selectedRects.Where(x => x.Name == text).Any())
                {

                }
                else
                {
                    SelectedRect selectedRect = new SelectedRect();
                    selectedRect.Name = text;
                    selectedRects.Add(selectedRect);
                }

            }

        }

        // 鼠標事件處理器，右鍵點擊表示選中
        private void Rectangle_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            System.Windows.Shapes.Rectangle? rectangle = sender as System.Windows.Shapes.Rectangle;
            if (rectangle != null)
            {
                // 改變矩形的顏色以表示它被取消選中
                rectangle.Stroke = System.Windows.Media.Brushes.Blue;
                string text = rectangleText[rectangle];
                var selectedRect = selectedRects.Where(x => x.Name == text).FirstOrDefault();
                if (selectedRect != null)
                {
                    selectedRects.Remove(selectedRect);
                }


            }

        }
    }
}

總結