Binding not working on IsHidden in RadPane

[Rajesh]

hi  Team,

I am  using RAd  pane  control  an  MVVM  pattern  but  when  i am  binding  IsHidden Property  control with  a propertys  in  Viewmodel  the  control  is  not  visbible even  i  sent the  property to  false . please  find the sample  code  i am using  below  . 
 

<Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.DataContext>
            <local:ViewModel></local:ViewModel>
        </Grid.DataContext>
            <CheckBox Content="IsHidden" IsChecked="{Binding Hidden, Mode=TwoWay}" />


        <telerik:RadDocking Width="Auto" Height="Auto" BorderThickness="0" Grid.RowSpan="2" Grid.Row="1" >
            <telerik:RadDocking.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFECF0F4" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </telerik:RadDocking.Background>
            <telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup BorderThickness="0"  TabStripPlacement="Top">
                        <telerik:RadPane x:Name="Pane1" IsHidden="{Binding Hidden}" BorderThickness="0" CanUserClose="False" Title="Summary"  IsSelected="True" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">



                        </telerik:RadPane>
                        <telerik:RadPane x:Name="Pane2" IsHidden="{Binding Hidden1}" BorderThickness="0" CanUserClose="False" Title="Message" >

                        </telerik:RadPane>



                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking.DocumentHost>
        </telerik:RadDocking>
    </Grid>

Viewmodel :

public class ViewModel : INotifyPropertyChanged
  {
      private bool hidden;
      private bool hidden1;
      public ViewModel()
      {
          this.hidden = false;
          this.hidden1 = (!hidden);
      }
      public bool Hidden
      {
          get { return this.hidden; }
          set
          {
              if (value != this.hidden)
              {
                  this.hidden = value;
                  this.hidden1 = (!hidden);
                  this.OnPropertyChanged("Hidden");
              }
          }
      }
      public bool Hidden1
      {
          get { return this.hidden1; }
          set
          {
              if (value == this.hidden1)
              {
                  this.hidden1 = value;
                  this.OnPropertyChanged("Hidden1");
              }
          }
      }
      public event PropertyChangedEventHandler PropertyChanged;
      protected void OnPropertyChanged(string propertyName)
      {
          this.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
      }
      protected virtual void OnPropertyChanged(PropertyChangedEventArgs args)
      {
          if (this.PropertyChanged != null)
          {
              this.PropertyChanged(this, args);
          }
      }
  }

in the  above  example   i tried to set the  ishidden  property  of  pane1 to true  on  constructor  of  view model  and  when we  check the  checkbox  i am  making  it  to false  . even then we  are  not  able to see the pane1.

Please  let us  know  if we are doing  anything wrong  here . if  possible can  you  please share  the  sample  code  for this  scenario.


Reagrds,
Rajesh

[Miroslav Nedyalkov]

Hi Rajesh,

 The problem is that when the pane is hidden it is removed the the Items collection of its group, so it doesn't inherit its DataContext anymore. The same happens when the pane is dragged out to another group or a ToolWindow. In order to work-around this problem you could change the bindings to bind to the DataContext of the Docking control.

Hope this helps.

Kind regards,
Miroslav Nedyalkov
the Telerik team

[Rajesh]

Hi Miroslav Nedyalkov ,

Thanks  for the  solution. 

Even after  implementing  your  sugesstion  of   using  datacontext  of  the  Docking  control  . still  we are  not  able  solve the  issuse if  there  are  two or  more  rad  pane  in the  docking  control and  need  to hide/show the  panes  based  on the few  business conditions . The  solution  is  working  fine  if  we have  only  one  rad  pane  in the  Docking  contol.

Please  find  the  code  with  chages  you  suggested us . 

<Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <CheckBox Content="IsHidden" IsChecked="{Binding DataContext.Hidden, ElementName=Parent, Mode=TwoWay}" />


        <telerik:RadDocking Width="Auto" Height="Auto" x:Name="Parent" BorderThickness="0" Grid.RowSpan="2" Grid.Row="1" >

            <telerik:RadDocking.DataContext>
                <local:ViewModel></local:ViewModel>
                </telerik:RadDocking.DataContext>
            <telerik:RadDocking.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFECF0F4" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </telerik:RadDocking.Background>
            <telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup BorderThickness="0"  TabStripPlacement="Top">
                        <telerik:RadPane x:Name="Pane1" IsHidden="{Binding Hidden}" BorderThickness="0" CanUserClose="False" Title="Summary"  IsSelected="True" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">



                        </telerik:RadPane>
                        <telerik:RadPane x:Name="Pane2" IsHidden="{Binding Hidden1}" BorderThickness="0" CanUserClose="False" Title="Message" >

                        </telerik:RadPane>



                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking.DocumentHost>
        </telerik:RadDocking>
    </Grid>

view  model : 

public class ViewModel : INotifyPropertyChanged
   {
       private bool hidden;
       private bool hidden1;
       public ViewModel()
       {
           this.hidden = false;
           this.hidden1 = (!hidden);
       }
       public bool Hidden
       {
           get { return this.hidden; }
           set
           {
               if (value != this.hidden)
               {
                   this.hidden = value;
                   this.hidden1 = (!hidden);
                   this.OnPropertyChanged("Hidden");
               }
           }
       }
       public bool Hidden1
       {
           get { return this.hidden1; }
           set
           {
               if (value == this.hidden1)
               {
                   this.hidden1 = value;
                   this.OnPropertyChanged("Hidden1");
               }
           }
       }
       public event PropertyChangedEventHandler PropertyChanged;
       protected void OnPropertyChanged(string propertyName)
       {
           this.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
       }
       protected virtual void OnPropertyChanged(PropertyChangedEventArgs args)
       {
           if (this.PropertyChanged != null)
           {
               this.PropertyChanged(this, args);
           }
       }
   }

 if  possible  can  you  please  share  the  code  how  to solve  this  problem .  

[Shravan]

Hi Miroslav Nedyalkov,

Could you please update on this? Is this issue related to control?

Thanks,
Shravan

[George]

Hello,

 
Please, refer to the following xaml:

<UserControl x:Class="SLDocking.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:local="clr-namespace:SLDocking"
    mc:Ignorable="d"
    d:DesignHeight="400" d:DesignWidth="600">
    <UserControl.DataContext>
        <local:ViewModel />
    </UserControl.DataContext>
    <UserControl.Resources>
        <telerik:InvertedBooleanConverter x:Key="invertedBooleanConverter" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <CheckBox Content="IsHidden" IsChecked="{Binding Hidden, Mode=TwoWay}" x:Name="checkbox" />
        <telerik:RadDocking Width="Auto" Height="Auto" x:Name="Parent" BorderThickness="0" Grid.RowSpan="2" Grid.Row="1" >
            <telerik:RadDocking.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFECF0F4" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </telerik:RadDocking.Background>
            <telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup BorderThickness="0"  TabStripPlacement="Top">
                        <telerik:RadPane x:Name="Pane1"
                                         IsHidden="{Binding IsChecked, ElementName=checkbox, Mode=TwoWay}"
                                         BorderThickness="0" CanUserClose="False" Title="Summary"  />
                        <telerik:RadPane x:Name="Pane2"
                                         IsHidden="{Binding IsChecked, ElementName=checkbox, Mode=TwoWay, Converter={StaticResource invertedBooleanConverter}}"
                                         BorderThickness="0" CanUserClose="False" Title="Message" />
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking.DocumentHost>
        </telerik:RadDocking>
    </Grid>
</UserControl>

Hope this helps.

All the best,
George
the Telerik team