how to bind the image dynamically for datagrid in.cs

Question

hi, this is my xaml code.

 <sdk:DataGrid x:Name="dgMarks"  CanUserResizeColumns="False"  SelectionMode="Single"   AutoGenerateColumns="False" VerticalAlignment="Top" IsReadOnly="True"  Margin="13,44,0,0" RowDetailsVisibilityChanged="dgMarks_RowDetailsVisibilityChanged"    RowDetailsVisibilityMode="Collapsed" Height="391" HorizontalAlignment="Left" Width="965" SelectionChanged="dgMarks_SelectionChanged"  VerticalScrollBarVisibility="Visible" >
            <sdk:DataGrid.Columns>
                <sdk:DataGridTemplateColumn>
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button x:Name="myButton"   
                            Click="ExpandMarks_Click">
     <TextBlock Text="{Binding Level}" TextWrapping="NoWrap"  ></TextBlock>
                                <Image  x:Name="imgMarks"  Stretch="None"/>
                            </Button>
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>
                <sdk:DataGridTemplateColumn  Header="Name" Visibility="Collapsed">
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate >
                            <sdk:Label Content="{Binding Name}"/>
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>

                <sdk:DataGridTemplateColumn  Header="Marks" Width="80">
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
   <sdk:Label Content="{Binding Marks}"/>
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>
            </sdk:DataGrid.Columns>
 </sdk:DataGrid>

from database i am getting these values

 name   marks   Level
abc     23       0
xyz     67       1
yu     56        0
aa     89        1

here i am binding these values for datagrid. i have an tricky thing to be done .based on the level i should be binding image if level value is 1 then bind the image. if level value is 0 then do not bind the image for that row

i know this is how we need to handle but where should i write this code in which events?

Image imgLevel = (Image)templateTrendScore.FindName("imgMarks");

if (level1==1)
{
  imgLevel .Source = new BitmapImage(new Uri("/Images/image1.JPG", UriKind.Relative));
}

any help would be great thanks in advance

Answer 1

Place the image in the xaml and then bind it's Visibility property to Level with a IValueConverter like this:

public class LevelToVisibilityConverter : IValueConverter
{
    /// <exception cref="ArgumentException">TargetType must be Visibility</exception>
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if(!(value is int))
            throw new ArgumentException("Source must be of type int");

        if(targetType != typeof(Visibility))
            throw new ArgumentException("TargetType must be Visibility");

        int v = (int) value;

        if (v == 1)
            return Visibility.Visible;
        else
            return Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Answer 2

A value converter is the item you are after, assuming you have more than 0 and 1 for level (else you'd have used a boolean right?)

Here is the value converter:-

[ContentProperty("Items")]
public class IndexToObjectConverter : IValueConverter
{
    private readonly ObservableCollection<object> myCol = new ObservableCollection<object>();

    public ObservableCollection<object> Items { get { return myCol; } }

    #region IValueConverter Members

    public object Convert(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return Items[(int)value];
    }

    public object ConvertBack(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException("This converter only works for one way binding");
    }

    #endregion
}

In the usercontrol resources you would have this:-

<UserControl.Resources>
    <local:IndexToObjectConverter x:Key="LevelToImage">
        <BitmapImage />
        <BitmapImage UriSource="Test.png" />
    </local:IndexToObjectConverter>
</UserControl.Resources>

In you can now bind the Source property of the Image control like this:-

<Image Source="{Binding Level, Converter={StaticResource LevelToImage}}" />

Now as you invent new level numbers you can add elements to the converter.

BTW, You appear to have both a TextBlock and an Image inside the Button. Button can only hold a single object so you need to wrap these two inside some panel such as Grid.