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。

いいえ、画像で自分でクリックイベントを実行したい場合はTapped、コントロールにイベントを追加Imageして、コードビハインドで処理できます。例:

<controls:DataGridTemplatedColumn.Header>
    <Image Source="Assets/star.jpg" Tapped="Image_Tapped" />
</controls:DataGridTemplatedColumn.Header>
于 2016-05-20T09:26:20.560 に答える
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 に答える