Binding not working on IsHidden in RadPane

5 posts, 0 answers
  1. Rajesh
    Rajesh avatar
    6 posts
    Member since:
    Jun 2011

    Posted 11 Sep 2011 Link to this post

    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
  2. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 12 Sep 2011 Link to this post

    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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. DevCraft banner
  4. Rajesh
    Rajesh avatar
    6 posts
    Member since:
    Jun 2011

    Posted 12 Sep 2011 Link to this post

    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 .  
  5. Shravan
    Shravan avatar
    1 posts
    Member since:
    Jun 2011

    Posted 13 Sep 2011 Link to this post

    Hi Miroslav Nedyalkov,

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

    Thanks,
    Shravan
  6. George
    Admin
    George avatar
    1332 posts

    Posted 15 Sep 2011 Link to this post

    Hello,

     
    Please, refer to the following xaml:

    <UserControl x:Class="SLDocking.MainPage"
        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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
DevCraft banner