Связать изображения в ComboBox с помощью DataTemplate

Question

Я работаю над существующим кодом. У этой вещи есть ComboBox с несколькими ComboBoxItems. У каждого элемента есть StackPanel, в котором есть элемент управления Image и TextBlock.

Теперь свойство source элемента управления Image установлено на различные векторные изображения, хранящиеся в файлах XAML, тогда как свойство Text для TextBlock установлено на локализованную строку.

Я хочу реализовать это не с помощью отдельных ComboBoxItems, а с помощью DataTemplate. Я могу создать список строк для TextBlock, но я не могу понять, как связать изображения с соответствующими элементами управления изображениями.

Я открыт для любого другого лучшего решения. Кроме того, если вы считаете, что правильный способ сделать это уже существующий, пожалуйста, дайте мне знать.

Возможно, это дубликат вопроса, но я не мог найти тот, который подходит для моей проблемы. Если это так, достаточно ссылки на другой вопрос.

EDIT: Код Добавлено

<ComboBox x:Name="imageInfoLevelsComboBox" SelectedIndex="1" 
      Style="{DynamicResource ComboBoxToolBarStyle}" 
      Margin="6,6,6,0" Width="50" 
      ToolTip="{x:Static Viewing:ViewingTexts.ImageInformationLevels}" 
      SelectionChanged="OnImageInfoLevelsComboBoxSelectionChanged" > 
    <ComboBoxItem x:Name="showAllComboBoxItem" 
        Style="{DynamicResource ComboBoxItemToolBarStyle}"> 
     <StackPanel Orientation="Horizontal"> 
      <Image x:Name="ImageInfoAllImage" 
        Source="{StaticResource ImageInfoFullIcon}" 
        Margin="0,0,4,0" 
        Width="24" Height="24"/> 
      <TextBlock 
       Text="{x:Static Viewing:ViewingTexts.ImageInformationFull}" 
       Margin="10,0,0,0" 
       VerticalAlignment="Center"/> 
     </StackPanel> 
    </ComboBoxItem> 
    <ComboBoxItem x:Name="showImportantComboBoxItem" 
     Style="{DynamicResource ComboBoxItemToolBarStyle}"> 
     <StackPanel Orientation="Horizontal"> 
      <Image x:Name="ImageInfoImportantImage" 
        Source="{StaticResource ImageInfoLimitedIcon}" 
        Margin="0,0,4,0" 
        Width="24" Height="24"/> 
      <TextBlock 
       Text="{x:Static Viewing:ViewingTexts.ImageInformationIntermediate}" 
         Margin="10,0,0,0" 
         VerticalAlignment="Center"/> 
     </StackPanel> 
    </ComboBoxItem> 
    <ComboBoxItem x:Name="showNotificationsComboBoxItem" 
     Style="{DynamicResource ComboBoxItemToolBarStyle}"> 
     <StackPanel Orientation="Horizontal"> 
      <Image x:Name="ImageInfoNotificationsImage" 
       Source="{StaticResource ImageInfoNoneIcon}" 
       Margin="0,0,4,0" Width="24" Height="24"/> 
      <TextBlock Text="{x:Static Viewing:ViewingTexts.ImageInformationNone}" 
         Margin="10,0,0,0" VerticalAlignment="Center"/> 
     </StackPanel> 
    </ComboBoxItem> 
</ComboBox> 

То, что я думаю, что я могу сделать, это создать класс с 2-х объектов, один из строкового типа, а другой как изображение. А затем создайте список и привяжите его с помощью combobox, но проблема в том, что я не уверен, как использовать векторное изображение в качестве объекта.

Спасибо.

Answer 1

Я думаю, вам нужно связать список объектов с не менее чем двумя свойствами вместо простого списка строк. Одно свойство будет содержать строку для текстового блока, другое свойство будет urisource для изображения.

Обратитесь к этой ссылке примеров из UriSource определений Wpf - relative image source path

Answer 2

свяжите ItemsSource вашего ComboBox к коллекции объектов, который имеет свойство, представляющее текст и изображение. Затем вам нужно создать IValueConverter и указать его экземпляр на привязку вашего изображения, которое может преобразовать значение свойства на ваш объект в источник изображения.

Вот один пример: http://www.codewrecks.com/blog/index.php/2010/07/23/bind-an-image-to-a-property-in-wpf/

Answer 3

Здесь также хорошо Пример изображения связывания в комбобоксе

http://wpftutorial.co.in/WPFControlls/DropdownWithImage.aspx