Creating custom toolbar for each pane dynamically

[John Schroedl]

Hi,

I'm interested in recreating an existing UI using the RadDock with a splitter and RadPane objects.  I have nearly everything I need through existing properties but I could use some advice on how to achieve a particular effect.  (see Desired.png - attached)

In a given RadPane, I set the Contents during the ElementLoading event. But, the element which becomes the RadPane's child is responsible in our app for creating the particular tool buttons we want to show within the Title/Header.

For the Recent Files pane I show, the folder and two filter buttons are created by the same UserControl responsible for the list. 

I'd like to create something like this for my TitleTemplate -- this does not work -- clearly the binding needs work.

<DataTemplate x:Key="TitleTemplate">
     <Grid>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*" />
             <ColumnDefinition Width="Auto" />
             <ColumnDefinition />
         </Grid.ColumnDefinitions>
         <ContentPresenter Content="{Binding}"
                       Name="titleTemplate"
                       Margin="0,0,0,0"/>
         <ContentPresenter Content="{Binding Path=SelectedPane.Content.ToolStack,
             RelativeSource={RelativeSource AncestorType=FrameworkElement}}"
                           Name="toolStackHolder"
                           Margin="0" />
     </Grid>
 </DataTemplate>

<telerik:RadPaneGroup>
    <telerik:RadPane
        telerik:RadDocking.SerializationTag="RecentFilesPane"
        ContextMenuTemplate="{x:Null}"
        TitleTemplate="{StaticResource ResourceKey=TitleTemplate}"
        Header="Recent Files"
        CanUserPin="True">
        <!-- CONTENT FILLED DYNAMICALLY -->
    </telerik:RadPane>
</telerik:RadPaneGroup>

The first ContentPresenter should be for the Title and I'll fixup the formatting, font, etc. later to match my requirements.

The second ContentPresenter is where I'd like to have the object which is within the RadPane to supply a FrameworkElement such as a StackPanel or Toolbar or ToolbarTray etc.. based onthe particular pane.

Can anyone suggest a way for me to bind to a property on that object within the TitleTemplate?  Here, I invented one called "ToolStack" which my usercontrol list object implements -- but it's not bound to of course...

John

[Miroslav Nedyalkov]

Hello John,

 You could use RelativeSource in your binding like the following code snippet demonstrates:

<telerik:RadPane Header="asdf">
    <telerik:RadPane.TitleTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock Text="{Binding SelectedItem.Header, RelativeSource={RelativeSource AncestorType=telerik:PaneGroupBase}}" />
            </Grid>
        </DataTemplate>
    </telerik:RadPane.TitleTemplate>
</telerik:RadPane>

The common parent type is PaneGroupBase, because this is the common base class of the RadPaneGroup and AutoHide area classes. The Title is displayed directly into these controls and that's why we search for them.

If you have further questions, don't hesitate to ask!

Greetings,
Miroslav Nedyalkov
the Telerik team

[John Schroedl]

Thank you Miroslav, this is VERY close to what I'm after!

One issue it raises is that the binding does not work after I float the pane. I assume I need to re-establish the binding somehow or use a better binding expression which can work for both floating and docked. Do you have a solution for that part you can share?

Here's what I have so far as a test:

        <DataTemplate x:Key="MyTitleTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
 
                <TextBlock Grid.Column="0"  
                           FontSize="14"
                           Margin="0,0,10,0"
                           VerticalAlignment="Center"
                           Text="{Binding Path=SelectedPane.DataContext.Caption, 
                                    RelativeSource={RelativeSource AncestorType=telerik:PaneGroupBase}}" />
 
                <ContentControl Grid.Column="1" 
                                Margin="3"
                                Content="{Binding Path=SelectedPane.DataContext.Tools, 
                                    RelativeSource={RelativeSource AncestorType=telerik:PaneGroupBase}}" />
 
            </Grid>
        </DataTemplate>








John

[John Schroedl]

I have create a sample app demonstrating how close I am and also the problem I described.

It looks like I should not attach a zip file to these posts and am instead encouraged to open a support ticket so I'll start on that.  Also, please let me know if that's not the case -- I'm still in my 60 trial days trying to figure out if RadDocking will work for our product.

John

[Miroslav Nedyalkov]

Hello John,

 The problem is that Binding to relative source AncestofType PaneGroupBase will walk up the visual tree and search for PaneGroupBase, but when there is a single group in a ToolWindow, the title will be displayed in the header of the ToolWindow, which doesn't have any ancestor of type PaneGroupBase.

We will change the type of the Title property to be object and this way you will be able to set a ViewModel object to the pane's Title and achieve the searched effect in an easier way.

Best wishes,
Miroslav Nedyalkov
the Telerik team

[Miroslav Nedyalkov]

Hello Everybody,

I just wanted to update this thread - we managed to change the type of the Title property so this work-around is not needed anymore. For more information, please refer to this help article.

All the best,
Miroslav Nedyalkov
the Telerik team