Как отобразить изображение в столбце сетки данных UWP

Question

Я работаю с универсальным приложением Windows и использую datagrid, который я нашел здесь 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 столбец в заголовке и каждый пункт.

И при нажатии «щелкнуть, чтобы выполнить действие» вы подразумеваете действие сортировки, которое встроено в этот элемент управления? Если да, вы можете обратиться к исходному коду DataGridTemplatedColumn.cs, свойство Order - это как Binding в DataGridTextColumn, здесь, в моем примере, я использовал свойство фальшивой строки типа «ImageUri» в модели данных 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 события мы можем выполнить требуемое действие