Change the visibility of GridView elements using snapping

Question

How to change the visibility of GridViewItems using property binding?

I cannot create another ObservableCollection to filter out the one I use as ItemsSource . I tried using GridView.ItemContainerStyle to change the style of the GridViewItem , but it doesn't seem to work with binding (although it works if I set the value to Collapsed).

 <GridView.ItemContainerStyle> <Style TargetType="GridViewItem"> <Setter Property="Visibility" Value="{Binding IsVisible, Converter={StaticResource booleanToVisibilityConverter}}" /> </Style> </GridView.ItemContainerStyle> 

I also tried using DataTemplateSelector . I can hide the elements with binding, but then there are spaces in my GridView , because the ItemContainer still exists, and not compressed .

I need the GridView items to be collapsed, not just hidden.

EDIT: Why do I want to get rid of filtered ObservableCollections ?

I am trying to mirror 2 GridViews and 1 ListView with the same ItemsSource and SelectedItem that are bound to my ViewModel Items and Current properties. Without filters, it works as I expect, without SelectionChanged events, but with only two-way binding .

But those GridView/Listview should have some differences, such as selectable items and DataTemplates . Therefore, I use filtered collections that brought me problems.

For instance:

• GridView1 has items 1, 2, and 3
• GridView2 has only items 1 and 3
• I choose Item 1 from GridView1
• I select item 2 from GridView1

When I select Item 1, it is also selected on GridView2 . It's good now. When I select item 2, item 1 supports the one selected on GridView2 . GridView2 should now be without a choice, but if I force it, it always deselects the 2nd item of GridView2 , since SelectedItem for both two-way binding.

I hope this is understandable, because English is not my native language.

Answer 1

So, firstly, the style does not work, because WinRT does not support bindings in setters (see here ). This article mentions a workaround for this problem and hopefully it will work for you (although I have not tried it myself).

In case this is not disabled, the GridView is ultimately just an ItemsControl element, so you can manually manually override the layout by setting its ItemsPanel property to a custom panel. You can create a small custom panel that will be used in conjunction with your DataTemplateSelector, which worked to collapse the contents of GridViewItems:

 class CustomPanel : Panel { //Children of this panel should be of type GridViewItem (which is the ItemContainer for the //ItemsControl) protected override Size MeasureOverride(Size availableSize) { foreach (var child in this.Children) { var interior = (UIElement)VisualTreeHelper.GetChild(child, 0); interior.Measure(availableSize); if (interior.DesiredSize.Width == 0 && interior.DesiredSize.Height == 0) //Skip this item else { child.Measure(availableSize); //Update the total measure of the panel with child.DesiredSize... } //Return the total calculated size } } protected Size override ArrangeOverride(Size finalSize) { foreach (var child in this.Children) { var interior = (UIElement)VisualTreeHelper.GetVisualChild(child, 0); if (interior.DesiredSize.Width == 0 || interior.DesiredSize.Height == 0) //Skip this item else //Call child.Arrange with the appropriate arguments and update the total size //used... //Return the total size used } } } 

This code could have been cleaned up a bit, but something like this should be able to solve the problem of handling empty GridViewItems.

Answer 2

You can change the visibility of the GridViewItem from code using the index of the element. The item index is the same as your ObservableCollection

 var gridViewItem = (GridViewItem)this.GridView.ContainerFromIndex(index); gridViewItem.Visibility = Visibility.Visible;