Creating custom toolbar for each pane dynamically

6 posts, 1 answers
  1. John Schroedl
    John Schroedl avatar
    24 posts
    Member since:
    Sep 2010

    Posted 03 Sep 2010 Link to this post

    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

  2. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 09 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. John Schroedl
    John Schroedl avatar
    24 posts
    Member since:
    Sep 2010

    Posted 27 Sep 2010 Link to this post

    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
  5. John Schroedl
    John Schroedl avatar
    24 posts
    Member since:
    Sep 2010

    Posted 29 Sep 2010 Link to this post

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

    Posted 30 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 19 May 2012 Link to this post

    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

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

Back to Top
UI for WPF is Visual Studio 2017 Ready