Question

Hi Trying to migrate my application to WPF, and I’m trying to hold as much to MVVM as possible. The following screen from my WinForm app was fairly easy to create, I’m not having such good luck wiht Xaml and WPF.

I like how this works, but my goal here is to either recreate this with WPF, or do this field mapping some way that I haven’t thought of yet, that still meets the basic requirement of mapping the input fields to my existing data structure.

Currently this is what I have in Xaml.

<UserControl x:Class="ImportJobDataView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:kne="clr-namespace:FatigueMVVM"
         xmlns:local="clr-namespace:FatigueMVVM.DragDropListBox"                   
         mc:Ignorable="d" d:DesignHeight="350" d:DesignWidth="447">

<Grid Height="350" Width="448">

    <Grid.RowDefinitions >
        <RowDefinition Height="300" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>

    <ListView ItemsSource="{Binding ImportedJobDataColumns}"  Margin="37,68,295,64" local:DragDropHelper.IsDragSource="true">
        <ListView.View >
            <GridView AllowsColumnReorder="True"   >
                <GridViewColumn Width="100" Header="Imported"/>
            </GridView>
        </ListView.View>
    </ListView>
    <ListView ItemsSource="{Binding KneJobDataColumns}"  Margin="193,68,41,64" AllowDrop="True" local:DragDropHelper.IsDropTarget="true">
        <ListView.View >
            <GridView AllowsColumnReorder="True"   >
                <GridViewColumn Width="100" Header="Import From" DisplayMemberBinding="{Binding ImportField }"   />
                <GridViewColumn Width="100" Header="Map To" DisplayMemberBinding="{Binding  KneField }" />
            </GridView>
        </ListView.View>
    </ListView>

    <Button Content="Open Csv" Height="23" HorizontalAlignment="Left" Margin="37,15,0,0" Name="Button1" VerticalAlignment="Top" Width="75" Command="{Binding OpenCsvCommand}" Grid.Row="1" />
    <Button Content="Clean Data" Height="23" HorizontalAlignment="Left" Margin="118,15,0,0" Name="Button2" VerticalAlignment="Top" Width="auto" Grid.Row="1" />
    <Button Content="View Imported Data" Height="23" HorizontalAlignment="Left" Margin="193,15,0,0" Name="Button3" VerticalAlignment="Top" Width="auto" Grid.Row="1" />
</Grid>

This is looking close to how I’d like it to look, but I can’t get drag and drop working. As you may have noticed, I’m using Bea Stollnitz solution to try and implement drag and drop. http://bea.stollnitz.com/blog/?p=53 Her solution is only made to work with ItemsControls, and as such, I’m afraid it is not working inside the GridView that I’m using to create the two columns. I have tried it with just Listboxes and the drag and drop functionality does work but I really need two columns to make this work.

Does anyone have either a suggestion on how to implement drag and drop in this scenario, or an alternative to the way that I’m currently trying to implement this.

Thanks much!

Answer 1

I ended up using a DataGrid instead of a ListView, mainly because it had more the look that I wanted. Because time was a little pressing, as I’d already wasted quite I bit on this problem, I decided to just implement the drag and drop functionality in the code-behind. My opinion on this was altered by reading this… http://forums.silverlight.net/t/225274.aspx/1

While the situation I’m working with is slightly different, for now its in the code-behind, some day perhaps I’ll move it into the View-Model just to learn something new… If someone disagrees, and would like to present a simple solution for moving this into the VM, be my guest:) Below is the UI image, showing what I’m trying to accomplish, and following that is the xaml and then the code-behind. I started with http://www.wpftutorial.net/DragAndDrop.html and worked from that basis. This functionality is very specific to exactly this one user control, so while I’m interested in the general concept of passing mouse events through the MVVM pattern, I’m not sure how useful it’d be to apply it to this one case.

Thoughts?

<Border BorderBrush="Silver" BorderThickness="1" Grid.RowSpan="2" HorizontalAlignment="Left" Margin="5" Name="Border1" VerticalAlignment="Top" Width="Auto" Height="Auto" >

    <StackPanel >

        <Expander Header="Instructions"  IsExpanded ="False"  ExpandDirection="Down" Width="Auto" Height="Auto" >
            <TextBlock Text="{Binding  Instructions}" TextWrapping="Wrap" Margin="5" />
        </Expander>

        <Grid Height="420" Width="485">

            <Grid.RowDefinitions >
                <RowDefinition Height="5*"  />
                <RowDefinition Height="5*"  />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4*" />
                <ColumnDefinition Width="6*" />
            </Grid.ColumnDefinitions>

            <DataGrid AutoGenerateColumns="False" HorizontalAlignment="Stretch" 
              Margin="5" Name="DataGrid1" VerticalAlignment="Stretch"  Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"
              ItemsSource="{Binding ImportedJobDataColumns}" SelectionUnit="Cell"  CanUserReorderColumns="False"
              PreviewMouseLeftButtonDown="DataGrid_MouseLeftButtonDown" MouseMove="DataGrid_MouseMove">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Imported" Binding="{Binding Path=.}" Width="*"  IsReadOnly="True" />
                </DataGrid.Columns>
            </DataGrid>

            <DataGrid AutoGenerateColumns="False" HorizontalAlignment="Stretch" 
              Margin="5" Name="DataGrid2" VerticalAlignment="Stretch"  Grid.Column="1" Grid.Row="0"
              ItemsSource="{Binding KneJobDataColumns}" SelectionUnit="Cell" CanUserReorderColumns="False" AllowDrop="True" 
              PreviewDragOver="DataGrid_PreviewDragOver" Drop="DataGrid_Drop">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="From"  Binding="{Binding Path=ImportField}" Width="*" 
                                CanUserReorder="False" CanUserSort="False" IsReadOnly="True"/>
                    <DataGridTextColumn Header="To" Binding="{Binding KneField}" Width="*" 
                                CanUserSort="False"  CanUserReorder="False" IsReadOnly="True" />
                </DataGrid.Columns>
            </DataGrid>

            <Grid Margin="5"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  Grid.Column="1" Grid.Row="1">

                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="2*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Button Content="Auto Map" Grid.Column="0" Name="Button4" Height="Auto" HorizontalAlignment="Stretch" Command="{Binding AutoMap}" />
                <Button Content="Clear Map"   Grid.Column="1" Name="Button5" Height="Auto" HorizontalAlignment="Stretch" Command="{Binding ClearMappings}"/>

                <DockPanel Grid.Row="1" Grid.Column="0" >
                    <Label Content="Max Press." HorizontalAlignment="Left" Name="Label1" VerticalAlignment="Top" Width="Auto" />
                    <xctk:IntegerUpDown  Value="{Binding MaxPressureInc}" Minimum="1" Increment="10"/>
                </DockPanel>

                <DockPanel Grid.Row="1" Grid.Column="1" >
                    <Label Content="Min Depth" Grid.Row="1" Grid.Column="1" Height="28" HorizontalAlignment="Left"  Name="Label2" VerticalAlignment="Top" Width="69" />
                    <xctk:IntegerUpDown  Grid.Row="1" Grid.Column="1" Value="{Binding MinDepthInc}" Minimum="1" Increment="1"/>
                </DockPanel>

                <Button Content="Open Csv" Grid.Row="2" Grid.Column="0" Height="Auto"  Name="Button1"   Command="{Binding OpenCsv}" />
                <Button Content="Clean Data" Grid.Row="2" Grid.Column="1" Height="Auto"  Name="Button2" Command="{Binding CleanData}"  />
                <Button Content="View Imported Data" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"   Name="Button3"  />
                <ProgressBar  HorizontalAlignment="Stretch" Name="ProgressBar1" VerticalAlignment="Stretch" Grid.Row="4" IsIndeterminate="{Binding IsBusy}"
                 Foreground="Blue" Background="LightGray" Visibility="{Binding IsBusy, Converter={local:BooleanToVisibilityConverter}}" Grid.ColumnSpan="2" />
                <Label Content="Current File:" Grid.Column="0" Grid.Row="5" HorizontalAlignment="Left" VerticalAlignment="Center" />
                <TextBlock TextWrapping="Wrap" Text="{Binding CsvFileNameCurrent}" HorizontalAlignment="Right" Name="TextBlock1" 
                           VerticalAlignment="Center" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" Width="Auto" />
            </Grid>


        </Grid>

    </StackPanel>

</Border>

Public Class ImportJobDataView

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Add any initialization after the InitializeComponent() call.
    Me.DataContext = New ImportJobDataViewModel

End Sub

Private startPoint As Point

Private Sub DataGrid_MouseLeftButtonDown(sender As System.Object, e As System.Windows.Input.MouseButtonEventArgs)
    startPoint = e.GetPosition(Nothing)
End Sub

Private Sub DataGrid_MouseMove(sender As System.Object, e As System.Windows.Input.MouseEventArgs)

    'Current Mouse Position
    Dim MousePos = e.GetPosition(Nothing)
    Dim MouseVector As Vector = startPoint - MousePos

    'Only do the following if the left moust button is held, and the cursor has moved more than the minimum horizontal distance
    If (e.LeftButton = MouseButtonState.Pressed) And (MouseVector.Length > SystemParameters.MinimumHorizontalDragDistance) Then

        If TypeOf e.OriginalSource Is TextBlock Then

            'Get the TextBlock inside the Cell
            Dim TxtBlock As TextBlock = FindAncestor(Of TextBlock)(DirectCast(e.OriginalSource, FrameworkElement))

            'Initialize the drag & drop
            Dim DragData As New DataObject("String", TxtBlock.Text)
            DragDrop.DoDragDrop(TxtBlock, DragData, DragDropEffects.Copy)
        End If

    End If

End Sub

Private Sub DataGrid_PreviewDragOver(sender As System.Object, e As System.Windows.DragEventArgs)

    If TypeOf e.OriginalSource Is TextBlock Then

        Dim Cell As DataGridCell = FindAncestor(Of DataGridCell)(DirectCast(e.OriginalSource, DependencyObject))

        'We aren't in a cell, don't allow a drop 
        If Cell Is Nothing Then
            e.Effects = DragDropEffects.None
            Exit Sub
        End If

        'Make sure we don't have a drop in the second column
        If (Cell.Column.DisplayIndex > 0) Then
            e.Effects = DragDropEffects.None
        Else
            e.Effects = DragDropEffects.Copy
        End If

    Else
        e.Effects = DragDropEffects.None
    End If

End Sub


Private Sub DataGrid_Drop(sender As System.Object, e As System.Windows.DragEventArgs)

    If e.Data.GetDataPresent("String") Then

        Dim SourceString As String = CStr(e.Data.GetData("String"))

        If TypeOf e.OriginalSource Is TextBlock Then
            'Write to cell contents only, so that we don't end up writing to the textblock inside the cells header row.
            Dim Cell As DataGridCell = FindAncestor(Of DataGridCell)(DirectCast(e.OriginalSource, DependencyObject))
            If Cell Is Nothing Then Exit Sub
            Cell.Content = SourceString
        End If

    End If

End Sub


Private Function FindAncestor(Of T As DependencyObject)(current As DependencyObject) As T
    Do
        If TypeOf current Is T Then
            Return DirectCast(current, T)
        End If
        current = VisualTreeHelper.GetParent(current)
    Loop While current IsNot Nothing
    Return Nothing
End Function

End Class