Binding to a string value that should then bind to a Resource, what wrong here ?

Question

Hi,

I have a class with the following properties: Message(string), Added(DateTime) and LogLevel(string)

In my App.xaml i have the following:

<Application.Resources>
    <ImageSource x:Key="Critical">Gfx/Log/Critical.png</ImageSource>
    <ImageSource x:Key="Info">Gfx/Log/Information.png</ImageSource>
    <ImageSource x:Key="Error">Gfx/Log/Error.png</ImageSource>
    <ImageSource x:Key="Warning">Gfx/Log/Warning.png</ImageSource>
</Application.Resources>

The LogLevel in the above class can have one of the following 4 ImageSource resource values defined in the app.xaml file.

I'm using the WPF Toolkit from codeplex: link text

<my:DataGrid Grid.Column="0" Grid.Row="1" AutoGenerateColumns="False" Name="userLogGrid">
    <my:DataGrid.Columns>
        <my:DataGridTextColumn Header="Added" Binding="{Binding Added}" />
        <my:DataGridTextColumn Header="Message" Binding="{Binding Message}" />
        <my:DataGridTextColumn Header="Message" Binding="{Binding LogLevel}" />
        <my:DataGridTemplateColumn Header="Level">
            <my:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{DynamicResource {Binding LogLevel}}" />
                </DataTemplate>
            </my:DataGridTemplateColumn.CellTemplate>
        </my:DataGridTemplateColumn>
    </my:DataGrid.Columns>
</my:DataGrid>

So ... the LogLevel are bound to the grid ... but my Image are not display ... I have no idea if this is the right way to do it ... or there are better ways ... maybe I have a bug in the code ....

I'm not even sure how to debug this, since its xaml and I'm just started using it ...

Any help are very appriciated ...

This is my first "Stackoverflow" post ... so if the formating aint perfect ... I will learn my this ...

Answer 1

Using a DataTemplate is the right way to do it. Do not specify the Source in the image, but add some Triggers:

<DataTemplate>
    <Image x:Name="myImage" />
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding LogLevel}" Value="Critical">
            <Setter TargetName="myImage" Property="Source" Value="{StaticResource Critical}"/>
        </DataTrigger>
    </DataTemplate.Triggers>
    <!--others triggers here-->
</DataTemplate>

Answer 2

So ... its working now with the following code ... GREAT.

But as I'm using this DataTemplate on multiple pages, how can I move it to the Resources. Read some where a while ago that its possible to make reuse of DataTemplate and spefify the template to use ... but I can seem to find any of the xaml tags where I can put what template to use for this "Imagetemplate"

Could be very nice, since I then dont have to specify this all the other places, and I have a central place to make changes to it ... :-)

<my:DataGrid Grid.Column="0" Grid.Row="1" AutoGenerateColumns="False" Name="userLogGrid">
    <my:DataGrid.Columns>
        <my:DataGridTextColumn Header="Added" Binding="{Binding Added}" />
        <my:DataGridTextColumn Header="Message" Binding="{Binding Message}" />
        <my:DataGridTextColumn Header="Message" Binding="{Binding LogLevel}" />
        <my:DataGridTemplateColumn Header="Level">
            <my:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image x:Name="myImage" Height="20" Width="20" />
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding LogLevel}" Value="Info">
                            <Setter TargetName="myImage" Property="Source" Value="{StaticResource Information}"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding LogLevel}" Value="Warning">
                            <Setter TargetName="myImage" Property="Source" Value="{StaticResource Warning}"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding LogLevel}" Value="Error">
                            <Setter TargetName="myImage" Property="Source" Value="{StaticResource Error}"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding LogLevel}" Value="Critical">
                            <Setter TargetName="myImage" Property="Source" Value="{StaticResource Critical}"/>
                        </DataTrigger>
                    </DataTemplate.Triggers>
                    <!--others triggers here-->
                </DataTemplate>
            </my:DataGridTemplateColumn.CellTemplate>
        </my:DataGridTemplateColumn>
    </my:DataGrid.Columns>
</my:DataGrid>

Solution:

<my:DataGridTemplateColumn Header="Level" CellTemplate="{StaticResource ImageLevels}"></my:DataGridTemplateColumn>

In the App.xaml

<Application.Resources>
<DataTemplate x:Key="ImageLevels">
    <Image x:Name="myImage" Height="20" Width="20" />
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding LogLevel}" Value="Info">
            <Setter TargetName="myImage" Property="Source" Value="{StaticResource Information}"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding LogLevel}" Value="Warning">
            <Setter TargetName="myImage" Property="Source" Value="{StaticResource Warning}"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding LogLevel}" Value="Error">
            <Setter TargetName="myImage" Property="Source" Value="{StaticResource Error}"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding LogLevel}" Value="Critical">
            <Setter TargetName="myImage" Property="Source" Value="{StaticResource Critical}"/>
        </DataTrigger>
    </DataTemplate.Triggers>
    <!--others triggers here-->
</DataTemplate>
</Application.Resources>

Answer 3

Take a look at my ResourceKeyBinding extension: it will make your original code work with almost no changes:

<my:DataGrid Grid.Column="0" Grid.Row="1" AutoGenerateColumns="False" Name="userLogGrid" xmlns:ff="clr-namespace:WpfExtensions;assembly=WpfExtensions">
    <my:DataGrid.Columns>
        <my:DataGridTextColumn Header="Added" Binding="{Binding Added}" />
        <my:DataGridTextColumn Header="Message" Binding="{Binding Message}" />
        <my:DataGridTextColumn Header="Message" Binding="{Binding LogLevel}" />
        <my:DataGridTemplateColumn Header="Level">
            <my:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{ff:ResourceKeyBinding Path=LogLevel}" />
                </DataTemplate>
            </my:DataGridTemplateColumn.CellTemplate>
        </my:DataGridTemplateColumn>
    </my:DataGrid.Columns>
</my:DataGrid>