controlling multiple grids visibility

Question

I have a WPF application. It contains quite a few grids. I am using (trying to) the MVVM pattern.

So in my view model I have properties of System.Windows.Visibility to control if a grid is visible or collapsed. This all works fine.

However say I have 50 grids for example. I only want one to be visible at a time. So say the application on start up shows grid1. A user then clicks a button which means grid2 should now be visible and grid1 should collapse.

I can do this with the below code although I feel this is a poor way of doing it as it is not very scale able

    void GridSelector(string gridName)
    {
        if(gridName == "grid1")
        {
            Grid1 = Visibility.Visible;
            Grid2 = Visibility.Collapsed;
            Grid3 = Visibility.Collapsed;
            ...
            Grid50 = Visibility.Collapsed;
        }
        else if(gridName == "grid2")
        {
            Grid1 = Visibility.Collapsed;
            Grid2 = Visibility.Visible;
            Grid3 = Visibility.Collapsed;
            ...
            Grid50 = Visibility.Collapsed;
        }
        ...
      }

What is a better way of doing this? Is this where I should use reflection?

at this moment I would ask myself if it is possible to simplify my view. actually I would ask it after maybe 5th Grid, not 50th. it is up to you, of course, there is a method to [find WPF control by Name](http://stackoverflow.com/questions/12238599/find-wpf-control-by-name) — ASh, Oct 19 '16 at 09:13
Bind the visibility to a string in your viewModel, and use a converter to finde out which grid should be visible — Nawed Nabi Zada, Oct 19 '16 at 09:17
@mHelpMe, it depends on what content Grids show and what kind of functionality is required. — ASh, Oct 19 '16 at 09:29
generally the grids contain one or two datagrids and a few buttons — mHelpMe, Oct 19 '16 at 09:30
How are the grids different? My personal preference would be to have one grid and swap its content as necessary instead of making a whole bunch of hidden objects in the visual tree. Or swap an object that is bound to its data context and let that object control the rendering. Nobody can really answer this without knowing how grid 42 is the same / different from grid 18. — PMV, Oct 19 '16 at 18:40
@PMV I see. To be honest there isn't much difference between the grids. The main differences is that they have different datagrids & maybe an odd button here or there. So looks like i've been using grids incorrectly. When you say swap the content is that making a datagrid and the buttons that would have been say visible on grid 18 hidden when grid 23 needs to be shown? — mHelpMe, Oct 20 '16 at 07:16

ndonohoe · Answer 1 · 2016-10-19T09:24:39.747

You could use a converter that converts the selected grid id to a visibility, like so:

public class GridIdToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, 
        object parameter, CultureInfo culture)
    {
        return value.ToString() == parameter.ToString() ? Visibility.Visible : Visibility.Collapsed;
    }

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

And apply it to your grids

<Grid Visibility="{Binding SelectedGridId, Converter={StaticResource GridIdToVisibilityConverter}, ConverterParameter=grid1}/>

controlling multiple grids visibility

1 Answers1