ComboBoxen werden durchaus ansprechender wenn diese Bilder anstatt reine Texte anzeigen.
Folglich ein Beispiel:
Um das zu erreichen wird zunächst eine eigene Klasse definiert, die neben dem eingeltichen Namen auch ein Pfad zu einem Bild beinhaltet:
public class Platform : ObservableObject
{
public String ImageSource { get; set; } = "";
public String Name { get; set; } = "";
}
Die Klasse ObservableObject stammt von unserem NuGet. Siehe hier!
Im zur View gehörenden ViewModel wird eine Liste von unserer neuen Klasse erstellt und befüllt:
public ObservableCollection<Platform> SearchSite { get; set; } = new ObservableCollection<Platform>();
//Beispielshaft im Konstruktor:
SearchSite.Add(new Platform() { Name = "Google", ImageSource="/images/google_logo.png" });
SearchSite.Add(new Platform() { Name = "DuckDuckGo", ImageSource="/images/duckduckgo_logo.png" });
SearchSite.Add(new Platform() { Name = "StackOverflow", ImageSource="/images/stackoverflow_logo.png" });
In der View überschreiben wir das ItemTemplate der ComboBox mit dem anzuzeigenden Bild:
<ComboBox
Width="200"
FontSize="22"
ItemsSource="{Binding SearchSite, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
SelectedIndex="{Binding SelectedPlatformIndex}">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image
Height="30"
Margin="5"
VerticalAlignment="Center"
SnapsToDevicePixels="True"
Source="{Binding ImageSource}"
ToolTip="{Binding Name}"
UseLayoutRounding="True" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Im Code können wir dann angenehm über den SelectedIndex der Combobox ermitteln, welchen Eintrag der Anwender in der ComboBox ausgewählt hat:
switch (SearchSite[SelectedPlatformIndex].Name.Trim().ToUpper())
{
case "GOOGLE":
Tools.OpenUrl("https://google.com/search?q=" + SearchURI);
break;
case "DUCKDUCKGO":
Tools.OpenUrl("https://duckduckgo.com/?q=" + SearchURI);
break;
case "STACKOVERFLOW":
Tools.OpenUrl("https://stackoverflow.com/search?q=" + SearchURI);
break;
}
Die komplette Anleitung auch zum anschauen: