my RadButton on Radpane does not work when radpane is undocked

[Felix]

Hi There,

I look for help here, I have a Radpane and there are 3 RadButton and RadRadioButton on pane bar, they work when Radpane is docked (default). But when I undock (e.g floating) the radpane, click the button does not work, it does not come into command (MyAddCommand, ToggleWindowLayout) code in c#, Xaml attached below, thanks in advance.

    <telerik:RadPane x:Name="myRadPane"
              CanFloat="True"
              CanUserClose="False"
              CanUserPin="True"
              CanDockInDocumentHost="False"       
              DataContext="{Binding ElementName=myDocker, Path=DataContext}"
              IsSelected="...">

            <telerik:RadPane.Header>
              <StackPanel Orientation="Horizontal">
        ...
          </StackPanel>
            </telerik:RadPane.Header>

            <telerik:RadPane.TitleTemplate>
                <DataTemplate>
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="*"/>
                      <ColumnDefinition Width="40"/>
                  </Grid.ColumnDefinitions>

                  <telerik:RadButton
                     Grid.Column="1"
                     Width="18"
                     Height="18"
                     Margin="0,0,5,0"
                     HorizontalAlignment="Right"
                     Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadTabControl}}, Path=DataContext.MyAddCommand}"
                     CommandParameter="{Binding}"
                     ToolTip="Add to graph">
                    <Grid>
                      <Image Source="/Images/Add.ico"
                               HorizontalAlignment="Stretch"
                               VerticalAlignment="Stretch"/>
                    </Grid>
                  </telerik:RadButton>

                  <Grid Grid.Column="2" >
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*"/>
                      <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <telerik:RadRadioButton
                      Grid.Column="0"
                      Width="18"
                      Height="18"
                      IsChecked="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadTabControl}}, Path=DataContext.SplitterHorizontal}"
                      HorizontalAlignment="Stretch"
                      HorizontalContentAlignment="Stretch"
                      Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadTabControl}}, Path=DataContext.ToggleWindowLayout}"
                      CommandParameter="H">
                      <Grid>
                        <Image Source="/Images/HorizontalLayout.ico"
                               HorizontalAlignment="Stretch"
                               VerticalAlignment="Stretch"/>
                      </Grid>
                    </telerik:RadRadioButton >
                    <telerik:RadRadioButton
                      Grid.Column="1"
                      Width="18"
                      Height="18"
                      IsChecked="{Binding Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadTabControl}}, Path=DataContext.SplitterVertical}"
                      HorizontalAlignment="Stretch"
                      HorizontalContentAlignment="Stretch"
                      Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadTabControl}}, Path=DataContext.ToggleWindowLayout}"
                      CommandParameter="V">
                      <Grid>
                        <Image Source="/Images/VerticalLayout.ico"
                               HorizontalAlignment="Stretch"
                               VerticalAlignment="Stretch"/>
                      </Grid>
                    </telerik:RadRadioButton >
                  </Grid>
                </Grid>
                </DataTemplate>
              </telerik:RadPane.TitleTemplate>

         ...                
            </Grid>
          </telerik:RadPane>

Thanks
Felix

[Kiril Vandov]

Hello Felix,

When you undock a RadPane from the RadDockPanel it is removed from the visual tree, this may cause an ElementName bindings to fail. As you are using the TitleTemplate of the RadPane its DataContext comes from its Title property. If you want to access a property from your ViewModel inside your custom TitleTemplate you will need to set to the Title property of the pane the ViewModel responsible for the commands in the title. Binding your ViewModels exclude the need to use an ElementName binding.

I have attached a sample project demonstrating the above approach.

I hope this information helps.

Kind regards,
Kiril Vandov
Telerik