Flyout focus enhancement

MahApps.Metro/Controls/Flyout.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Linq;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Input;
@@ -15,6 +16,7 @@ namespace MahApps.Metro.Controls
     /// </summary>
     [TemplatePart(Name = "PART_BackButton", Type = typeof(Button))]
     [TemplatePart(Name = "PART_Header", Type = typeof(ContentPresenter))]
+    [TemplatePart(Name = "PART_Content", Type = typeof(ContentPresenter))]
     public class Flyout : ContentControl
     {
         /// <summary>
@@ -57,6 +59,8 @@ public event RoutedEventHandler ClosingFinished
         public static readonly DependencyProperty CloseButtonVisibilityProperty = DependencyProperty.Register("CloseButtonVisibility", typeof(Visibility), typeof(Flyout), new FrameworkPropertyMetadata(Visibility.Visible));
         public static readonly DependencyProperty TitleVisibilityProperty = DependencyProperty.Register("TitleVisibility", typeof(Visibility), typeof(Flyout), new FrameworkPropertyMetadata(Visibility.Visible));
         public static readonly DependencyProperty AreAnimationsEnabledProperty = DependencyProperty.Register("AreAnimationsEnabled", typeof(bool), typeof(Flyout), new PropertyMetadata(true));
+        public static readonly DependencyProperty FocusedElementProperty = DependencyProperty.Register("FocusedElement", typeof(FrameworkElement), typeof(Flyout), new UIPropertyMetadata(null));
+        public static readonly DependencyProperty AllowFocusElementProperty = DependencyProperty.Register("AllowFocusElement", typeof(bool), typeof(Flyout), new PropertyMetadata(true));
 
         internal PropertyChangeNotifier IsOpenPropertyChangeNotifier { get; set; }
         internal PropertyChangeNotifier ThemePropertyChangeNotifier { get; set; }
@@ -185,6 +189,24 @@ public FlyoutTheme Theme
             set { SetValue(ThemeProperty, value); }
         }
 
+        /// <summary>
+        /// Gets or sets the focused element.
+        /// </summary>
+        public FrameworkElement FocusedElement
+        {
+            get { return (FrameworkElement)this.GetValue(FocusedElementProperty); }
+            set { this.SetValue(FocusedElementProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether the flyout should try focus an element.
+        /// </summary>
+        public bool AllowFocusElement
+        {
+            get { return (bool)this.GetValue(AllowFocusElementProperty); }
+            set { this.SetValue(AllowFocusElementProperty, value); }
+        }
+
         public Flyout()
         {
             this.Loaded += (sender, args) => UpdateFlyoutTheme();
@@ -315,9 +337,12 @@ private static void IsOpenedChanged(DependencyObject dependencyObject, Dependenc
                             }
                             flyout.Visibility = Visibility.Visible;
                             flyout.ApplyAnimation(flyout.Position, flyout.AnimateOpacity);
+                            flyout.TryFocusElement();
                         }
                         else
                         {
+                            // focus the Flyout itself to avoid nasty FocusVisual painting (it's visible until the Flyout is closed)
+                            flyout.Focus();
                             if (flyout.hideStoryboard != null)
                             {
                                 flyout.hideStoryboard.Completed += flyout.HideStoryboard_Completed;
@@ -334,9 +359,12 @@ private static void IsOpenedChanged(DependencyObject dependencyObject, Dependenc
                         if ((bool)e.NewValue)
                         {
                             flyout.Visibility = Visibility.Visible;
+                            flyout.TryFocusElement();
                         }
                         else
                         {
+                            // focus the Flyout itself to avoid nasty FocusVisual painting (it's visible until the Flyout is closed)
+                            flyout.Focus();
                             flyout.Hide();
                         }
                         VisualStateManager.GoToState(flyout, (bool)e.NewValue == false ? "HideDirect" : "ShowDirect", true);
@@ -364,6 +392,27 @@ private void Hide()
             this.RaiseEvent(new RoutedEventArgs(ClosingFinishedEvent));
         }
 
+        private void TryFocusElement()
+        {
+            if (this.AllowFocusElement)
+            {
+                // first focus itself
+                this.Focus();
+
+                if (this.FocusedElement != null)
+                {
+                    this.FocusedElement.Focus();
+                }
+                else if (this.PART_Content == null || !this.PART_Content.MoveFocus(new TraversalRequest(FocusNavigationDirection.First)))
+                {
+                    if (this.PART_Header != null)
+                    {
+                        this.PART_Header.MoveFocus(new TraversalRequest(FocusNavigationDirection.First));
+                    }
+                }
+            }
+        }
+
         private static void ThemeChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
         {
             var flyout = (Flyout)dependencyObject;
@@ -409,6 +458,8 @@ static Flyout()
         SplineDoubleKeyFrame showFrame;
         SplineDoubleKeyFrame showFrameY;
         SplineDoubleKeyFrame fadeOutFrame;
+        ContentPresenter PART_Header;
+        ContentPresenter PART_Content;
 
         public override void OnApplyTemplate()
         {
@@ -418,6 +469,9 @@ public override void OnApplyTemplate()
             if (root == null)
                 return;
 
+            PART_Header = (ContentPresenter)GetTemplateChild("PART_Header");
+            PART_Content = (ContentPresenter)GetTemplateChild("PART_Content");
+
             hideStoryboard = (Storyboard)GetTemplateChild("HideStoryboard");
             hideFrame = (SplineDoubleKeyFrame)GetTemplateChild("hideFrame");
             hideFrameY = (SplineDoubleKeyFrame)GetTemplateChild("hideFrameY");

MahApps.Metro/Themes/Flyout.xaml

@@ -220,7 +220,8 @@
                     </VisualState>
                 </VisualStateGroup>
             </VisualStateManager.VisualStateGroups>
-            <DockPanel>
+            <DockPanel FocusVisualStyle="{x:Null}"
+                       Focusable="False">
                 <ContentPresenter x:Name="PART_Header"
                                   DockPanel.Dock="Top"
                                   ContentSource="Header"
@@ -255,8 +256,12 @@
     <Style TargetType="{x:Type Controls:Flyout}">
         <Setter Property="Visibility"
                 Value="Hidden" />
+        <Setter Property="KeyboardNavigation.ControlTabNavigation"
+                Value="Cycle" />
         <Setter Property="KeyboardNavigation.TabNavigation"
                 Value="Cycle" />
+        <Setter Property="KeyboardNavigation.DirectionalNavigation"
+                Value="Cycle" />
         <Setter Property="VerticalAlignment"
                 Value="Stretch" />
         <Setter Property="VerticalContentAlignment"

samples/MetroDemo/ExampleWindows/FlyoutDemo.xaml

@@ -91,7 +91,8 @@
                              Margin="100 0 0 0"
                              Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Controls:MetroWindow}, Path=ActualWidth}"
                              Header="Settings"
-                             Position="Right">
+                             Position="Right"
+                             FocusedElement="{Binding ElementName=firstTB}">
                 <Grid Margin="10">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />

samples/MetroDemo/ExampleWindows/FlyoutDemo.xaml.cs

@@ -15,7 +15,6 @@ public FlyoutDemo()
         {
             this.DataContext = new MainWindowViewModel();
             this.InitializeComponent();
-            settingsFlyout.IsOpenChanged += (sender, args) => firstTB.Focus();
             this.Closing += (s, e) =>
                 {
                     if (_hideOnClose)