Yogeshwaran
Yogeshwaran

Reputation: 170

How to set Listview Itemtemplate when drag drop in wpf

I have create simple drag drop in WPF. In my application there are two Listviews. I have to drag list items from first listview and drop the item to second listview. I have created custom data template for first listview. When i drag the first listview item into second listview the data template is not customized so items are not displayed. How to display the list items with generic. Please help. My Code is as below,

 <Grid Margin="0,20,0,0">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <ListBox
            Name="memberCollection"
            Grid.Column="1"
            Width="150"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            PreviewMouseLeftButtonDown="memberCollection_PreviewMouseLeftButtonDown">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBox Text="{Binding Name}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Grid
            Name="gridDrop"
            Grid.Column="0"
            Margin="20,0,0,0"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            ListBox.Drop="grid_Drop"
            ShowGridLines="True">

            <ListBox
                Grid.Row="0"
                Grid.Column="0"
                Margin="10,10,0,0"
                AllowDrop="True" />           
        </Grid>
    </Grid>

Code Behind

ObservableCollection<Member> member = new ObservableCollection<Member>();

        public MainWindow()
        {
            InitializeComponent();

            member.Add(new Member { Name = "Karthick", ID = "20011", Address = "10, MainRoad, Chennai" });            

            memberCollection.ItemsSource = member;
            DataContext = new Member();
        }

        private void memberCollection_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            object selectedMember = memberCollection.SelectedItem as Member;
            if (selectedMember != null)
                DragDrop.DoDragDrop(memberCollection, selectedMember, DragDropEffects.All);
        }

        private void grid_Drop(object sender, RoutedEventArgs e)
        {
            ListBox listContent = e.Source as ListBox;
            if (listContent != null)
                Console.WriteLine("", Grid.GetColumn(listContent), Grid.GetRow(listContent));

            DataObject item = (((DragEventArgs)e).Data) as DataObject;
            object Target = ((Grid)(sender)).DataContext;
            object listItem = item.GetData(Target.GetType());

            if (listItem != null)
            {
                //listContent.Items.Add(listItem.Name.ToString());
                //listContent.Items.Add(listItem.ID.ToString());
                //listContent.Items.Add(listItem.Address.ToString()); 

                //listContent.ItemTemplate = memberCollection.ItemTemplate;                              

                listContent.Items.Add(listItem);

            }
        }

Current Output

I want to display like this

Upvotes: 1

Views: 1133

Answers (1)

mm8
mm8

Reputation: 169420

If you define the DataTemplate as a reusable resource, you can use it in both ListBoxes:

<Grid Margin="0,20,0,0">
    <Grid.Resources>
        <DataTemplate x:Key="dataTemplate">
            <StackPanel>
                <TextBox Text="{Binding Name}" />
            </StackPanel>
        </DataTemplate>
    </Grid.Resources>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <ListBox
            Name="memberCollection"
            Grid.Column="1"
            Width="150"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            PreviewMouseLeftButtonDown="memberCollection_PreviewMouseLeftButtonDown"
            ItemTemplate="{StaticResource dataTemplate}" />

    <Grid
            Name="gridDrop"
            Grid.Column="0"
            Margin="20,0,0,0"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            ListBox.Drop="grid_Drop"
            ShowGridLines="True">

        <ListBox
                Grid.Row="0"
                Grid.Column="0"
                Margin="10,10,0,0"
                AllowDrop="True"
                ItemTemplate="{StaticResource dataTemplate}"/>
    </Grid>
</Grid>

If you want to display some other properties of the dropped Member in the second ListBox, you should define another ItemTemplate:

<ListBox
    Grid.Row="0"
    Grid.Column="0"
    Margin="10,10,0,0"
    AllowDrop="True">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
                <TextBlock Text="{Binding Id}" />
                <TextBlock Tag="{Binding Address}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Upvotes: 1

Related Questions