Question

i am trying to create a list of users in Silverlight in which i want to show their Image, Name, Score etc.

I used this code to draw a datagrid so that i looks like a list :

     <sdk:DataGrid Grid.Row="1" x:Name="KitchenChart" HorizontalAlignment="Center" AutoGenerateColumns="False" ItemsSource="{Binding KitchenScore}" Background="Black"
             AlternatingRowBackground="Black" GridLinesVisibility="Horizontal">
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTemplateColumn Header="Image" IsReadOnly="True">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Background="Black">
                                    <Image Source="{Binding Image}" />                                
                                </StackPanel>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                    <sdk:DataGridTemplateColumn Header="Name">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Background="Black">
                                    <TextBlock  Padding="5,0,5,0" Text="{Binding Name}" Foreground="White"/>
                                </StackPanel>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                    <sdk:DataGridTemplateColumn Header="Score">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Background="Black">
                                    <TextBlock Padding="5,0,5,0" Text="{Binding Score}" Foreground="White" HorizontalAlignment="Stretch"/>
                                </StackPanel>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                </sdk:DataGrid.Columns>
            </sdk:DataGrid>

And the i used class to load dynamic data in datagrid using this as :
public class KitchenScoreClass
    {
        public Image Image { get; set; }
        public string Name { get; set; }
        public int Score { get; set; }
        public KitchenScoreClass(Image Image, string Name, int Score)
        {
            this.Image = Image;
            this.Name = Name;
            this.Score = Score;
        }
    }

and then i created a function which loads all the data dynimically

private List<KitchenScoreClass> KitchenScore()
        {
            List<KitchenScoreClass> avgg = new List<KitchenScoreClass>();

            avgg.Add(new KitchenScoreClass( ??? ,"kundan",10));
            avgg.Add(new KitchenScoreClass( ??? , "me", 15));
            avgg.Add(new KitchenScoreClass( ??? , "varun", 10));

            return avgg;
        }

and at last used this function to add data to datagrid KitchenChart as:

 public ScoreCharts()
        {
            InitializeComponent();
            KitchenChart.ItemsSource = KitchenScore();
        }

But i don’t know how should i add images ? Suppose all my images are stored in a folder Mysolution/MyImgs along with my solution folders.
How can i add Images ?

Please help

Thanks

Answer 1

Add the image column using “DataGridTempalteColumn.” Add a cell template and create an image object to display the image in the cell. For example:

<data:DataGridTemplateColumn>

<data:DataGridTemplateColumn.CellTemplate>

<DataTemplate>

<Image x:Name="picture" ImageFailed="picture_ImageFailed" Width="200" Height="130" Visibility="Visible"/>

</DataTemplate>

</data:DataGridTemplateColumn.CellTemplate>

</data:DataGridTemplateColumn>