Hide a silverlight control and other control will shift up to cover its space

Problem:

I was working on a screen where i need to toggle search criteria and when search criteria is collapsed, controls below should move up to cover its space. I was using Grid container but making search criteria only hide it but the space remains as it is, A senior collegue gave me below idea and it works!

Solution:

Inside the parent Grid Container, place the StackPanel and in  StackPanel add the controls starting from the control that will collapsed to the end as all controls below them needs to be shift up. It is StackPanel feature that if you hide an control i.e. make its visibility to Collapsed, it automatically moves all other controls up to cover the empty space. Your xaml should look like:

<Grid>

   <StackPanel>

      //     your control whose visibility will toggle
     .
     .
     .
     //     all other silverlight controls below that control
     .
     .
     .

   </StackPanel>

</Grid>

Visibility of a control can either be changed in .cs file or its ViewModel, both works fine. I did it in ViewModel.

        /// <summary>
        /// command binded to back order info button
        /// </summary>
        public RelayCommand rlcBOInfoCriteria
        {
            get
            {
                return new RelayCommand(Event_ToggleVisibility);
            }
        }

        /// <summary>
        /// function to be executed when back order info button pressed
        /// </summary>
        private void Event_ToggleVisibility ()
        {
            if (IsCanvasVisible == Visibility.Collapsed)
            {
                IsCanvasVisible = Visibility.Visible;
            }

            else
            {
                IsCanvasVisible = Visibility.Collapsed;
            }
        }

IsCanvasVisible => Property of type Visibility attached with the canvas i need to hide/display