How to activate a pane in the Telerik Docking control for WPF and Silverlight?
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
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
Platform Team
Related Posts
Comments
Comments are disabled in preview mode.