如何在 UWP 数据网格列中显示图像答案

【问题标题】：How to display an image in UWP data grid column如何在 UWP 数据网格列中显示图像
【发布时间】：2016-09-16 10:27:18
【问题描述】：

我正在使用通用 Windows 应用程序并使用我在这里找到的数据网格Mytoolkit Datgrid 但是我必须将静态图像放在一个列中，然后在该图像上单击我必须执行一个操作。我该怎么做？

【问题讨论】：

【解决方案1】：

我必须将静态图像放在一列中，然后在该图像上单击我必须执行操作。

首先，要将图像放在列中，例如，您可以这样做：

<controls:DataGrid ItemsSource="{x:Bind People}" x:Name="DataGrid" SelectionChanged="OnSelectedItemsChanged">
    <controls:DataGrid.Columns>
        <controls:DataGridTextColumn Width="200" Header="Firstname"
          Binding="{Binding Firstname}"
          d:DataContext="{d:DesignInstance Type=Person}" />
        <controls:DataGridTextColumn Width="200" Binding="{Binding Lastname}"
          IsAscendingDefault="False"
          d:DataContext="{d:DesignInstance Type=Person}">
            <controls:DataGridTextColumn.Header>
                <TextBlock Text="Lastname" Foreground="Green" />
            </controls:DataGridTextColumn.Header>
        </controls:DataGridTextColumn>
        <controls:DataGridTextColumn Width="200" Header="Category"
          Binding="{Binding Category}"
          d:DataContext="{d:DesignInstance Type=Person}" />
        <controls:DataGridTemplatedColumn Width="200" Order="{Binding ImageUri}" d:DataContext="{d:DesignInstance Type=Person}">
            <controls:DataGridTemplatedColumn.Header>
                <Image Source="Assets/star.jpg" />
            </controls:DataGridTemplatedColumn.Header>
            <controls:DataGridTemplatedColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="Assets/star.jpg" />
                </DataTemplate>
            </controls:DataGridTemplatedColumn.CellTemplate>
        </controls:DataGridTemplatedColumn>
    </controls:DataGrid.Columns>
    <controls:DataGrid.ItemDetailsTemplate>
        <DataTemplate>
            <StackPanel Margin="10,10,10,5"
                d:DataContext="{d:DesignInstance Type=Person}">
                <TextBlock Text="Details: " FontWeight="Bold" />
                <TextBlock Text="{Binding Firstname}" />
                <TextBlock Text="{Binding Lastname}" />
                <Image Source="Assets/star.jpg" />
            </StackPanel>
        </DataTemplate>
    </controls:DataGrid.ItemDetailsTemplate>
</controls:DataGrid>

如您所见，我使用DataGridTemplatedColumn 在标题和每个项目中显示Image 列。

“点击执行操作”是指内置在此控件中的排序操作？如果是，你可以参考DataGridTemplatedColumn.cs的源码，Order属性就像DataGridTextColumn中的Binding一样，在我的示例中，我使用了一个名为“ImageUri”的假字符串类型属性数据模型Person。

如果没有，你想自己在Image上执行点击事件，你可以在Image控件中添加一个Tapped事件，并在后面的代码中处理例如：

<controls:DataGridTemplatedColumn.Header>
    <Image Source="Assets/star.jpg" Tapped="Image_Tapped" />
</controls:DataGridTemplatedColumn.Header>

【讨论】：

【解决方案2】：

只需编辑数据模板并将图像插入到您想要查看的位置：

<DataTemplate>
        <StackPanel Margin="10,10,10,5" 
                    d:DataContext="{d:DesignInstance Type=models:Person}">
            <Image Source="lalala.jpg" Click="Image_Clicked" />
            <TextBlock Text="{Binding Firstname}" />
            <TextBlock Text="{Binding Lastname}" />
        </StackPanel>
    </DataTemplate>

【讨论】：

不在详细信息面板中。在网格本身。我是通过使用 Celltemplate 得到的。

【解决方案3】：

在页面资源中添加此代码。

<DataTemplate x:Key="ImageTemplate">
            <StackPanel Width="20" Height="30" Tapped="StackPanel_Tapped" >
                <Image Name="VoidImage" Source="/Images/delete.png"></Image>
            </StackPanel>
        </DataTemplate>

和这样的网格列..

<controls:DataGridTemplatedColumn  CellTemplate="{StaticResource ImageTemplate}">
                                    <controls:DataGridTemplatedColumn.Header>
                                        <TextBlock Text="Cart Total" Foreground="Green" />
                                    </controls:DataGridTemplatedColumn.Header>
                                </controls:DataGridTemplatedColumn>

在 StackPanel_Tapped 事件中我们可以执行所需的操作

【讨论】：

Image控件中已经有Tapped事件，你可以查看我的答案。