将图像添加到Silverlight中的DataGrid行?

时间:2012-03-09 10:59:37

标签: c# silverlight image data-binding

我正在尝试在Silverlight中创建一个用户列表,我想在其中显示他们的图像,名称,分数等。

我使用此代码绘制数据网格,以便我看起来像一个列表:

     <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;
        }
    }

然后我创建了一个以动态方式加载所有数据的函数

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;
        }

最后使用此函数将数据添加到datagrid KitchenChart中:

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

但我不知道应该如何添加图片?假设我的所有图像都与我的解决方案文件夹一起存储在 Mysolution / MyImgs 文件夹中。 我该如何添加图片?

请帮忙

由于

2 个答案:

答案 0 :(得分:0)

使用“DataGridTempalteColumn”添加图像列。添加单元格模板并创建图像对象以在单元格中显示图像。例如:

<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>

答案 1 :(得分:0)

您需要从光盘读取图像并将其转换为Image对象。您使用ImageSourceConverter

执行此操作
ImageSourceConverter ISC = new ImageSourceConverter();

var newImage = new Image
    {
        Stretch = Stretch.None,
        HorizontalAlignment = HorizontalAlignment.Left,
        VerticalAlignment = VerticalAlignment.Top
    };

newImage.Source = (ImageSource)ISC.ConvertFromString(ImagePath);

注意:这需要将图像下载到客户端计算机,并且位于/ClientBin文件夹下。