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.

About the Author

Valeri Hristov

Team Lead,
Platform Team

Related Posts

Comments

Comments are disabled in preview mode.