WPF Load Images Based on Value - wpf

Question

I have a List<object> which contains a list of of values for each object which I want to access and create a set image based on the values - don't really want to use a Converter.
I have the below which works:
<Image x:Name="Desk1" Grid.Column="1" Grid.Row="2" Width="50" Height="50">
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<DataTrigger Binding="{Binding Office[0].Desks[0].Status} Value="0">
<Setter Property="Source" Value="pack:///application:,,,/Resources/DeskAvailable.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding Office[0].Desks[0].Status} Value="1">
<Setter Property="Source" Value="pack:///application:,,,/Resources/DeskUnavailable.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding Office[0].Desks[0].Status} Value="2">
<Setter Property="Source" Value="pack:///application:,,,/Resources/DeskUnknown.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
But I don't want to have to write all this for many desks.
So I've created a Resource:
<Windows.Resources>
<DataTemplate x:Key = "DeskImage">
<Image>
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<DataTrigger Value="0">
<Setter Property="Source" Value="pack:///application:,,,/Resources/DeskAvailable.png"/>
</DataTrigger>
<DataTrigger Value="1">
<Setter Property="Source" Value="pack:///application:,,,/Resources/DeskUnavailable.png"/>
</DataTrigger>
<DataTrigger Value="2">
<Setter Property="Source" Value="pack:///application:,,,/Resources/DeskUnknown.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Windows.Resources>
Which I was hoping to access for each image and just pass it the value in Office[x].Desk[x].Status to determine which image to load. But this is the bit I'm unsure on how to create an image type in xaml and pass the value to the static resource.
Something like:
<Image x:Name="Desk1" Grid.Column="1" Grid.Row="2" Width="50" Height="50">
[pseudocode]
Bind to Office[x].Desks[x].Status
Pass data to Resource and load correct image
[/pseudo]
</image>

Answer 1

You may consider using nested ItemsControls.
<ItemsControl ItemsSource="{Binding Office}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Desks}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Width="50" Height="50">
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<DataTrigger Binding="{Binding Status}" Value="0">
<Setter Property="Source" Value="pack:///application:,,,/Resources/DeskAvailable.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding Status}" Value="1">
<Setter Property="Source" Value="pack:///application:,,,/Resources/DeskUnavailable.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding Status}" Value="2">
<Setter Property="Source" Value="pack:///application:,,,/Resources/DeskUnknown.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>