I have two images defined as follows:
Image Wall = new Image();
Wall.Source = new BitmapImage(new Uri("pack://application:,,,/Resources/Wall.png"));
Image Corridor = new Image();
Corridor.Source = new BitmapImage(new Uri("pack://application:,,,/Resources/Corridor.png"));
I have a uniform grid and in each of its cells there is a button. My goal is to make one of those pictures appear on each of those buttons based on a DataTrigger condition. My code is running but the pictures never appear and I get two warnings: "The resource "Corridor" could not be resolved" and "The resource "Wall" could not be resolved". Here is my xaml code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ItemsControl Grid.Row="1" ItemsSource="{Binding Fields}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="{Binding TableSize}" Columns="{Binding TableSize}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Command="{Binding SelectCommand}" CommandParameter="{Binding Number}" BorderThickness="0">
<Button.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Button.RenderTransform>
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding Background}" Value="Corridor">
<Setter Property="Foreground" Value="{DynamicResource Corridor}" />
</DataTrigger>
<DataTrigger Binding="{Binding Background}" Value="Wall">
<Setter Property="Foreground" Value="{DynamicResource Wall}" />
</DataTrigger>
<DataTrigger Binding="{Binding Background}" Value="Player">
<Setter Property="Background" Value="Yellow" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding X}" />
<Setter Property="Grid.Column" Value="{Binding Y}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Grid>
Finally this is the ObservableCollection I bound my buttongrid to. Its background property takes its value from a value called _model because I'm using MVVM architecture which is not that relevant in this question. All that matters is that Background property can only be Corridor, Wall or Player.
ObservableCollection<DungeonField> Fields = new ObservableCollection<DungeonField>();
for (Int32 i = 0; i < 9; ++i)
{
for (Int32 j = 0; j < 9; ++j)
Fields.Add(new DungeonField
{
Background = _model.GetField(i, j).ToString(),
X = i,
Y = j,
Number = i * 9 + j,
});
}
I do have these two images added to my project as resources and their Build Action is set to Resource. I'm quite a newbie at manipulating pictures in wpf so my question is what am I missing?
Thanks In Advance
Edit: I figured I shouldn't use DynamicResource in xaml in the DataTrigger part because I already declared an Image variable so I can just Bind it to the buttons. Using Binding instead of DynamicResource makes all of those warnings disappear but the pictures still don't show up in the grid.