Использование картинок в DataGrid в SilverLight

Display Image in DataGrid
Insert image in DataGrid cell in SilverLight
SilverLight. Вставить картинку в DataGrid.

---------------------------------------------------------------------
Задача вроде простецкая. Необходимо сделать таблицу, в которой кроме текста будет еще и графическая информация (в моем случае это были флажки, индикаторы). Т.е. необходимо вставить изображение в ячейку таблицы.

Я в SilverLight полный newbie, поэтому для меня это было довольно сложно. На русском языке по этому вопросу очень мало информации.

Метод, который я опишув этом посте, основывается на использовании класса StringToObjectConverter. Этот класс я нашел в инете и использовал как есть.

Что это и с чем едят можно почитать здесь - http://geekswithblogs.net/codingbloke/archive/2010/06/09/yet-another-blog-about-ivalueconverter.aspx


Код класса :
[ContentProperty("Items")]

public class StringToObjectConverter : IValueConverter
    {
        public ResourceDictionary Items { get; set; }
        public string DefaultKey { get; set; }

public StringToObjectConverter()
       {
            DefaultKey = "__default__";
        }
     
public virtual object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value != null && Items.Contains(value.ToString()))
                return Items[value.ToString()];
            else
                return Items[DefaultKey];
        }
public virtual object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return Items.FirstOrDefault(kvp => value.Equals(kvp.Value)).Key;
        }
    }



...........................................................



Следующий шаг – объявить StringToObjectConverter в XAML

<grid.resources>
 <local:stringtoobjectconverter x:key="StatusToIcon">
                <resourcedictionary>
                    <bitmapimage urisource="images/green.jpg" x:key="State1" />
                    <bitmapimage urisource="images/yellow.jpg" x:key="State2" />
                    <bitmapimage urisource="images/red.jpg" x:key="State3" />
                    <bitmapimage urisource="images/1f.jpg" x:key="__default__" />
               </resourcedictionary>
     </local:stringtoobjectconverter>
</grid.resources>

На этом шаге я долго мучился с тем, что prefix local был не определен. Его необходимо определить в XAML (в самом верху)

xmlns:local="clr-namespace:your namespace"


Теперь можно кодить таблицу в XAML.


<data:datagrid alternatingrowbackground="Lavender" autogeneratecolumns="False" isreadonly="True" margin="12,36,12,12" name="gridCalendar" rowbackground="GhostWhite" rowheight="18" verticalalignment="Stretch">
<data:datagrid.columns>
<data:datagridtextcolumn header="Работы" binding="{Binding job}"></data:datagridtextcolumn>
<data:datagridtemplatecolumn header="Сроки">
<data:datagridtemplatecolumn.celltemplate>
<datatemplate>
<image source="{Binding flag1, Converter={StaticResource StatusToIcon}}" />
</datatemplate>
</data:datagridtemplatecolumn.celltemplate>
</data:datagridtemplatecolumn>
<data:datagridtemplatecolumn header="Объемы">
<data:datagridtemplatecolumn.celltemplate>
<datatemplate>
<image source="{Binding flag2, Converter={StaticResource StatusToIcon}}" />
</datatemplate>
</data:datagridtemplatecolumn.celltemplate>
</data:datagridtemplatecolumn>
</data:datagrid.columns>
</data:datagrid>

Для того, чтобы использовать Image используется DataGridTemplateColumn.

Данные, к которым обращается DataGrid я храню в отдельном классе.

/* Класс для хранения информации о строке в таблице .. " */

public class CalEndatData

{
            public string job { get;set;}
            public string flag1 {get; set;}
            public string flag2 { get; set; }
        }

Остается только заполнить данные и связать данные с таблицей.


List calendata=new List();

calendata.Add(new CalEndatData() { job = "Выдача РД", flag1 = "State1", flag2 = "State2" });

calendata.Add(new CalEndatData() { job = "Поставка оборудования", flag1 = "State1", flag2 = "State2" });

calendata.Add(new CalEndatData() { job = "Монтаж оборудования", flag1 = "State2", flag2 = "State3" });

calendata.Add(new CalEndatData() { job = "Ограждение площадки", flag1 = "State2", flag2 = "State1" });

gridCalendar.ItemsSource = calendata;

Как это работает: flag может принимать значения, определенные в ResourceDictionary. Эти значения хранятся в классе CalEndatData. Данные (flag), попадающие в DataGrid проходят через Converter={StaticResource StatusToIcon}, в котором преобразуются в путь к Image, который отображается в ячейке.