Infragistics｜Ultimate UI for WPF｜XamDataCards 拖放

這是透過拖放 XamDataCards 卡來更改其位置的範例。

Infragistics 拖放框架已合併到代表 XamDataCards 卡的 Border 元素 (x:Name=”Bd”) 中。

<Style TargetType="{x:Type igDP:CardViewCard}">
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type igDP:CardViewCard}">
                <Border x:Name="Bd"
                    ...>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        ...
                    </Grid>
                    <--追加-->
                    <ig:DragDropManager.DragSource>
                        <ig:DragSource IsDraggable="True" Drop="DragSource_Drop" />
                    </ig:DragDropManager.DragSource>
                    <ig:DragDropManager.DropTarget>
                        <ig:DropTarget IsDropTarget="True" />
                    </ig:DragDropManager.DropTarget>
                    <--追加-->
                </Border>
                <ControlTemplate.Triggers>
                    ...
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

現在您可以拖放卡片。當卡片放下時，處理 DragSource.Drop 事件並交換卡片的位置。

private void DragSource_Drop(object sender, Infragistics.DragDrop.DropEventArgs e)
{
    // ドラッグしたカード
    var draggedCard = e.DragSource as Border;
    // ドロップされたカード
    var droppedCard = e.DropTarget as Border;
    // カードにバインドされているデータ
    var draggedEmployee = (draggedCard.DataContext as DataRecord).DataItem as Employee;
    var droppedEmployee = (droppedCard.DataContext as DataRecord).DataItem as Employee;

    var employees = this.DataContext as ObservableCollection;
    var index = employees.IndexOf(droppedEmployee);
    
    // カードデータの入れ替え
    employees.Remove(draggedEmployee);
    employees.Insert(index, draggedEmployee);
}