We Keep Coding

How to get the destination ListView item on drop?

In UWP C#, I have one ListView in upper row & another in lower row. When I drag a listitem from upper ListView & drop it on lower ListView, I am getting the source. But, I am unable to get the destination. ie) the listview item/(Folder object in my case) where I dropped.
<ListView Name="ListviewCars"
CanDragItems="True" DragItemsStarting="ListviewCars_DragItemsStarting"
SelectionMode="Single" IsItemClickEnabled="True"
DataContext="Cars" ItemsSource="{Binding CarsCollection}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Background="Transparent" Height="80" Orientation="Horizontal"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate >
<DataTemplate>
<Grid Name="GrdCars" >
<Grid Height="80" Width="90" Padding="5">
<Grid.Background>
<ImageBrush Stretch="Uniform" ImageSource="Assets/car.png"/>
</Grid.Background>
<TextBlock Text="{Binding Name}" FontWeight="Bold" TextWrapping="Wrap" TextAlignment="Center"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Name="GrdViewImg" ScrollViewer.VerticalScrollBarVisibility="Disabled"
AllowDrop="True" DragOver="Image_DragOver"
Drop="Image_OnDrop"
DataContext="Folders" ItemsSource="{Binding FolderCollection}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Background="Transparent" Height="80" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate >
<DataTemplate>
<Grid Name="GrdForFolderMenu" RightTapped="GrdForFolderMenu_RightTapped">
<Grid Height="80" Width="90" Padding="5">
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="Assets/Folderimage.png"/>
</Grid.Background>
<TextBlock Text="{Binding Name}" FontWeight="Bold" TextWrapping="Wrap" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

I have found a simple solution myself. I get the source from DragItemsStarting event of the SoureListView. and target item (as mentioned by ashchuk) from a Grid placed inside Datatemplate of Target ListView. as shown below. Everything works fine now!
(Cars is my Source custom list item. Folders is my Target custom list item)
private void SoureListView_DragItemsStarting(object sender, DragItemsStartingEventArgs e)
{
Cars x = e.Items[0] as Cars;
string DraggedSourceCar = x.Name;
e.Data.Properties.Add("myArgs", DraggedSourceCar);
}
private void GridInsideDatatemplateOfTargetListview_Drop(object sender, DragEventArgs e)
{
var x = sender as Grid;
var y = x.DataContext as Folders;
string toMoveFolderName = y.Name;
string DraggedSourceCar = e.DataView.Properties["myArgs"].ToString();
Debug.WriteLine(DraggedSourceCar + Environment.NewLine + toMoveFolderName );
}
private void TargetListview_DragOver(object sender, DragEventArgs e)
{
e.AcceptedOperation = DataPackageOperation.Copy;
}

You have to find out by yourself = DragEventArgs.GetPosition() in the destination drop, then the underlying item with smoe helper functions
public static object GetObjectAtPoint<ItemContainer>(this ItemsControl control, Point p)
where ItemContainer : DependencyObject
{
// ItemContainer - can be ListViewItem, or TreeViewItem and so on(depends on control)
ItemContainer obj = GetContainerAtPoint<ItemContainer>(control, p);
if (obj == null)
return null;
return control.ItemContainerGenerator.ItemFromContainer(obj);
}
public static ItemContainer GetContainerAtPoint<ItemContainer>(this ItemsControl control, Point p)
where ItemContainer : DependencyObject
{
HitTestResult result = VisualTreeHelper.HitTest(control, p);
if (result != null)
{
DependencyObject obj = result.VisualHit;
while (VisualTreeHelper.GetParent(obj) != null && !(obj is ItemContainer))
{
obj = VisualTreeHelper.GetParent(obj);
}
// Will return null if not found
return obj as ItemContainer;
}
else return null;
}

Did you checked this sample?
After some research I found what DragEventArgs contains an OriginalSource property with Name matches the name of target list when Drop event invoked.
I'm not checked it with folders and subfolders, but maybe OriginalSource will contain folder where item dropped.
<TextBlock Grid.Row="1" Margin="8,4"
VerticalAlignment="Bottom"
Text="All Items"/>
<ListView x:Name="SourceListView"
Grid.Row="2" Margin="8,4"
SelectionMode="Extended"
CanDragItems="True"
DragItemsStarting="SourceListView_DragItemsStarting"/>
<TextBlock Grid.Row="1" Grid.Column="1" Margin="8,4"
VerticalAlignment="Bottom"
Text="Selection"/>
<ListView x:Name="TargetListView"
Grid.Row="2" Grid.Column="1" Margin="8,4"
AllowDrop="True" CanReorderItems="True" CanDragItems="True"
DragOver="TargetListView_DragOver"
Drop="TargetListView_Drop"
DragItemsStarting="TargetListView_DragItemsStarting"
DragItemsCompleted="TargetListView_DragItemsCompleted"/>
And here is printscreen with fired breakpoint:
EDIT:
To get an item inside of TargetList you can do a trick.
I think you use DataTemplate to display custom list items ("folders"). You can see a sample below. As you see I add Grid_DragOver trigger.
<Page.Resources>
<DataTemplate x:Key="ListViewDataTemplate">
<Grid Margin="20,5" DragOver="Grid_DragOver"
BorderBrush="White" BorderThickness="5" AllowDrop="True">
<TextBlock Margin="10" LineHeight="40" FontSize="32" FontWeight="Bold"/>
</Grid>
</DataTemplate>
</Page.Resources>
This way Grid_DragOver will be invoked when mouse pointer enter inside the Grid in DataTemplate.
And if you use binding List<YourFolderClass> as data source, you'll get folder in DataContext. For example I used this:
var SampleData = new ObservableCollection<string>
{
"My Research Paper",
"Electricity Bill",
"My To-do list",
"TV sales receipt",
"Water Bill",
"Grocery List",
"Superbowl schedule",
"World Cup E-ticket"
};
You can see all code in gist.

Hide GridViewItem and reposition items in GridView

As you can see above, I need it to reshuffle itself into alignment. Obviously the items still exist, is there a way to completely ignore them?
I have an ObservableCollection:
public static volatile ObservableCollection<MyVideo> MyVideoModels = new ObservableCollection<MyVideo>();
This gets filled with the MyVideo objects.
Binding it to my GridView like so:
public VideosFoundView()
{
this.InitializeComponent();
this.AddVideoFolderGridView.ItemsSource = VideosFoundView.MyVideoModels;
}
The DataTemplate I am using for the GridView.
<GridView Grid.Row="2" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="AddVideoFolderGridView">
<GridView.ItemTemplate>
<DataTemplate>
<Border BorderThickness="5">
<Image Source="{Binding FullImageLocationOnDisk}" MaxHeight="300" MaxWidth="200" DoubleTapped="gridViewItem_DoubleTapped" Loaded="gridViewItem_Loaded" Loading="gridViewItem_Loading">
</Image>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
And I have a static ToggleSwitch above this GridView like so:
<Grid Grid.Row="1">
<Grid>
<TextBlock Text="Ingore Image Not Found"/>
<ToggleSwitch x:Name="ToggleSwitchIgnoreImages" Toggled="ignoreImages_Toggled"/>
</Grid>
</Grid>
Which does:
private void ignoreImages_Toggled(object sender, RoutedEventArgs e)
{
ToggleSwitch tSwitch = (ToggleSwitch)(sender as ToggleSwitch);
if (tSwitch.IsOn)
{
for(int i = 0; i < VideosFoundView.MyVideoModels.Count; i++)
{
if(VideosFoundView.MyVideoModels[i].FullImageLocationOnDisk == "ms-appx:///Assets/image-not-found.gif")
{
var gridViewItem = (GridViewItem)this.AddVideoFolderGridView.ContainerFromIndex(i);
gridViewItem.Visibility = Visibility.Collapsed;
}
}
}
else
{
for (int i = 0; i < VideosFoundView.MyVideoModels.Count; i++)
{
//VideosFoundView.MyVideoModels[i].Visibility = "Auto";
var gridViewItem = (GridViewItem)this.AddVideoFolderGridView.ContainerFromIndex(i);
gridViewItem.Visibility = Visibility.Visible;
}
}
}
However the problem is that the items are still taking up space on my GridView, and the other items do not re-position themselves accordingly.

The items are still taking up space on the GridView, when the GridViewItem is collapsed. It might because the ItemTemplate has not be refreshed, the space is still reserved.
As a workaround, there is a port of the Toolkit's WrapPanel for UWP in the project WinRTXamlToolkit.
You can get it from NuGet.
Then in your Page add this prefix:
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
Now you can use <toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel> as it was before.
For example:
<GridView x:Name="AddVideoFolderGridView">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" >
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Border BorderThickness="5">
<Image Source="{Binding FullImageLocationOnDisk}" MaxHeight="300" MaxWidth="200" DoubleTapped="gridViewItem_DoubleTapped" Loaded="gridViewItem_Loaded" Loading="gridViewItem_Loading">
</Image>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>

Solution from here: Not showing items with Visibility=Collapsed in Windows 8.1 GridView
tldr:
Edit the template of your GridView and replace the ItemsWrapGrid in the ItemsPanelTemplate with the WrapPanel you can find here http://codepaste.net/8gr5go

windows phone listbox stretch Item template items with ItemPanel Orientation Horizontally aligned

I am creating a ListBox in Windows Phone application such that items are aligned horizontally. I want that if there are 5 items then they should occupy the space equally if there are 2 items in collection there should be aligned accordingly occupying Totalwidth/2 space. How can i achieve this below is code that i have written:
<ListBox x:Name="CarSelector" ItemsSource="{Binding listData}"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
Background="White"
ItemContainerStyle="{StaticResource SelectorContainerStyle}"
Style="{StaticResource lstbxSelectorStyle}"
>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<i:Interaction.Behaviors>
<control:GridItemPanelBehavior />
</i:Interaction.Behaviors>
</Grid>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch"
>
<Image Height="56"
Width="56"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Source="{Binding id}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Behavior:
protected override void OnAttached()
{
base.OnAttached();
AssociatedObject.LayoutUpdated += AssociatedObject_LayoutUpdated;
}
void AssociatedObject_LayoutUpdated(object sender, EventArgs e)
{
Grid gridItemPanel = AssociatedObject as Grid;
var childCount = gridItemPanel.Children.Count;
// add the required number of column definitions
for (int row = 0; row < childCount; row++)
{
gridItemPanel.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
}
// set the column property for each chid
for (int i = 0; i < childCount; i++)
{
var child = gridItemPanel.Children[i] as FrameworkElement;
Grid.SetColumn(child, i);
}
}

How to change background color and color of textbloxk content of selected item of a listbox in WP8?

am working on Windows phone 8 app. I am using a listbox to display a list dynamically and on selection change for an item in listbox i want selected item backgroung color to be blue and textblock text color to be white(only for the selected item)
This is my xaml code for listbox
<Canvas x:Name="Canvas_Main" Margin="23,191,27,75" Tap="Canvas_Main_Tap">
<ListBox x:Name="Listbox_Main" Height="534" Width="430" ItemsSource="{Binding}" SelectionChanged="Listbox_Main_SelectionChanged" Tap="Listbox_Main_Tap" Canvas.Left="10" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="5"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Canvas x:Name="cnv_Items" Height="100" Width="200">
<Border Height="100" Width="200" BorderThickness="2" BorderBrush="#FFD0D0D0"/>
<TextBlock x:Name="Tb_Value" Text="{Binding Value}" TextWrapping="NoWrap" Foreground="Black" TextAlignment="Right" FontSize="26" Height="40" Width="195" Canvas.Top="10" Canvas.Left="2"/>
<TextBlock x:Name="Tb_UnitName" Text="{Binding Key}" Foreground="Black" TextAlignment="Right" FontSize="19" Height="40" Width="180" Canvas.Top="55" Canvas.Left="10"/>
</Canvas>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Canvas>
Its my Code Behind :-
private void Listbox_Main_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (Canvas_KeyBoard.Visibility == Visibility.Visible)
OutAnimation();
if (Listbox_Main.SelectedItem != null)
{
myitem = (KeyValuePair<string, string>)Listbox_Main.SelectedItem;
ListBoxItem myitem1 = Listbox_Main.SelectedItem as ListBoxItem;
SolidColorBrush brush = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));
myitem1.Background = brush;
Conversion_Logic();
}
}
Please tell me what to do, i am working on this issue for 2 days but unable to get the solution. Hope u guyz help me

Since you have a selectionchanged event For your ListBox, you could try this. Best solution would be using styles and triggers
private void Listbox_Main_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListBoxItem myitem = Listbox_Main.SelectedItem as ListBoxItem;
SolidColorBrush brush = new SolidColorBrush(Color.FromArgb(255,255,0,0));
myitem.Background = brush;
}

wrappanel listbox item select event

I have used wrappanel and listbox to display my items on wp7. but item click event does not working. my code is as follow
<Grid x:Name="ContentPanel" Grid.Row="1" Height="Auto">
<ListBox x:Name="lstDevice">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel>
<Button x:Name="btnData" >
<StackPanel Orientation="Vertical">
<Canvas
Width="175"
Height="175"/>
<TextBlock Text="{Binding Name}" Width="175" />
</StackPanel>
</Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
above is design code and c# code is below
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
lstDevice.ItemsSource = MainPage.user.dArray.ToList();
lstDevice.SelectionChanged += item_Select;
}
private void item_Select(object sender, SelectionChangedEventArgs e)
{
int p = ((ListBox)sender).SelectedIndex;
}
how to generate listbox item select event and get the number or some property to recognize which item is selected? Thanks in advance!

I think this may suits you better:
<Grid x:Name="ContentPanel" Grid.Row="1" Height="Auto">
<ListBox x:Name="lstDevice">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate >
<Button x:Name="btnData" Click="OnButtonClick" Tag="{Binding Name}" >
<StackPanel Orientation="Vertical">
<Canvas
Width="175"
Height="175"/>
<TextBlock Text="{Binding Name}" Width="175" />
</StackPanel>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
lstDevice.ItemsSource = MainPage.user.dArray.ToList();
}
private void OnButtonClick(object sender, RoutedEventArgs e)
{
Button b = (Button)sender;
var nameInTag=b.Tag.ToString();
}

Make change in your xaml and cs code like this:
<Grid x:Name="ContentPanel" Grid.Row="1" Height="Auto">
<ListBox x:Name="lstDevice" SelectionChange="item_Select">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel>
<Button x:Name="btnData" >
<StackPanel Orientation="Vertical">
<Canvas
Width="175"
Height="175"/>
<TextBlock Text="{Binding Name}" Width="175" />
</StackPanel>
</Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
lstDevice.ItemsSource = MainPage.user.dArray.ToList();
}
private void item_Select(object sender, SelectionChangedEventArgs e)
{
var selctedItem = lstDevice.SelectedItem as (Your list box's itmsource)
}