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

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

<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

如果您对此有任何疑问,请给我一个大喊！

编辑;我的魅力实现 – 随意使用激励！

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,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,etc...
        public static readonly DependencyProperty ClosedWidthProperty =
            DependencyProperty.Register("ClosedWidth",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,etc...
        public static readonly DependencyProperty IsExpandedProperty =
            DependencyProperty.Register("IsExpanded",typeof(bool),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);
                },a) =>
                {
                    a.From = (double)p.GetValue(SlidePanel.WidthProperty);
                    a.To = (double)p.GetValue(SlidePanel.ClosedWidthProperty);
                },new TimeSpan(0,300),WidthProperty);

            Timeline opacity = AnimationHelper.DoubleAnimation(0.0,1.0,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,double from,DependencyProperty property) where T : Control
        {
            return
             AnimationHelper.CreateDoubleAnimation<T>(control,modifier,a) =>
                {
                    a.From = from;
                    a.To = to;
                },a) =>
                {
                    a.From = to;
                    a.To = from;
                },duration,property);
        }

        public static Storyboard CreateDoubleAnimation<T>(T control,Action<T,DoubleAnimation> onTrue,DoubleAnimation> onFalse,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;
        }
    }