Grid Row Visibility Change

• Download GridRow-VisibilityChange.zip - 23.6 KB

Introduction

This tip is to give you the idea how to change the visibility of Grid’s row.

Background

Actually lots of ways are there to do the above thing. Here I would like to give you the idea, based on Boolean value we can do the visibility change part which I mostly preferred way. Ok let’s crack that idea.

Before get into this, let me tell you about visibility mode.

Visible – the control will be always in the layout as well as shown to the user.

Collapsed – the control will not be displayed and presented in the layout. Layout Adjustment will                                            happen with other controls.

Hidden – the control will not be shown but will reserve the space in the layout. The adjustment will not                                               happen.

Using the code

Step 1:

I just explain you through the sample app which I created to demonstrate.

Define the Boolean property in the class. We can get the notification change either by using dependency property or INotifyPropertyChanged interface. Here I defined the Boolean property as a dependency property.

public static readonly DependencyProperty SetVisibilityProperty = DependencyProperty.Register("SetVisibi                                                                  lity",typeof(bool),typeof(AddWindow));


public bool SetVisibility
{

   get { return (bool)this.GetValue(SetVisibilityProperty); }

   set
      {
        SetValue(SetVisibilityProperty, value);
      }
}

Step 2:

Then define the style in the resources section of window.

<Window.Resources>
        <Style x:Key="VisibilityStyle" TargetType="{x:Type Grid}">
            <Setter Property="Visibility" Value="Collapsed"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding SetVisibility}" Value="True">
                    <Setter Property="Visibility" Value="Visible"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
</Window.Resources>

In the above code, I check my ‘SetVisibility’ property if it returns true then show the gird’s row else make it collapsed mode. 

First we should decide, how do we want to show the row to the user by default. Based on that add the below code should be interchanged.

<Setter Property="Visibility" Value="Collapsed"/>

<Setter Property="Visibility" Value="Visible"/>

Here I set the row as collapsed by default.

At what point (Button click) we want to show that visibility there we have to set the 'SetVisibility' property to 'True'.

Finally we achieve this idea by setting the Grid Row Height to ‘Auto’.

<Grid>
   <Grid.RowDefinitions>
     <RowDefinition Height="Auto"/>
   </Grid.RowDefinitions>
</Grid>

That’s all we have done it. Hope this tip helps you.

In this tip, additionally I implemented Status bar and Dialog. 

Even though I added the above said things additionally in this tip, I shall write separate post in the upcoming days.

I attached the sample application for you. Just try it.

I always welcome your feedback. If any questions, I’ll try to give you my hand to clear your queries.

Points of Interest

This article helped me to learn one more thing. Really felt happy about that.

I was implementing the sample application for this article, I was about to notify the reader what changes happened in the UI,  Finally I found Status Bar Control. :)