Post
Ask Question

Grid Row Visibility Change in WPF

This tip is intended to provide you an idea of how to change the visibility of a Grid's row.

Actually there are many ways to do that. Here I would like to provide you an idea based on a Boolean value we can do the visibility change part, the way I prefer to use the most. Ok let's crack that idea.

Before getting 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.

Step 1

I just explained to you using the sample app that I created to demonstrate.

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

  1. public static readonly DependencyProperty SetVisibilityProperty = DependencyProperty.Register("SetVisibility", typeof(bool), typeof(AddWindow));  
  2.   
  3.  public bool SetVisibility  
  4.  {  
  5.      get { return (bool)this.GetValue(SetVisibilityProperty); }  
  6.      set  
  7.      {  
  8.          SetValue(SetVisibilityProperty, value);  
  9.      }  
  10.  }  
Step 2

Then define the style in the resources section of the window.
  1. <Window.Resources>  
  2.         <Style x:Key="VisibilityStyle" TargetType="{x:Type Grid}">  
  3.             <Setter Property="Visibility" Value="Collapsed"/>  
  4.             <Style.Triggers>  
  5.                 <DataTrigger Binding="{Binding SetVisibility}" Value="True">  
  6.                     <Setter Property="Visibility" Value="Visible"/>  
  7.                 </DataTrigger>  
  8.             </Style.Triggers>  
  9.         </Style>  
  10. </Window.Resources>  
In the preceding 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 to show the row to the user by default. Based on that add the following code that should be interchanged.
  1. <Setter Property="Visibility" Value="Collapsed"/>  
  2. <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 need to set the 'SetVisibility' property to 'True'.

Finally we should implement this idea by setting the Grid Row Height to "Auto".
  1. <Grid>  
  2. <Grid.RowDefinitions>  
  3.      <RowDefinition Height="Auto"/>                  
  4. </Grid.RowDefinitions>  
  5. </Grid>  
That's all; we have done it. I hope this tip helps you.

In this tip I also implemented a Status Bar and a Dialog.

Even though I added the preceding additional things in this tip, I shall write the separate article in the future days.

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

I always welcome your feedback. If any questions, I'll try to provide you assistance to clarify your queries.


Similar Articles