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

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

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

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

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

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

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

我可以毫无问题地创建一个带有隐藏底行的主网格，该网格可以显示一些常见的命令按钮。但如果让它飞到我的标准布局之上，而不是挤压它，那就太好了。

我知道可以在当前窗口之上打开一个新窗口，但这会产生糟糕的代码设计并且很难变得好看。我更愿意在同一个窗口中执行此操作。

很酷的问题！事实上我最近刚刚完成了魅力吧..

理想情况下你需要的是类似的东西

<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>

现在，不再挤压内容 - 覆盖网格将位于其顶部，类似于超级按钮栏！全部使用 XAML

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

编辑;我的 Charm 实现 - 请随意使用以获得灵感！

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
    }

我发现的一个小技巧是在未展开时将不透明度设置为 0，但将宽度设置为 10，这样用户就可以将鼠标放在屏幕一侧，然后它会在一秒钟左右后出现。 。 干杯。

编辑 - 根据要求..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;
        }
    }