How to activate a pane in the Telerik Docking control for WPF and Silverlight?

Thursday, March 04, 2010 by XAML Team | Comments 1
?
Email to a friend
One very requested scenario when the developers are using a Docking control is to activate a pane on certain user action. For example we may have a pane that contains some kind of output like the one in Visual Studio and when a message is added, the pane should pop-up wherever it is. Another example is the 'Find' dialog of the Visual Studio when the user preses Ctrl+F.

This feature could be easily archived with the Telerik Docking control for Silverlight and WPF. In this blog post I will guide you through the implementation of a simple method that accomplishes this task and an example in which you could try it out.

First of all we will create a UserControl and reuse it in WPF and Silverlight (you will see how in the attached example). The content of this UserControl will be a Grid panel with two rows - the first one will have 'auto' height and the second one - will use '*' height. In the first row we will put a menu and will populate it with some items later. In the Second row we will place a Docking control with some panes and split containers. Here is the Xaml:
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
 
    <telerikNavigation:RadMenu Grid.Row="0" ItemClick="RadMenu_ItemClick">
        <telerikNavigation:RadMenuItem Header="Activate">
            <telerikNavigation:RadMenuItem Header="Pane 1" Tag="pane1" />
            <telerikNavigation:RadMenuItem Header="Pane 2" Tag="pane2" />
            <telerikNavigation:RadMenuItem Header="Pane 3" Tag="pane3" />
            <telerikNavigation:RadMenuItem Header="Pane 4" Tag="pane4" />
            <telerikNavigation:RadMenuItem Header="Pane 5" Tag="pane5" />
            <telerikNavigation:RadMenuItem Header="Pane 6" Tag="pane6" />
        </telerikNavigation:RadMenuItem>
    </telerikNavigation:RadMenu>
 
    <telerikDocking:RadDocking x:Name="docking" Grid.Row="1">
        <telerikDocking:RadSplitContainer>
            <telerikDocking:RadPaneGroup>
                <telerikDocking:RadPane x:Name="pane1" Header="pane 1">
                    <TextBlock Text="pane 1 content" FontSize="30" />
                </telerikDocking:RadPane>
                <telerikDocking:RadPane x:Name="pane2" Header="pane 2">
                    <TextBlock Text="pane 2 content" FontSize="30" />
                </telerikDocking:RadPane>
            </telerikDocking:RadPaneGroup>
        </telerikDocking:RadSplitContainer>
 
        <telerikDocking:RadSplitContainer>
            <telerikDocking:RadPaneGroup>
                <telerikDocking:RadPane x:Name="pane3" Header="pane 3">
                    <TextBlock Text="pane 3 content" FontSize="30" />
                </telerikDocking:RadPane>
                <telerikDocking:RadPane x:Name="pane4" Header="pane 4" IsHidden="True">
                    <TextBlock Text="pane 4 content" FontSize="30" />
                </telerikDocking:RadPane>
            </telerikDocking:RadPaneGroup>
        </telerikDocking:RadSplitContainer>
 
        <telerikDocking:RadSplitContainer>
            <telerikDocking:RadPaneGroup>
                <telerikDocking:RadPane x:Name="pane5" Header="pane 5" IsPinned="False">
                    <TextBlock Text="pane 5 content" FontSize="30" />
                </telerikDocking:RadPane>
            </telerikDocking:RadPaneGroup>
        </telerikDocking:RadSplitContainer>
 
        <telerikDocking:RadSplitContainer InitialPosition="FloatingDockable">
            <telerikDocking:RadPaneGroup>
                <telerikDocking:RadPane x:Name="pane6" Header="pane 6" IsHidden="True">
                    <TextBlock Text="pane 6 content" FontSize="30" />
                </telerikDocking:RadPane>
            </telerikDocking:RadPaneGroup>
        </telerikDocking:RadSplitContainer>
    </telerikDocking:RadDocking>
</Grid>

As you can see in the Xaml, we will need to handle the ItemClick event of the RadMenu. Let's imagine we have a method that 'activates' a given pane called ActivatePane. In this case the ItemClick event handler of the RadMenu will look like this:
private void RadMenu_ItemClick(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    var item = (RadMenuItem)e.OriginalSource;
    var paneName = (string)item.Tag;
    var pane = this.docking.Panes.First(p => p.Name == paneName);
    this.Dispatcher.BeginInvoke(new Action( // Just wait for the menu to close.
        () => ActivatePane(pane)
    ));
}

Implementing the ActivatePane method will solve our task completely. There are some cases which we could include or exclude in solving the problem:
  • If the pane is visible, pinned and selected, we don't need to do anything else to activate it
  • If the pane is visible and pinned, but is not selected, we need to find its parent RadPaneGroup (we are sure that its parent is a RadPaneGroup, because the pane is pinned) and set its SelectedItem to the pane
  • If the pane is no pinned, we need to call its Focus method. This will force it to pop-up
  • If the pane is not visible, we should show it and perform all the above checks and actions
Here is the code that accomplishes this task:
private void ActivatePane(RadPane pane)
{
    if (pane.IsHidden)
    {
        pane.IsHidden = false;
    }
 
    if (!pane.IsPinned)
    {
        pane.Focus();
    }
    else
    {
        var parentGroup = (RadPaneGroup)pane.Parent;
        parentGroup.SelectedItem = pane;
        parentGroup.Focus();
    }
}

With this we are ready with our task. You can download the full demo from here. It contains two projects - one for Silverlight and one for WPF.
?
Email to a friend
Posted in: Docking Silverlight WPF

1 Comments

  • John Schroedl 28 Sep 2010
    This is very helpful. Thanks for taking the time to post it.

    John

Add comment

  1. Formatting options
       
     
    		 
    		 
     
       
  3. (optional, emails won't be shown on public pages)
  4. (optional)
Read more articles by XAML Team - or - read latest articles in Developer Tools
RSS Feed
Bloggers Archive Tags