如何在 WPF 中创建 Windows 8 风格的应用栏？

How to create Windows 8 style app bar in WPF?

提问by Jakob Lithner

I intended to create a Windows 8 Style App (Metro), but found out there is no support for using dual screen which is a demand for my app.

我打算创建一个 Windows 8 风格的应用程序 (Metro)，但发现不支持使用双屏，这是我的应用程序的需求。

Now I am redesigning my app as a desktop application in WPF. But I still like to mimic some nice design features from Windows 8 Apps.

现在我正在将我的应用程序重新设计为 WPF 中的桌面应用程序。但我仍然喜欢从 Windows 8 应用程序中模仿一些不错的设计功能。

One of the design features is the fly out bars typically used in a Windows 8 style app:

设计特点之一是通常在 Windows 8 风格应用程序中使用的弹出栏：

• Bottom App bar for commands
• Top Navigational bar
• Right Charm that is common for all apps

• 命令的底部应用栏
• 顶部导航栏
• 所有应用程序通用的正确魅力

The design they all have in common is a temporary flyout panel that is layered on top of the current window layout.

它们的共同设计是一个临时弹出面板，它位于当前窗口布局的顶部。

My question is: How can I create something similar in WPF?

我的问题是：如何在 WPF 中创建类似的东西？

I have no problem to create a main grid with a hidden bottom row that is made visible to display some common command buttons. But it would be nice to have it fly out on top of my standard layout, not squeeze it.

我可以创建一个带有隐藏底行的主网格，该行可见以显示一些常见的命令按钮。但是让它飞出我的标准布局之上会很好，而不是挤压它。

I know it is possible to open a new window on top of the current but that creates a bad code design and is hard to get nice looking. I would prefer to do it in the same window.

我知道可以在当前窗口之上打开一个新窗口，但这会造成糟糕的代码设计并且很难看起来很漂亮。我更愿意在同一个窗口中进行。

回答by Steoates

Cool question! I've actually done the charm bar fairly recently..

很酷的问题！我实际上最近做了魅力酒吧..

ideally what you need is something like

理想情况下，您需要的是

<Grid x:Name="LayoutRoot">

 <Grid x:Name="Overlay" Panel.ZIndex="1000" Visibility="Collapsed">
    <!-- This is where your slide out control is going to go -->
  </Grid>

  <!-- Use whatever layout you need -->
  <ContentControl x:Name="MainContent" />

</Grid>

Now rather than squeezing the content - the Overlay grid will be on top of it similar to the charm bar! all with XAML

现在而不是挤压内容 - 叠加网格将位于其顶部，类似于魅力栏！全部使用 XAML

If you have anymore questions about this, give me a shout!

如果您对此还有疑问，请给我留言！

Edit; my Charm implementation - feel free to use for inspriation!

编辑; 我的魅力实现 - 随意使用灵感！

public class SlidePanel : ContentControl
    {
        static SlidePanel()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(SlidePanel), new FrameworkPropertyMetadata(typeof(SlidePanel)));
        }

        public SlidePanel()
        {
            EventManager.RegisterClassHandler(typeof(SlidePanel), SlidePanel.MouseEnterEvent,
                                              new RoutedEventHandler(OnLocalMouseEnter));

            EventManager.RegisterClassHandler(typeof(SlidePanel), SlidePanel.MouseLeaveEvent,
                                              new RoutedEventHandler(OnLocalMouseLeave));
        }

        #region Mouse Handlers

        private static void OnLocalMouseEnter(object sender, RoutedEventArgs e)
        {
            SetExpanded(sender, true);
        }

        private static void OnLocalMouseLeave(object sender, RoutedEventArgs e)
        {
            SetExpanded(sender, false);

        }

        private static void SetExpanded(object sender, bool expanded)
        {
            SlidePanel panel = sender as SlidePanel;

            if (panel != null)
            {
                panel.IsExpanded = expanded;
            }
        }

        #endregion Mouse Handlers

        #region Panel Width

        public double PanelWidth
        {
            get { return (double)GetValue(PanelWidthProperty); }
            set { SetValue(PanelWidthProperty, value); }
        }

        // Using a DependencyProperty as the backing store for PanelWidth.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty PanelWidthProperty =
            DependencyProperty.Register("PanelWidth", typeof(double), typeof(SlidePanel), new UIPropertyMetadata(5.0));

        #endregion Panel Width

        #region Closed Width

        public double ClosedWidth
        {
            get { return (double)GetValue(ClosedWidthProperty); }
            set { SetValue(ClosedWidthProperty, value); }
        }

        // Using a DependencyProperty as the backing store for ClosedWidth.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ClosedWidthProperty =
            DependencyProperty.Register("ClosedWidth", typeof(double), typeof(SlidePanel), new UIPropertyMetadata(5.0, new PropertyChangedCallback(OnClosedWidthChange)));

        #endregion Closed Width

        #region Expanded Property

        public bool IsExpanded
        {
            get { return (bool)GetValue(IsExpandedProperty); }
            set { SetValue(IsExpandedProperty, value); }
        }

        // Using a DependencyProperty as the backing store for IsExpanded.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IsExpandedProperty =
            DependencyProperty.Register("IsExpanded", typeof(bool), typeof(SlidePanel), new UIPropertyMetadata(false, new PropertyChangedCallback(OnExpandedChanged)));


        #endregion Expanded Property

        #region Property Changes

        private static void OnExpandedChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (e.NewValue == e.OldValue)
                return;

            SlidePanel panel = d as SlidePanel;

            if (panel == null)
                return;

            bool newVal = (bool)e.NewValue;

            panel.IsExpanded = newVal;

            bool expanded = (bool)panel.GetValue(IsExpandedProperty);

            Storyboard widthAnimation = AnimationHelper.CreateDoubleAnimation<SlidePanel>(panel, expanded,
                (p, a) =>
                {
                    a.From = (double)p.GetValue(SlidePanel.ClosedWidthProperty);
                    a.To = (double)p.GetValue(SlidePanel.PanelWidthProperty);
                },
                (p, a) =>
                {
                    a.From = (double)p.GetValue(SlidePanel.WidthProperty);
                    a.To = (double)p.GetValue(SlidePanel.ClosedWidthProperty);
                }, new TimeSpan(0, 0, 0, 0, 300), WidthProperty);

            Timeline opacity = AnimationHelper.DoubleAnimation(0.0, 1.0, expanded,
                                                                      new TimeSpan(0, 0, 0, 0, 300), OpacityProperty);

            Storyboard.SetTargetName(opacity, panel.Name);

            Storyboard.SetTargetProperty(opacity, new PropertyPath(OpacityProperty));

            widthAnimation.Children.Add(opacity);

            widthAnimation.Begin(panel);

        }

        private static void OnClosedWidthChange(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            SlidePanel panel = d as SlidePanel;

            if (panel != null)
                panel.Width = (double)e.NewValue;
        }

        #endregion Property Changes
    }

A little trick I found was to have the opacity set to 0 when it wasnt expanded but set the width to 10, this then allows the user to put the mouse at the side of the screen and then it will appear after a second or so.. cheers.

我发现的一个小技巧是在未展开时将不透明度设置为 0，但将宽度设置为 10，然后允许用户将鼠标放在屏幕的一侧，然后它会在大约一秒钟后出现。 . 欢呼。

Edit - As requested.. AnimationHelper.

编辑 - 根据要求.. AnimationHelper。

  public class AnimationHelper
    {
        public static Timeline DoubleAnimation(double from, double to, bool modifier, TimeSpan duration, DependencyProperty property)
        {
            DoubleAnimation animation = new DoubleAnimation();

            if (modifier)
            {
                animation.From = from;
                animation.To = to;

            }
            else
            {
                animation.To = from;
                animation.From = to;
            }

            animation.Duration = new Duration(duration);

            return animation;
        }

        public static Storyboard CreateDoubleAnimation<T>(T control, bool modifier, double from, double to, TimeSpan duration, DependencyProperty property) where T : Control
        {
            return
             AnimationHelper.CreateDoubleAnimation<T>(control, modifier,
                (p, a) =>
                {
                    a.From = from;
                    a.To = to;
                },
                (p, a) =>
                {
                    a.From = to;
                    a.To = from;
                }, duration, property);
        }

        public static Storyboard CreateDoubleAnimation<T>(T control, bool modifier, Action<T, DoubleAnimation> onTrue, Action<T, DoubleAnimation> onFalse, TimeSpan duration, DependencyProperty property) where T : Control
        {
            if (control == null)
                throw new ArgumentNullException("control");

            DoubleAnimation panelAnimation = new DoubleAnimation();

            if (modifier)
            {
                if (onTrue != null)
                    onTrue.Invoke(control, panelAnimation);

            }
            else
            {
                if (onFalse != null)
                    onFalse.Invoke(control, panelAnimation);
            }


            panelAnimation.Duration = new Duration(duration);

            Storyboard sb = new Storyboard();

            Storyboard.SetTargetName(panelAnimation, control.Name);

            Storyboard.SetTargetProperty(panelAnimation, new PropertyPath(property));

            sb.Children.Add(panelAnimation);

            return sb;
        }
    }