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

Question

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

Answer 1

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

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

Answer 2

I have to put an static image in a column and on that image click i have to perform an action.

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

<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 来显示 header 中的 Image 列和每个项目。

"click to perform an action" 是指此控件中内置的排序操作吗？如果是，你可以参考DataGridTemplatedColumn.cs的源代码，Order 属性就像DataGridTextColumn中的Binding，在我的示例中，我在数据模型 Person.

中使用了一个名为 "ImageUri" 的假字符串类型属性

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

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

Answer 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事件中我们可以执行所需的操作

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

How to display an image in UWP data grid column

datagrid

uwp

mytoolkit