WPF 下拉框選項做鼠標 Hover 預覽效果

本文來告訴大家如何在 WPF 中，在 下拉框 ComboBox 里面，鼠標移動到 ComboBoxItem 上時，自動觸發對應的事件，用來預覽此選項值。例如我在實現一個顏色下拉框，此時我可以通過點擊下拉框顯示多個不同的顏色，鼠標移動到某個顏色選項上，可以修改界面，預覽此顏色的內容

大概的界面如下圖，點擊右邊的顏色下拉框，可以顯示多個不同的顏色，而鼠標移動到下拉框的選項上，可以自動讓文標的顏色進行變更

實現的運行效果如下圖

實現的方法很簡單，如下圖創建一個簡單的界面

  <window.resources>
    <x:array x:key="BrushList" type="SolidColorBrush">
      <solidcolorbrush color="Black"></solidcolorbrush>
      <solidcolorbrush color="Wheat"></solidcolorbrush>
      <solidcolorbrush color="Coral"></solidcolorbrush>
      <solidcolorbrush color="DarkGoldenrod"></solidcolorbrush>
      <solidcolorbrush color="Ivory"></solidcolorbrush>
    </x:array>
  </window.resources>
  <grid>
    <grid.columndefinitions>
      <columndefinition></columndefinition>
      <columndefinition></columndefinition>
    </grid.columndefinitions>
    <textblock x:name="TextBlock" text="lindexi" horizontalalignment="Center" verticalalignment="Center"></textblock>
    <combobox grid.column="1" margin="10,10,10,10" width="200" verticalalignment="Center" itemssource="{StaticResource BrushList}" mousemove="ComboBox_OnMouseMove">
      <combobox.itemtemplate>
        <datatemplate>
          <textblock foreground="{Binding}" text="{Binding Color}"></textblock>
        </datatemplate>
      </combobox.itemtemplate>
    </combobox>
  </grid>

接着在后台代碼添加 ComboBox_OnMouseMove 方法，在 ComboBox_OnMouseMove 方法里面判斷當前的鼠標移動，根據當前鼠標移動所在的項對應的 DataContext 即可拿到綁定的數據，從而拿到當前預覽顏色

        private void ComboBox_OnMouseMove(object sender, MouseEventArgs e)
        {
            if (e.OriginalSource is FrameworkElement frameworkElement)
            {
                if (frameworkElement.DataContext is Brush brush)
                {
                    TextBlock.Foreground = brush;
                }
            }
        }

以上代碼采用 C# 9.0 的寫法

本文所有代碼放在 github 和 gitee 歡迎訪問

可以通過如下方式獲取本文的源代碼，先創建一個空文件夾，接着使用命令行 cd 命令進入此空文件夾，在命令行里面輸入以下代碼，即可獲取到本文的代碼

git init
git remote add origin https://gitee.com/lindexi/lindexi_gd.git
git pull origin 54b57574b4e99362c651a77251c7bc1d7ad6106f

以上使用的是 gitee 的源，如果 gitee 不能訪問，請替換為 github 的源

git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git

獲取代碼之后，進入 QicafejukarJaifairnemleree 文件夾