0

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

4

3 回答 3

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属性和Binding中的一样DataGridTextColumn，这里在我的示例中，我在数据模型中使用了一个名为“ImageUri”的假字符串类型属性Person。

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

<controls:DataGridTemplatedColumn.Header>
    <Image Source="Assets/star.jpg" Tapped="Image_Tapped" />
</controls:DataGridTemplatedColumn.Header>
于 2016-05-20T09:26:20.560 回答
0

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

<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>
于 2016-05-19T17:20:41.197 回答
0

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

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

于 2016-05-20T13:14:36.670 回答