Inconsistent radpane flyout and focus behaviour

[Alex]

Hello,

I have put together a small sample application which is a cut down version of my main application, both the sample application and main app are suffering from similar inconsistent flyout pane behaviour.

If I click on the collapsed "Search" pane and then one of the grid's hyperlinks. It collapses immediately - this is a show stopper in my main application for when the search pane is collapsed.

If I mouse hover on the search and don't click - I can click then click on the grid hyperlinks correctly - this is the same behaviour I want when the user clicks the search button.

These are the main issues I'm facing - I can live with the behaviour presented by the toolbar and the datagrid context menu but ideally I want the pane to stay expanded while I interact with the context menu's

Any advice would be appreciated.

 

MainWindow.xaml:

<Window x:Class="DockHidingIssue.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:dockHidingIssue="clr-namespace:DockHidingIssue"
        WindowStartupLocation="CenterScreen"
        mc:Ignorable="d"
        Title="MainWindow" Height="768" Width="1024" d:DataContext="{d:DesignInstance dockHidingIssue:MainWindow}">
    <Window.Resources>

        <MenuItem x:Key="one" Header="First" Click="One_OnClick" />
        <MenuItem x:Key="two" Header="Second" Click="Two_OnClick" />
        <MenuItem x:Key="three" Header="Third" Click="Three_OnClick" />

        <ContextMenu x:Key="GridContextMenu">
            <MenuItem>Click me</MenuItem>
        </ContextMenu>
    </Window.Resources>
    <Grid>
        <telerik:RadDocking Background="White" x:Name="MainDock"
                            telerik:RadDocking.SerializationTag="ParentDockContainer">
            <telerik:RadDocking.DocumentHost>

                <telerik:RadSplitContainer telerik:RadDocking.SerializationTag="HomePageContainer">
                    <telerik:RadPaneGroup BorderBrush="{x:Null}" BorderThickness="0"
                                          telerik:RadDocking.SerializationTag="HomePageGroup">
                        <telerik:RadDocumentPane CanFloat="False" Visibility="Collapsed" CanUserClose="False"
                                                 telerik:RadDocking.SerializationTag="MainPane">
                            <WebBrowser x:Name="Browser" />
                        </telerik:RadDocumentPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking.DocumentHost>

            <telerik:RadSplitContainer InitialPosition="DockedBottom"
                                       telerik:RadDocking.SerializationTag="SearchContainer">
                <telerik:RadPaneGroup telerik:RadDocking.SerializationTag="SearchGroup">
                    <telerik:RadPane Header="Search" x:Name="SearchRadPane"
                                     telerik:RadDocking.SerializationTag="SearchPane"
                                     CanUserPin="True" IsPinned="False" MouseEnter="SearchRadPane_OnMouseEnter">


                        <TabControl TabStripPlacement="Bottom">
                            <TabItem Header="Search">
                                <StackPanel>
                                    <ToolBar x:Name="tbSelectorControl" ToolBarTray.IsLocked="True"
                                             KeyboardNavigation.TabNavigation="Continue"
                                             VerticalAlignment="Center" VerticalContentAlignment="Center">
                                        <Menu TabIndex="0" SnapsToDevicePixels="True" Background="Transparent">
                                            <Menu.Resources>
                                                <Style TargetType="MenuItem"
                                                       BasedOn="{StaticResource {x:Type MenuItem}}">
                                                    <Setter Property="Command"
                                                            Value="{Binding Path=Command, FallbackValue={x:Null}}" />
                                                </Style>
                                            </Menu.Resources>
                                            <MenuItem x:Name="mnuSelected" SubmenuOpened="MnuSelected_OnSubmenuOpened">
                                                <MenuItem.Header>
                                                    <StackPanel Orientation="Horizontal" Height="30">
                                                        <Label x:Name="txtSelectedFinder" Content="Selected Finder"
                                                               Height="30" />
                                                        <Image Height="8" Width="8"
                                                               Margin="8,0,0,0" />
                                                    </StackPanel>
                                                </MenuItem.Header>

                                                <MenuItem Header="Test" />
                                            </MenuItem>
                                        </Menu>
                                        <Separator />
                                    </ToolBar>
                                    <DataGrid ItemsSource="{Binding Data}" AutoGenerateColumns="False"
                                              ContextMenu="{StaticResource GridContextMenu}"
                                              ContextMenuOpening="FrameworkElement_OnContextMenuOpening">
                                        <DataGrid.Columns>
                                            <DataGridTextColumn Header="Name" />

                                            <DataGridHyperlinkColumn Header="Link" Binding="{Binding}" >

                                                <DataGridHyperlinkColumn.ElementStyle>
                                                    <Style>
                                                        <EventSetter Event="Hyperlink.Click" Handler="Hyperlink_Click" />
                                                    </Style>
                                                </DataGridHyperlinkColumn.ElementStyle>
                                            </DataGridHyperlinkColumn>
                                        </DataGrid.Columns>

                                    </DataGrid>
                                </StackPanel>
                            </TabItem>
                            <TabItem Header="Tasks">
                                <Grid x:Name="MyTasks" />
                            </TabItem>
                        </TabControl>
                    </telerik:RadPane>
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>
        </telerik:RadDocking>
    </Grid>
</Window>

 

Code behind:

 

using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;

namespace DockHidingIssue
{
    /// <summary>
    ///     Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private IEnumerable<string> _data;

        public MainWindow()
        {
            InitializeComponent();

            DataContext = this;

            Data = new List<string>
            {
                @"http://www.google.com",
                @"http://www.telerik.com"
            };
        }


        public IEnumerable<string> Data
        {
            get { return _data; }
            set
            {
                _data = value;
                OnPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void FrameworkElement_OnContextMenuOpening(object sender, ContextMenuEventArgs e)
        {
            (sender as FrameworkElement).Focus();
        }

        private void One_OnClick(object sender, RoutedEventArgs e)
        {
            Data = new List<string>
            {
                @"http://www.reddit.com",
                @"http://www.yahoo.com"
            };
        }

        private void Two_OnClick(object sender, RoutedEventArgs e)
        {
            Data = new List<string>
            {
                @"http://www.cnn.com",
                @"http://www.facebook.com"
            };
        }

        private void Three_OnClick(object sender, RoutedEventArgs e)
        {
            Data = new List<string>
            {
                @"http://www.rt.com",
                @"http://www.bbc.com"
            };
        }

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private void MnuSelected_OnSubmenuOpened(object sender, RoutedEventArgs e)
        {
            mnuSelected.Items.Clear();
            mnuSelected.Items.Add(Resources["one"] as MenuItem);
            mnuSelected.Items.Add(Resources["two"] as MenuItem);
            mnuSelected.Items.Add(Resources["three"] as MenuItem);
        }

        private void SearchRadPane_OnMouseEnter(object sender, MouseEventArgs e)
        {
            SearchRadPane.Focus();
        }

        private void Hyperlink_Click(object sender, RoutedEventArgs e)
        {
            var link = e.OriginalSource as Hyperlink;

            if (link != null)
                Browser.Navigate(link.NavigateUri.OriginalString);
        }
    }
}

 

Thanks,

 

Alex

[Nasko]

Hello Alex,

The observed by you behavior is caused by the built-in FlyoutBehavior of RadDocking and it is an expected one with its current implementation. However, you could override that default FlyoutBehavior and prevent the Pane from closing when the hyperlink gets pressed. Please, check the following forum thread where you could find a detailed information how the behavior should be overridden:
http://www.telerik.com/forums/hyperlinks-inside-autohidearea-sometimes-doesn't-work

We have also implemented the described in the forum approach in your project - please, check the attached sample that demonstrates it.

Hope this helps.

Regards,
Nasko
Telerik by Progress

[Alex]

Horrible necro but thanks to your response I was able to resolve my issue. Thanks.