I need something that arranges/sorts items like a wrappanel but allows you to rearrange the items via drag & drop. I'm trying to prototype this out as quick as possible, so I'm just looking for something stupidly simple or hacky for now. I've been looking all over the place, but the only answers I could find required a relatively large amount of work to implement.
I would prefer not using an existing library if it's possible.
EDIT
To clarify: I need drag & drop as well as auto-rearrange mechanics within a control that arranges items like a wrappanel.
Since posting this question, I've found two posts/articles that seemed to be a good fit but only if combined.
Wrappanel: http://www.codeproject.com/Articles/18561/Custom-ListBox-Layout-in-WPF
Drag-drop & arrangement: WPF C#: Rearrange items in listbox via drag and drop
I'll post my code in an answer when I get it all working.
It took some time, but I was able to figure it out after Micky's suggestion. I'm posting an answer here for future reference and if anyone else is looking for this mechanic. The following code snippets should work by just pasting them into their appropriate files.
Here's what worked:
Make the ListBox arrange items like a WrapPanel via a custom/default style (mine is called Default.xaml).
<Style TargetType="{x:Type ListBox}">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<!--'WrapPanel' can be replaced with other controls if you want it to display differently-->
<WrapPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<!--Controls in each item-->
<local:DocPage />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Set up the ListBox control (i.e. MainWindow.xaml):
<ListBox x:Name="lbx_Pages" AllowDrop="True" DragEnter="lbx_Pages_DragEnter" PreviewMouseLeftButtonDown="lbx_Pages_PreviewMouseLeftButtonDown" PreviewMouseMove="lbx_Pages_PreviewMouseMove" Drop="lbx_Pages_PagesDrop"/>
Impliment the controls in the .cs file (i.e. MainWindow.xaml.cs):
private Point dragStartPoint;
// Bindable list of pages (binding logic omitted-out of scope of this post)
private static ObservableCollection<DocPage> pages = new ObservableCollection<DocPage>();
// Find parent of 'child' of type 'T'
public static T FindParent<T>(DependencyObject child) where T : DependencyObject
{
do
{
if (child is T)
return (T)child;
child = VisualTreeHelper.GetParent(child);
} while (child != null);
return null;
}
private void lbx_Pages_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
dragStartPoint = e.GetPosition(null);
}
private void lbx_Pages_PreviewMouseMove(object sender, MouseEventArgs e)
{
ListBoxItem item = null;
DataObject dragData;
ListBox listBox;
DocPage page;
// Is LMB down and did the mouse move far enough to register a drag?
if (e.LeftButton == MouseButtonState.Pressed &&
(Math.Abs(dragStartPoint.X - e.GetPosition(null).X) > SystemParameters.MinimumHorizontalDragDistance ||
Math.Abs(dragStartPoint.Y - e.GetPosition(null).Y) > SystemParameters.MinimumVerticalDragDistance))
{
// Get the ListBoxItem object from the object being dragged
item = FindParent<ListBoxItem>((DependencyObject)e.OriginalSource);
if (null != item)
{
listBox = sender as ListBox;
page = (DocPage)listBox.ItemContainerGenerator.ItemFromContainer(item);
dragData = new DataObject("pages", page);
DragDrop.DoDragDrop(item, dragData, DragDropEffects.Move);
}
}
}
private void lbx_Pages_PagesDrop(object sender, DragEventArgs e)
{
if (!e.Data.GetDataPresent("pages"))
return;
DocPage draggedItem = e.Data.GetData("pages") as DocPage;
// Hit-test needed for rearranging items in the same ListBox
HitTestResult hit = VisualTreeHelper.HitTest((ListBox)sender, e.GetPosition((ListBox)sender));
DocPage target = (DocPage)FindParent<ListBoxItem>(hit.VisualHit).DataContext;
int removeIdx = lbx_Pages.Items.IndexOf(draggedItem);
int targetIdx = lbx_Pages.Items.IndexOf(target);
if(removeIdx < targetIdx)
{
pages.Insert(targetIdx + 1, draggedItem);
pages.RemoveAt(removeIdx);
}
else
{
removeIdx++;
if(pages.Count+1 > removeIdx)
{
pages.Insert(targetIdx, draggedItem);
pages.RemoveAt(removeIdx);
}
}
}
private void lbx_Pages_DragEnter(object sender, DragEventArgs e)
{
if (!e.Data.GetDataPresent("pages") || sender == e.Source)
e.Effects = DragDropEffects.None;
}
Related
I want to increase the size of a TextBox Control whenever the user drag a node from Treeview control and hovers the mouse over the TextBox.
The size increase should not readjust the other controls, rather the current control should overlap the neighboring controls.
I tried to implement the code WPF: On Mouse hover on a particular control, increase its size and overlap on the other controls
but it doesn't work when hover on TextBox and left mouse button is pressed for dragged text.
<ItemsControl Margin="50">
<ItemsControl.Resources>
<Style x:Key="ScaleStyle" TargetType="TextBox">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Grid.ZIndex" Value="1"/>
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1.1" ScaleY="1.1"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ItemsControl.Resources>
</ItemsControl>
Here is a small sample application. Contrary to my comment, we need the PreviewDragEnter event since the text box already has Drag/Drop support. In Window_Loaded, the application registers the event handlers. Then, in TextBox_PreviewDragEnter, the new style is set manually. We also store the old z-index to allow restoring it in TextBox_PreviewDragLeave.
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="350" Width="525" Loaded="Window_Loaded">
<StackPanel Margin="8">
<TextBox/>
<TextBox/>
<TextBox/>
<TextBox/>
</StackPanel>
</Window>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
//From https://stackoverflow.com/a/978352/1210053
public static IEnumerable<T> FindVisualChildren<T>(DependencyObject depObj) where T : DependencyObject
{
if (depObj != null)
{
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
{
DependencyObject child = VisualTreeHelper.GetChild(depObj, i);
if (child != null && child is T)
{
yield return (T)child;
}
foreach (T childOfChild in FindVisualChildren<T>(child))
{
yield return childOfChild;
}
}
}
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
foreach (var txt in FindVisualChildren<TextBox>(this))
{
txt.PreviewDragEnter += TextBox_PreviewDragEnter;
txt.PreviewDragLeave += TextBox_PreviewDragLeave;
txt.PreviewDrop += TextBox_PreviewDragLeave;
}
}
private Dictionary<TextBox, int> oldZIndex = new Dictionary<TextBox, int>();
private void TextBox_PreviewDragEnter(object sender, DragEventArgs e)
{
var txt = (TextBox)sender;
oldZIndex.Add(txt, Panel.GetZIndex(txt));
Panel.SetZIndex(txt, 1);
var scaleTransform = new ScaleTransform(1.1, 1.1, txt.ActualWidth / 2, txt.ActualHeight / 2);
txt.RenderTransform = scaleTransform;
}
private void TextBox_PreviewDragLeave(object sender, DragEventArgs e)
{
var txt = (TextBox)sender;
txt.RenderTransform = null;
Panel.SetZIndex(txt, oldZIndex[txt]);
oldZIndex.Remove(txt);
}
}
Approach from a different angle. Use the code behind to handle left click and drag.
Pseudo code...
If hover over textbox.text ==true
Textbox size = 300;
Then check the Grid location of the textbox. It should be allowed to columnspan over the other columns, while the rest of the controls stay fixed in their grid.row and grid.column locations.
I have a treeview where I have added an eventsetter to the item container style to catch whenever a F1 is pressed while hovering a mouse over. So in the code behind I tried to find the child object that the mouse is over. The child object is only found in the tree after a node have been expanded and tried once before, the key down is catched correctly every time. So it is only the second time the IsMouseOver child object is found.
I have disabled virtualization for the target tree, but it doesn't make any difference.
<HierarchicalDataTemplate.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<EventSetter Event="PreviewKeyDown" Handler="EventSetter_OnHandler"></EventSetter>
<Setter Property="IsSelected">
<Setter.Value>
<MultiBinding Mode="OneWay" Converter="{StaticResource ActiveReportTypeMatchToBoolConverter}">
<Binding Path="DataContext.ActiveReportType" ElementName="TreeViewExpander" />
<Binding />
</MultiBinding>
</Setter.Value>
</Setter>
<Setter Property="UIElement.Uid" Value="{Binding Name}" />
</Style>
</HierarchicalDataTemplate.ItemContainerStyle>
The Code behind event handler
private void EventSetter_OnHandler(object sender, KeyEventArgs e) {
if (e.Key == Key.F1) {
foreach (var item in TreeViewReportType.Items) {
TreeViewItem anItem = TreeViewReportType.ItemContainerGenerator.ContainerFromItem(item) as TreeViewItem;
if (anItem?.IsMouseOver == true) {
foreach (ReportType childItem in anItem.Items) {
TreeViewItem childTreeViewItem = anItem.ItemContainerGenerator.ContainerFromItem(childItem) as TreeViewItem;
if (childTreeViewItem?.IsMouseOver == true) {
ApplicationCommands.Help.Execute(childItem.HelpId, childTreeViewItem);
}
}
return;
}
}
}
}
Do any of you know of a magic trick here ?
I have tried to do a TreeViewReportType.UpdateLayout() and also anItem.UpdateLayout() to see if it made any changes. But it didn't help.
Tried to look on previous answers but it is datagrid related and is to disable virtualization, which doesn't work here ?
Controls, such as TreeViewItems, have to have focus in order to receive keyboard events.
You've got a few options here. You can put the event on the TreeView itself, but that only works if the treeview has keyboard focus. As long as it's the only control in the window, you're fine. If it isn't, you're in trouble and you need to handle the key event at the window level. Another option would be to write a trigger in your ItemContainerStyle which gives the tree view items keyboard focus when IsMouseOver. But that's silly.
Let's do it at the window level, because we can generalize it: Wherever you press F1 in this window, we'll search the control under the mouse and its parents for one that has a DataContext with a HelpId property. If we find one, we'll use it. If ReportType is the only vm class that has a HelpId, it'll work fine. If you add HelpId to another class, that'll just work. If you decide to list ReportTypes in a ListView too, that'll just work.
This replaces all of the code in your question.
MainWindow.xaml
...
PreviewKeyDown="Window_PreviewKeyDown"
...
MainWindow.xaml.cs
private void Window_PreviewKeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.F1)
{
var window = sender as Window;
var point = Mouse.GetPosition(window);
Helpers.ExecuteHelpUnderPoint(window, point);
}
}
Helpers.cs
public static class Helpers
{
public static void ExecuteHelpUnderPoint(FrameworkElement parent, Point point)
{
var hittestctl = parent.InputHitTest(point) as FrameworkElement;
var helpID = GetNearestDataContextHelpID(hittestctl);
if (helpID != null)
{
ApplicationCommands.Help.Execute(helpID, hittestctl);
}
}
public static IEnumerable<T> GetAncestorsOfType<T>(DependencyObject dobj) where T : DependencyObject
{
dobj = VisualTreeHelper.GetParent(dobj);
while (dobj != null)
{
if (dobj is T t)
yield return t;
dobj = VisualTreeHelper.GetParent(dobj);
}
}
public static Object GetNearestDataContextHelpID(DependencyObject dobj)
{
var dataContexts = GetAncestorsOfType<FrameworkElement>(dobj)
.Select(fe => fe.DataContext).Where(dc => dc != null);
// LINQ distinct probably doesn't affect order, but that's not guaranteed.
// https://stackoverflow.com/a/4734876/424129
object prev = null;
foreach (var dc in dataContexts)
{
if (dc != prev)
{
var prop = dc.GetType().GetProperty("HelpId");
if (prop != null)
{
var value = prop.GetValue(dc);
if (value != null)
{
return value;
}
}
prev = dc;
}
}
return null;
}
}
I can's set PlacementTarget for ContextMenu. It is always opened (via Shift+F10) in the center of listbox.
I tried:
private void listBox_PreviewKeyDown(object sender, System.Windows.Input.KeyEventArgs e)
{
if (e.KeyboardDevice.Modifiers == ModifierKeys.Shift &&
(e.Key == Key.F10 || e.SystemKey == Key.F10)){
var listBox = sender as System.Windows.Controls.ListBox;
listBox.ContextMenu.PlacementTarget = listBox.ItemContainerGenerator.ContainerFromItem(listBox.SelectedItem) as ListBoxItem;
}
}
and
private void listBox_ContextMenuOpening(object sender, ContextMenuEventArgs e)
{
var listBox = sender as System.Windows.Controls.ListBox;
listBox.ContextMenu.PlacementTarget = listBox.ItemContainerGenerator.ContainerFromItem(listBox.SelectedItem) as ListBoxItem;
}
But it still doesn't work as expected. (I expect it is shown in the center of selected itemlistbox)
Any suggestions?
I've just tried your code. The problem is you cannot change the PlacementTarget of the the ContextMenu once it is set to the ListBox. That means the ListBox is always set as PlacementTarget of the ContextMenu. I understand that that ContextMenu is in fact used for the selected item. So why not set it for each item? Then it works expectedly. Try this:
<ListBox ItemsSource="some_source_here"/>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="ContextMenu">
<Setter.Value>
<!-- your ContextMenu here -->
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
There is not any code behind involved here. Just change your XAML like above.
i have an issue with selectedItem of a listbox. When I select an item of the listbox, a popup would be displayed where you click the add button to select an image (it contains a value of selectedItem) which is working fine. But after clicking the add button to select the image, then you realise the image is wrong, so you click the add button again to select another image, it started problem because selectedItem is null. How to handle it? How to stay the value of selectedItem? Your given code much appreciated.
if (lstDinner.SelectedItem != null)
{
output = _imageInserter.InsertImage(imageName, lstDinner.SelectedItem.ToString());
PopupToysImage.IsOpen = true;
strDinner.DinnersDetails = lstDinner.SelectedItem.ToString()
}
else
{
// strDinner.DinnersDetails = null that cause a problem.
output = _imageInserter.InsertImage(imageName, strDinner.DinnersDetails);
PopupDinnerImage.IsOpen = true;
}
UPDATE HERE:
WPF:
<ListBox Style="{DynamicResource ListBoxStyle1}" DisplayMemberPath="Dinner" BorderBrush="#FFF0F0F0" x:Name="lstDinner" FontSize="20" HorizontalAlignment="Left" Margin="0,110,0,72.667" Width="436" SelectionMode="Extended" PreviewMouseLeftButtonDown="MouseDownHandler" ScrollViewer.CanContentScroll="True" UseLayoutRounding="False" KeyDown="lstDinner_KeyDown" MouseDoubleClick="lstDinner_MouseDoubleClick" >
events in C#:
private void MouseDownHandler(object sender, MouseButtonEventArgs e)
{
var parent = (ListBox)sender;
_dragSource = parent;
var data = GetObjectDataFromPoint(parent, e.GetPosition(parent));
if (e.ChangedButton == MouseButton.Left && e.ClickCount == 1)
{
if (data != null)
DragDrop.DoDragDrop(parent, data, DragDropEffects.Move);
}
}
private void lstDinner_KeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.Delete)
{
RemoveItemsFromDatabase();
}
}
private void lstDinner_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
_dinnerImage = new DinnerImageExtractor();
BitmapImage getImage = new BitmapImage();
if (lstDinner.SelectedItem != null)
{
getImage = _dinnerImage.GetDinnerImages(lstDinner.SelectedItem.ToString());
if (getImage != null)
{
DinnerImagePopup.Source = getImage;
}
else
{
DinnerImagePopup.Source = new BitmapImage(new Uri("/DinnerApplicationWPF;component/Menu/Images/noImage-icon-pink.png", UriKind.Relative));
}
PopupDinnerImage.IsOpen = true;
// PopupInstrcution.IsOpen = false;
}
}
I would suggest something like this
if ( lstDinner.SelectedItem == null)
{
output = _imageInserter.InsertImage(imageName, lstToys.SelectedItem.ToString());
PopupToysImage.IsOpen = true;
lstDinner.Databind();
}
Note: This may not work as I dont have your actual code. I have added DataBind() in the if statement, if the selected item was null. It should refresh the list.
Best thing is to use two different Listbox item templates for selected and unselected items. So without displaying popup, you can add button into the selected item template.
Are you disabling the ListBox while you select the image?
If so I believe by simply disabling the ListBox the SelectedItem will be set to null.
EDIT:
I imagine you want your event handlers (like the mouse double click) to happen when an item in your list is double clicked, not when the ListBox is double clicked. You need to change your XAML to this:
<ListBox Style="{DynamicResource ListBoxStyle1}" DisplayMemberPath="Dinner" BorderBrush="#FFF0F0F0" x:Name="lstDinner" FontSize="20" HorizontalAlignment="Left" Margin="0,110,0,72.667" Width="436" SelectionMode="Extended" PreviewMouseLeftButtonDown="MouseDownHandler" ScrollViewer.CanContentScroll="True" UseLayoutRounding="False" KeyDown="lstDinner_KeyDown">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<EventSetter Event="MouseDoubleClick" Handler="lstDinner_MouseDoubleClick" />
</Style>
</ListBox.Resources>
</ListBox>
My selected item does not come up null when I run this code.
Short version
I would like to scroll the ListBox item into view when the selection is changed.
Long version
I have a ListBox with the ItemsSource bound to a CollectionViewSource with a GroupDescription, as per the example below.
<Window.Resources>
<CollectionViewSource x:Key="AnimalsView" Source="{Binding Source={StaticResource Animals}, Path=AnimalList}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="Category"/>
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</Window.Resources>
<ListBox x:Name="AnimalsListBox"ItemsSource="{Binding Source={StaticResource AnimalsView}}" ItemTemplate="{StaticResource AnimalTemplate}" SelectionChanged="ListBox_SelectionChanged">
<ListBox.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource CategoryTemplate}" />
</ListBox.GroupStyle>
</ListBox>
There is a SelectionChanged event in the a code-behind file.
public List<Animal> Animals { get; set; }
private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListBox control = (ListBox)sender;
control.ScrollIntoView(control.SelectedItem);
}
Now. If I set the AnimalsListBox.SelectedItem to an item that is currently not visible I would like to have it scroll in view. This is where it gets tricky, as the ListBox is being groups (the IsGrouped property is true) the call to ScrollIntoView fails.
System.Windows.Controls.ListBox via Reflector. Note the base.IsGrouping in the OnBringItemIntoView.
public void ScrollIntoView(object item)
{
if (base.ItemContainerGenerator.Status == GeneratorStatus.ContainersGenerated)
{
this.OnBringItemIntoView(item);
}
else
{
base.Dispatcher.BeginInvoke(DispatcherPriority.Loaded, new DispatcherOperationCallback(this.OnBringItemIntoView), item);
}
}
private object OnBringItemIntoView(object arg)
{
FrameworkElement element = base.ItemContainerGenerator.ContainerFromItem(arg) as FrameworkElement;
if (element != null)
{
element.BringIntoView();
}
else if (!base.IsGrouping && base.Items.Contains(arg))
{
VirtualizingPanel itemsHost = base.ItemsHost as VirtualizingPanel;
if (itemsHost != null)
{
itemsHost.BringIndexIntoView(base.Items.IndexOf(arg));
}
}
return null;
}
Questions
Can anyone explain why it does not work when using grouping?
The ItemContainerGenerator.ContainerFromItem always returns null, even though it's status states that all the containers have been generated.
How I can achieve the scrolling into view when using grouping?
I have found a solution to my problem. I was certain that I wasn't the first person to hit this issue so I continued to search StackOverflow for solutions and I stumbled upon this answer by David about how ItemContainerGenerator works with a grouped list.
David's solution was to delay accessing the ItemContainerGenerator until after the rendering process.
I have implemented this solution, with a few changes that I will detail after.
private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListBox control = (ListBox)sender;
if (control.IsGrouping)
{
if (control.ItemContainerGenerator.Status == GeneratorStatus.ContainersGenerated)
Dispatcher.BeginInvoke(DispatcherPriority.Render, new Action(DelayedBringIntoView));
else
control.ItemContainerGenerator.StatusChanged += ItemContainerGenerator_StatusChanged;
}
else
control.ScrollIntoView(control.SelectedItem);
}
private void ItemContainerGenerator_StatusChanged(object sender, EventArgs e)
{
if (ItemContainerGenerator.Status != GeneratorStatus.ContainersGenerated)
return;
ItemContainerGenerator.StatusChanged -= ItemContainerGenerator_StatusChanged;
Dispatcher.BeginInvoke(DispatcherPriority.Render, new Action(DelayedBringIntoView));
}
private void DelayedBringIntoView()
{
var item = ItemContainerGenerator.ContainerFromItem(SelectedItem) as ListBoxItem;
if (item != null)
item.BringIntoView();
}
Changes:
Only uses the ItemContainerGenerator approach when it IsGrouping is true, otherwise continue to use the default ScrollIntoView.
Check if the ItemContainerGenerator is ready, if so dispatch the action, otherwise listen for the ItemContainerGenerator status to change.. This is important as if it is ready then the StatusChanged event will never fire.
The out of the box VirtualizingStackPanel does not support virtualizing grouped collection views. When a grouped collection is rendered in an ItemsControl, each group as a whole is an item as opposed to each item in the collection which results in "jerky" scrolling to each group header and not each item.
You'll probably need to roll your own VirtualizingStackPanel or ItemContainerGenerator in order to keep track of the containers displayed in a group. It sounds ridiculous, but the default virtualization with grouping in WPF is lacking to say the least.