Develop Reference

WinrtXamlToolkit TreeView expand with single instead of double click

I am using the TreeView from the WinrtXamlToolkit. The default behavior of this control is to expand the nested items on double click of the header. The code responsible for this is here (TreeViewItem.cs line 1205).
private void OnHeaderMouseLeftButtonDown(object sender, PointerRoutedEventArgs e)
{
if (Interaction.AllowMouseLeftButtonDown(e))
{
// If the event hasn't already been handled and this item is
// focusable, then focus (and possibly expand if it was double
// clicked)
if (!e.Handled && IsEnabled)
{
if (Focus(FocusState.Programmatic))
{
e.Handled = true;
}
// Expand the item when double clicked
if (Interaction.ClickCount % 2 == 0)
{
bool opened = !IsExpanded;
UserInitiatedExpansion |= opened;
IsExpanded = opened;
e.Handled = true;
}
}
Interaction.OnMouseLeftButtonDownBase();
OnPointerPressed(e);
}
}
Is there a way to change this behavior to expand the items on single click or tap without actually copying the control and all it's related classes to my project?
It seems like an overkill to do this just to change a few lines of code.

I tried to do drag'n'drop stuff with that TreeView and was in a similar situation. My first move was to actually copy all the TreeView and its related classes and man there are a lot. There's a lot of internal stuff happening and I pretty much gave up interfering with it after a bunch of other stuff stopped working.
So my solution was to just have a specific control inside the ItemTemplate that handled dragging for me. For you this would be a Button whose Click you handle. In the eventhandler you will navigate up the visual tree to your TreeViewItem and change the IsExpanded.

Detect, if ScrollBar of ScrollViewer is visible or not

I have a TreeView. Now, I want to detect, if the vertical Scrollbar is visible or not.
When I try it with
var visibility = this.ProjectTree.GetValue(ScrollViewer.VerticalScrollBarVisibilityProperty)
(where this.ProjectTree is the TreeView)
I get always Auto for visibility.
How can I do this to detect, if the ScrollBar is effectiv visible or not?
Thanks.

You can use the ComputedVerticalScrollBarVisibility property. But for that, you first need to find the ScrollViewer in the TreeView's template. To do that, you can use the following extension method:
public static IEnumerable<DependencyObject> GetDescendants(this DependencyObject obj)
{
foreach (var child in obj.GetChildren())
{
yield return child;
foreach (var descendant in child.GetDescendants())
{
yield return descendant;
}
}
}
Use it like this:
var scrollViewer = ProjectTree.GetDescendants().OfType<ScrollViewer>().First();
var visibility = scrollViewer.ComputedVerticalScrollBarVisibility;

ComputedVerticalScrollBarVisibility instead of VerticalScrollBarVisibility
VerticalScrollBarVisibility sets or gets the behavior, whereas the ComputedVerticalScrollBarVisibility gives you the actual status.
http://msdn.microsoft.com/en-us/library/system.windows.controls.scrollviewer.computedverticalscrollbarvisibility(v=vs.110).aspx
You cannot access this property the same way you did in your code example, see Thomas Levesque's answer for that :)

Easiest approach I've found is to simply subscribe to the ScrollChanged event which is part of the attached property ScrollViewer, for example:
<TreeView ScrollViewer.ScrollChanged="TreeView_OnScrollChanged">
</TreeView>
Codebehind:
private void TreeView_OnScrollChanged(object sender, ScrollChangedEventArgs e)
{
if (e.OriginalSource is ScrollViewer sv)
{
Debug.WriteLine(sv.ComputedVerticalScrollBarVisibility);
}
}
For some reason IntelliSense didn't show me the event but it works.

Windows Store App: How to make ListView with expandable/enlargeable ListItems?

I have a Listview with items, in a C# Windows Store App (is that what you call these? I heard they're not called Metro Apps anymore).
Similar to the ExpandableListView in Android, I want to be able to tap on listitems (not the buttons) for that listitem to expand, tap on the expanded listitem for it to collapse, and if you tap on another listitem, the currently expanded listitem will collapse and the other will expand.
In my particular case I have a DataTemplate for both the expanded and non-expanded view of the listitems. I've seen that Android's ExpandableListView can expand the listitem with additional information (the Expander from WPF does something similar to that), instead of replacing it with a larger item, but is there a common solution for this in Windows Store Apps?
If not, what is the closest equivalent?
Like on the following drawing, I want to know if there is a component that can expand listitems in this way, or if not, which alternatives I have:

I ended up with a solution that works but doesn't look too fancy. It switches DataTemplate when you click items but there's no animation: it switches instantly.
Here's the important code parts:
XAML
<Page.Resources>
<DataTemplate x:Key="dtSmall">
<!--Component template for the un-expanded listitems-->
</DataTemplate>
<DataTemplate x:Key="dtEnlarged">
<!--Component template for the expanded listitems-->
</DataTemplate>
</Page.Resources>
<Grid>
<ListView x:Name="lvEnlargeable"
IsItemClickEnabled="True"
ItemTemplate="{StaticResource dtSmall}"
ItemsSource="{Binding ...}"
SelectionChanged="LVEnlargeable_SelectionChanged"
ItemClick="LVEnlargeable_ItemClick"/>
</Grid>
XAML.CS
public sealed partial class MainPage : Page
{
private DataTemplate dtSmall;
private DataTemplate dtEnlarged;
public MainPage()
{
this.InitializeComponent();
dtSmall = (DataTemplate)Resources["dtSmall"];
dtEnlarged = (DataTemplate)Resources["dtEnlarged"];
}
// A selected item is treated as an expanded/enlarged item
private void LVEnlargeable_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
/* First we set all the items that has been deselected
to be collapsed, aka. using the dtSmall DataTemplate.
We expect 0 or 1 item to have been deselected
but handle all cases easily with a foreach loop.
*/
foreach (var item in e.RemovedItems)
{
// Set the DataTemplate of the deselected ListViewItems
((ListViewItem)(sender as ListView).ContainerFromItem(item)).ContentTemplate = dtSmall;
}
/* Then we set all the items that has been selected
to be expanded.
We should probably throw an Exception if more than 1 was found,
because it's unwanted behavior, but we'll ignore that for now.
*/
foreach (var item in e.AddedItems)
{
((ListViewItem)(sender as ListView).ContainerFromItem(e.AddedItems[0])).ContentTemplate = dtEnlarged;
}
}
/* We need click events because SelectionChanged-events
cannot detect clicks on an already selected item */
private void LVEnlargeable_ItemClick(object sender, ItemClickEventArgs e)
{
ListView lv = (sender as ListView);
/* Having set the IsItemClickEnabled property on the ListView to True
we have to handle selection events manually.
If nothing is selected when this click occurs, then select this item*/
if (lv.SelectedItem == null)
{
lv.SelectedItem = e.ClickedItem;
}
else
{
// Clicking on an expanded/selected/enlarged item will deselect it
if (lv.SelectedItem.Equals(e.ClickedItem))
{
lv.SelectedItem = null;
}
else
{ /* If it's not a selected item, then select it
(and let SelectionChanged unselect the already selected item) */
lv.SelectedItem = e.ClickedItem;
}
}
}
}
I haven't tested if this isolated code is enough, on its own, for this solution, but I hope it is, and this code at least contain the key points. It's late and I just wanted to post something for the curious-minded people. If this shows not to work for you, then please leave a comment about the issue and I'll make sure to add the missing parts.
I also messed with the ListViewItemStyleContainer's ListViewItemPresenter to have better selection effects etc. but I figure it's best to keep it short. If you find this interesting as well, then feel free to leave a comment for that too, and I'll try include it.

Drag&Drop in a WPF TreeView on the Scrollbar

we're using the MVVM pattern in our application and in a window, we have two TreeViews allowing to drag items from the first and drop it on the second tree. To avoid code behind, we're using behaviours to bind the drag and drop against the ViewModel.
The behaviour is implemented pretty much like this example and working like a charm, with one bug.
The scenario is a tree which is bigger than the window displaying it, therefore it has a vertical scroll bar. When an item is selected and the user wants to scroll, the program starts drag and drop (which prevents the actual scrolling and therefore isn't what we want).
This isn't very surprising as the scrollbar is contained in the TreeView control. But I'm unable to determine safely if the mouse is over the scrollbar or not.
The TreeViewItems are represented by a theme using Borders, Panels and so on, so a simple InputHitTest isn't as simple as one may think.
Has anybody already encountered the same problem?
If more code coverage of the problem is required, I can paste some lines from the .xaml.
Edit
Incorporating Nikolays link I solved the problem using a IsMouseOverScrollbar method, if anyone has this problem in the future the code from above must be altered in the following way:
private static void PreviewMouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton != MouseButtonState.Pressed || startPoint == null)
return;
if (!HasMouseMovedFarEnough(e))
return;
if (IsMouseOverScrollbar(sender, e.GetPosition(sender as IInputElement)))
{
startPoint = null;
return;
}
var dependencyObject = (FrameworkElement)sender;
var dataContext = dependencyObject.GetValue(FrameworkElement.DataContextProperty);
var dragSource = GetDragSource(dependencyObject);
if (dragSource.GetDragEffects(dataContext) == DragDropEffects.None)
return;
DragDrop.DoDragDrop(
dependencyObject, dragSource.GetData(dataContext), dragSource.GetDragEffects(dataContext));
}
private static bool IsMouseOverScrollbar(object sender, Point mousePosition)
{
if (sender is Visual)
{
HitTestResult hit = VisualTreeHelper.HitTest(sender as Visual, mousePosition);
if (hit == null) return false;
DependencyObject dObj = hit.VisualHit;
while(dObj != null)
{
if (dObj is ScrollBar) return true;
if ((dObj is Visual) || (dObj is Visual3D)) dObj = VisualTreeHelper.GetParent(dObj);
else dObj = LogicalTreeHelper.GetParent(dObj);
}
}
return false;
}

Take a look at this implementation of Drag and Drop behaviour for ListView by Josh Smith. It has code to deal with scrollbars and some other unobvious problems of DnD (like drag treshold, precise mouse coordinates and such). This behaviour can be easily adopted to work with TreeViews too.

I had the same Problem. I solved it by placing the TreeView inside a ScrollViewer.
<ScrollViewer Grid.Column="0">
<TreeView BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MouseMove="DeviceTree_OnMouseMove" PreviewMouseLeftButtonDown="DeviceTree_OnPreviewMouseLeftButtonDown" Name="DeviceTree" ItemsSource="{Binding Devices}"/>
</ScrollViewer>

How do you access the ScrollViewer element of a ListBox control in Silverlight/C#?

I wish to dynamically change the scroll position of a Silverlight ListBox from C#, and I need to know how to access the ScrollViewer element of a ListBox control from C#?
Thanks guys,
Jeff

From within a class that inherits from the ListBox class, you can use the Protected GetTemplateChild():
var myScrollviewer = myListBox.GetTemplateChild("ScrollViewer") as ScrollViewer;
If you want to access this from outside the ListBox, then exposing the ScrollViewer via a Property should work, again through inheritance.
CAVEAT: If you have set your own custom template, then this Scrollviewer may not exist. You can use the templates Scrollviewer name instead of the "ScrollViewer" in the method above.

Good question. I didn't find a way to do it directly, but came fairly close by looking at the Silverlight Controls project (they use the scrollviewer on the items control in some of the classes). Here is how you can get it, but it requires a custom listbox:
public class TestBox : ListBox
{
private ScrollViewer _scrollHost;
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
var itemsHost = VisualTreeHelper.GetParent(element) as Panel;
for (DependencyObject obj = itemsHost; obj != item && obj != null; obj = VisualTreeHelper.GetParent(obj))
{
ScrollViewer viewer = obj as ScrollViewer;
if (viewer != null)
{
_scrollHost = viewer;
break;
}
}
base.PrepareContainerForItemOverride(element, item);
}
}
There might be another way to hook into that event (or another way to get that panel), If you look at the template for the ListBox you will see the scroll viewer is actually named "ScrollViewer", however the GetTemplateChild method is protected so you would still need to create a custom class.

Let's make it easy...
In your Listbox template, you might find the ScrollViewer Control.
Add a Loaded Method for it, and you will get itself frome the sender arg.
private void ScrollViewer_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
myScrollViewer = (sender as ScrollViewer);
}
this works for me

You can call :
myListBox.ApplyTemplate();
to force the ListBox visual tree to be created, otherwise GetTemplateChild() will return Null if you attempt to access it immediatly.
This works well combined with "Erno de Weerd" explanation : inherit ListBox to be able to call GetTemplateChild() method.
I also tried :
to use ListBox extension method "GetScrollHost()" but it never worked for me (even after full page initialisations).
"FindName()", but it didn't work, even when i specified the ScrollViewer name into the ListBox Template.
Emmanuel (Silverlight 3)

ScrollViewer scrollViewer = yourListBox.getScrollHost();
Is null if no datasourse set to the listbox, in my case it return properly UI Element only after below code executed
myListBox.ItemsSource = list;