Binding Properties with XAML

Question

I have userControl with a GridView of GridViews (A GridView who's data context is another GridView) so when i set the itemssource to a collection of collection i can see a hierarchical view.

eg:

Parent Collection is List<ClassRoom> and the parent Collection has a Property List<Student>

The above Classes are defined and i can't modify the class(as we consider it is in Model Layer) for the use of my UserControl.

Because i am developing a UserControl i have defined a Property called bool ShowChildItems.

if ShowChildItems is set to false i want the childGridView to be Collapsed.

How can i bind the property of the user control to childGridView.Visisbility. (ShowChildItems property value may change at runtime,depending on the instance of the UserControl)

Answer 1

To have a ShowChildItems property in your UserControl to manage the Visibility of your child GridView you first need to make it a DependencyProperty:

public static readonly DependencyProperty ShowChildItemsProperty =
    DependencyProperty.Register("showChildItems", typeof (bool), typeof (MyUserControl), new PropertyMetadata(true));

public bool ShowChildItems
{
    get { return (bool) GetValue(ShowChildItemsProperty); }
    set { SetValue(ShowChildItemsProperty, value); }
}

Inside the UserControl you will bind the GridView Visibility to this property by using the ElementName syntax - this way it doesn't matter what the GridView DataContext is bound to:

<GridView Visibility="{Binding ShowChildItems, ElementName=ControlRoot, Converter={StaticResource VisibilityConverter}}" ItemsSource="{Binding ChildItems}">

For this to work you need to set the name to UserControl's root node (I've omitted the rest of the attributes):

<UserControl
    x:Name="ControlRoot">

I've also used a converter to bind a bool property to Visibility:

<UserControl.Resources>
    <local:BoolToVisibilityConverter x:Key="VisibilityConverter" />
</UserControl.Resources>

This is its code:

public class BoolToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (!(value is bool)) return Visibility.Collapsed;

        return (bool) value ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

I hope this is what you were asking for. I'm not quite sure based on your question.

Answer 2

The way around model layer items that can't be modified in all XAML frameworks is to use the MVVM pattern where you would not actually bind to your ClassRoom list, but create another type called ClassroomViewModel that adds the properties and methods you need to drive your view.

Once you do that you can add a property to the ClassroomViewModel called, say StudentListVisibility. Then your main view model that your user control binds to would have a ShowChildItems property and Classrooms list property. The user control would bind its ShowChildItems dependency property to the ShocChildItems bindable property of the view model and the view model on a change of the ShowChildItems value would iterate over its list of ClassroomViewModel items setting their StudentListVisibility appropriately. StudentListVisibility would of course be bound to the (child) GridView.Visibility property.

All that said - nesting GridViews sounds like a bad design both from user experience and engineering standpoint. Perhaps a better solution would be to use a SemanticZoom control and use a GridView bound to Classrooms for its zoomed out view and use a GridView with students grouped by classroom for the zoomed in view.

Answer 3

The Visibility attribute is not of type bool. Have you tried to bind the childGridView.Visibility to a property of type Visibility? Like this:

private bool _showChildItems;
public Visibility showChildItems
{
    get
    {
        if (_showChildItems)
            return System.Windows.Visibility.Visible;
        else
            return System.Windows.Visibility.Collapsed;
    }
}