CODEWITHSUNDEEP
wpfxamldatagridicons
user2025830
user2025830

Reputation: 902

Adding an icon into WPF datagrid

I want to adding an icon in each row of my datagrid. the columns are generated automatically and i have added an column with a datagridtemplatecolumn to show an icon in the first column.

this is my xaml code to show the icon:

    <DataGrid ItemsSource="{Binding User.myDataTable}" IsReadOnly="True" FrozenColumnCount="1">
        <DataGrid.Columns>
            <DataGridTemplateColumn x:Name="IconHeader"  Header="" CanUserResize="False">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Image Source="myImage" />
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>

that works well. now i want to change the icon if in one column of the row is a condition is true. for example. if column 11 is value "true" then icon 1 and if value "false" then icon2.

can i use the loadingrow event from the datagrid to do this and how can i do this with mvvm? or is there another way to do something like this?

Upvotes: 2

Views: 12649

Answers (3)

John Bowen
John Bowen

Reputation: 24453

The simplest thing to do here is use a DataTrigger in your CellTemplate that will fire based on a binding to the column data:

<DataTemplate>
    <Image Source="myImage1" x:Name="img" />
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Path=[11]}" Value="False">
            <Setter TargetName="img" Property="Source" Value="myImage2" />
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

DataRow has both int and string indexers for getting a column by index or name so for your binding path you can use [] with either the column index ([3]) or the column name ([MyColumn]).

Upvotes: 3

Florian Gl
Florian Gl

Reputation: 6014

This sounds like a job for converters. Just bind the Source-property of your Image to the Property you want:

<Image Source="{Binding Path=BoolProp, Converter={StaticResource BoolToImageConv}}"

Your converter could look like

public class BoolToImageConverter:IValueConverter
{
    public string FalsePath { get; set; }
    public string TruePath { get; set; }
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (System.Convert.ToBoolean(value))
        {
            return new BitmapImage(new Uri(TruePath));
        }
        return new BitmapImage(new Uri(FalsePath));
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}

In the resources of your Window/UserControl you have to refer your Converter.

<Window.Resources>
    <conv:BoolToImageConverter FalsePath="pathforimageiffalse" TruePath="pathforimageiftrue" x:Key="BoolToImageConv"/>
</Window.Resources>

Upvotes: 2

Marcel
Marcel

Reputation: 974

I believe the best way would be to implement a IValueConverter. If column11 is true, show the one image, if it's false, then show the other image.

IValueConverter : http://msdn.microsoft.com/en-us/library/system.windows.data.ivalueconverter.aspx

Something like :

public class IconConverter : IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  {
     if ((bool)value == true)
     {
        // column11 = true, so show icon 1
        return image1;
     }
     else
     {
        return image2;
     }
  }
}

Upvotes: 0

Related Questions