Question

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

Answer 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列。

通过＆＃34;点击执行操作＆＃34;你的意思是在这个控件中构建的排序操作？如果是，您可以参考DataGridTemplatedColumn.cs的源代码，Order属性就像Binding中的DataGridTextColumn一样，在我的示例中，我使用了假的字符串类型属性名为＆＃34; ImageUri＆＃34;在数据模型中Person。

如果不是，您想在图像上自己执行点击事件，您只需将Tapped事件添加到Image控件并在后面的代码中处理它，例如：

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

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

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数据网格列中显示图像

3 个答案: