根據WPF中的組合框項目選擇顯示圖像

Question

我在不同的位置有3個組合框，如下所示，每個組合框下都有3張圖片。

<ComboBox Name="Category1" Grid.Row="0" Grid.Column="0"
        HorizontalAlignment="Left"
        Margin="40,20,0,0"
        VerticalAlignment="Top"
        Width="120"
        Loaded="Category1_Loaded"
        SelectionChanged="Category1_SelectionChanged"/>
        <Image Width="120" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" Margin="40,40,0,0" Name="CB1" Source="C:\Users\Image1.png" />

        <ComboBox Name="Category2" Grid.Row="0" Grid.Column="1"
        HorizontalAlignment="Left"
        Margin="40,20,0,0"
        VerticalAlignment="Top"
        Width="120"
        Loaded="Category2_Loaded"
        SelectionChanged="Category2_SelectionChanged"/>
        <Image Width="120" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Margin="40,40,0,0" Name="CB2" Source="C:\Users\Image2.png" />

        <ComboBox Name="Category3" Grid.Row="0" Grid.Column="2"
        HorizontalAlignment="Left"
        Margin="40,20,0,0"
        VerticalAlignment="Top"
        Width="120"
        Loaded="Category3_Loaded"
        SelectionChanged="Category3_SelectionChanged"/>
        <Image Width="120" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Left" Margin="40,40,0,0" Name="CB3" Source="C:\Users\Image3.png" />

和.cs代碼

 private void Category1_Loaded(object sender, RoutedEventArgs e)
        {
            // ... A List.
            List<string> data = new List<string>();
            data.Add("Category1_1");
            data.Add("Category1_2");
            // ... Get the ComboBox reference.
            var comboBox = sender as ComboBox;
            // ... Assign the ItemsSource to the List.
            comboBox.ItemsSource = data;
            // ... Make the first item selected.
            comboBox.SelectedIndex = 0;
        }

private void Category2_Loaded(object sender, RoutedEventArgs e)
        {
            // ... A List.
            List<string> data = new List<string>();
            data.Add("Category2_1");
            data.Add("Category2_2");
            // ... Get the ComboBox reference.
            var comboBox = sender as ComboBox;
            // ... Assign the ItemsSource to the List.
            comboBox.ItemsSource = data;
            // ... Make the first item selected.
            comboBox.SelectedIndex = 0;
        }
private void Category3_Loaded(object sender, RoutedEventArgs e)
        {
            // ... A List.
            List<string> data = new List<string>();
            data.Add("Category3_1");
            data.Add("Category3_2");
            // ... Get the ComboBox reference.
            var comboBox = sender as ComboBox;
            // ... Assign the ItemsSource to the List.
            comboBox.ItemsSource = data;
            // ... Make the first item selected.
            comboBox.SelectedIndex = 0;
        }

現在3個組合框和圖像如下

我想基於下拉選擇更改或顯示特定圖像。 例如，如果我選擇下拉值Category1_1它應該顯示圖像c:\\users\\Category1_1.PNG

Answer 1

我現在無法對其進行測試，但是以MSDN為例，您為組合框Category1選擇的更改事件應該是這樣的

    private void Category1_SelectionChanged(object sender, RoutedEventArgs e)
    {
        var comboBox = sender as ComboBox;

        // Check if you have something selected (this happens sometime)
        if(comboBox.SelectedIndex != -1)
        {
            // Take the text of the combo and build the path to the file
            string fileName = Path.Combine(@"C:\users", comboBox.Text + ".png"); 

            // Again, check if we really have that file available
            if(File.Exists(fileName))
            {
                // Build a BitmapImage from the file
                BitmapImage bi = new BitmapImage();
                bi.BeginInit();
                bi.UriSource = new Uri(fileName, UriKind.Relative);
                bi.EndInit();

                // Set the Image for this combo. Not sure if the Stretch part is needed
                CB1.Stretch = Stretch.Fill;
                CB1.Source = bi3;
            } 
        }
    }

來自MSDN的參考是

Image.Source屬性
ComboBox.Text屬性

另外，我不確定讀取Text屬性是否按預期方式工作（由ComboBox IsEditable屬性引起的可能的問題）。 無論如何，您都可以使用SelectedItem.ToString（）

如果您對組合類別1進行此工作，則可以輕松地將其重構為所有三個組合的通用方法，以傳遞發起事件的組合和要更新的圖像

Answer 2

您可以使用綁定轉換器將Image的Source屬性直接綁定到相應ComboBox的SelectedItem ，該轉換器將類別字符串轉換為BitmapImage：

<Window.Resources>
    <local:ImageConverter x:Key="ImageConverter"/>
</Window.Resources>
...
<ComboBox x:Name="comboBox1" .../>
<Image Source="{Binding SelectedItem, ElementName=comboBox1,
                        Converter={StaticResource ImageConverter}}"/>

轉換器看起來像這樣：

public class ImageConverter : IValueConverter
{
    public object Convert(
        object value, Type targetType, object parameter, CultureInfo culture)
    {
        try
        {
            var path = string.Format(@"C:\Users\{0}.png", value);
            return new BitmapImage(new Uri(path));
        }
        catch (Exception ex)
        {
            return null; // or some default image
        }
    }

    public object ConvertBack(
        object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

---

注意，您可以像這樣在XAML中輕松創建ComboBox項列表：

xmlns:sys="clr-namespace:System;assembly=mscorlib"
...
<ComboBox x:Name="comboBox1" SelectedIndex="0" ...>
    <ComboBox.Items>
        <sys:String>Category1_1</sys:String>
        <sys:String>Category1_2</sys:String>
        <sys:String>Category1_3</sys:String>
    </ComboBox.Items>
</ComboBox>