C# Win RT应用程序中的Windows Phone应用程序栏

我想用XAML创建一个如下图所示的应用程序栏，如果可能的话，可以实现吗？此外，我还想知道，当用户轻触或单击3个点时，应用程序栏是否可能打开：

XAML

<Page
    x:Name="pageRoot"
    x:Class="Exits_Expert_London_Lite.Lines_and_Stations.WC.Bank__WC_"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Exits_Expert_London_Lite.Lines_and_Stations.WC"
    xmlns:common="using:Exits_Expert_London_Lite.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:q42controls="using:Q42.WinRT.Controls"
    mc:Ignorable="d">

    <Page.Resources>
        <x:String x:Key="ChevronGlyph">&#xE26B;</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page.
    -->
    <Grid Background="Black">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>

        <Grid Name="CustomAppBarRoot" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Loaded="CustomAppBarRoot_OnLoaded"
          ManipulationMode="TranslateY"
          ManipulationDelta="CustomAppBarRoot_OnManipulationDelta"
          ManipulationCompleted="CustomAppBarRoot_OnManipulationCompleted"
          Tapped="CustomAppBarRoot_OnTapped">
            <Grid.RenderTransform>
                <TranslateTransform X="0" Y="0"/>
            </Grid.RenderTransform>

            <Grid.Background>
                <SolidColorBrush Color="Black" Opacity="0.5"></SolidColorBrush>
            </Grid.Background>

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock Name="DotsTextBlock" FontSize="28" Text="..." HorizontalAlignment="Right" VerticalAlignment="Top"
                    Margin="0 0 15 0" Tapped="DotsTextBlock_OnTapped" Width="50" Height="50" TextAlignment="Center">
                <TextBlock.RenderTransform>
                    <TranslateTransform Y="0" X="11"/>
                </TextBlock.RenderTransform>
            </TextBlock>

            <StackPanel Name="ButtonsStackPanel" Grid.Row="1" Orientation="Horizontal">
                <AppBarButton Label="tfg" Icon="Add"/>
                <AppBarButton Label="tfg" Icon="Add"/>
            </StackPanel>
        </Grid>

        <Hub>
            <Hub.Header>
                <!-- Back button and page title -->
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="80"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Button  x:Name="backButton" Margin="-1,-1,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
                    <TextBlock x:Name="pageTitle" Text="Bank" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top" Foreground="#FF66CCCC"/>
                </Grid>
            </Hub.Header>

            <HubSection Width="800" Padding="40,50,0,0">
                <HubSection.Header>
                    <StackPanel>
                        <TextBlock Text="hub section 1" Style="{StaticResource HeaderTextBlockStyle}" Foreground="#FF66CCCC" Margin="0,0,0,5"/>
                    </StackPanel>
                </HubSection.Header>
                <DataTemplate>
                    <Grid>
                        <StackPanel>
                            <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Margin="0,0,0,5" TextWrapping="Wrap">
                                <Run Text="Hello World" Foreground="#FFFFCC00"/>
                            </TextBlock>

                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </HubSection>
        </Hub>

    </Grid>
</Page>

；

C#代码隐藏

using Exits_Expert_London_Lite.Common;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;

namespace Exits_Expert_London_Lite.Lines_and_Stations.WC
{
    /// <summary>
    /// A page that displays a grouped collection of items.
    /// </summary>
    public sealed partial class Bank__WC_ : Page
    {
        private NavigationHelper navigationHelper;
        private ObservableDictionary defaultViewModel = new ObservableDictionary();

        /// <summary>
        /// This can be changed to a strongly typed view model.
        /// </summary>
        public ObservableDictionary DefaultViewModel
        {
            get { return this.defaultViewModel; }
        }

        /// <summary>
        /// NavigationHelper is used on each page to aid in navigation and 
        /// process lifetime management
        /// </summary>
        public NavigationHelper NavigationHelper
        {
            get { return this.navigationHelper; }
        }

        public Bank__WC_()
        {
            this.InitializeComponent();
            this.navigationHelper = new NavigationHelper(this);
            this.navigationHelper.LoadState += navigationHelper_LoadState;
            this.Tapped += Page_OnTapped;
        }

        #region custom app bar

        private Storyboard hideCustomAppBarStoryboard;
        private Storyboard showCustomAppBarStoryboard;
        private Size appBarSize;
        private Size appBarButtonsSize;
        private bool isAppBarShown = false;

        private void CustomAppBarRoot_OnLoaded(object sender, RoutedEventArgs e)
        {
            appBarSize = new Size(CustomAppBarRoot.ActualWidth, CustomAppBarRoot.ActualHeight);
            appBarButtonsSize = new Size(ButtonsStackPanel.ActualWidth, ButtonsStackPanel.ActualHeight);
            InitializeStoryboards();

            HideCustomAppBar();
        }

        private void ShowCustomAppBar()
        {
            isAppBarShown = true;
            showCustomAppBarStoryboard.Begin();
        }

        private void HideCustomAppBar()
        {
            isAppBarShown = false;
            hideCustomAppBarStoryboard.Begin();
        }

        private void DotsTextBlock_OnTapped(object sender, TappedRoutedEventArgs e)
        {
            if (isAppBarShown)
                HideCustomAppBar();
            else
                ShowCustomAppBar();
        }

        private void Page_OnTapped(object sender, TappedRoutedEventArgs tappedRoutedEventArgs)
        {
            if (isAppBarShown)
                HideCustomAppBar();
        }

        private void InitializeStoryboards()
        {
            hideCustomAppBarStoryboard = new Storyboard();
            showCustomAppBarStoryboard = new Storyboard();

            var showDoubleAnimation = new DoubleAnimation()
            {
                EasingFunction = new CircleEase() { EasingMode = EasingMode.EaseInOut },
                To = 0,
                Duration = new Duration(TimeSpan.FromMilliseconds(200))
            };
            var hideDoubleAnimation = new DoubleAnimation()
            {
                EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseInOut },
                To = appBarButtonsSize.Height,
                Duration = new Duration(TimeSpan.FromMilliseconds(200))
            };
            hideCustomAppBarStoryboard.Children.Add(hideDoubleAnimation);
            showCustomAppBarStoryboard.Children.Add(showDoubleAnimation);

            Storyboard.SetTarget(hideCustomAppBarStoryboard, CustomAppBarRoot);
            Storyboard.SetTarget(showCustomAppBarStoryboard, CustomAppBarRoot);
            Storyboard.SetTargetProperty(showCustomAppBarStoryboard, "(UIElement.RenderTransform).(TranslateTransform.Y)");
            Storyboard.SetTargetProperty(hideCustomAppBarStoryboard, "(UIElement.RenderTransform).(TranslateTransform.Y)");
        }

        #endregion

        private void CustomAppBarRoot_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            var translateTransform = (CustomAppBarRoot.RenderTransform as TranslateTransform);

            double newY = e.Delta.Translation.Y + translateTransform.Y;
            translateTransform.Y = Math.Max(0, Math.Min(newY, appBarButtonsSize.Height));
        }

        private void CustomAppBarRoot_OnManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
        {
            if (!isAppBarShown)
                ShowCustomAppBar();
            else
                HideCustomAppBar();
        }

        /// <summary>
        /// Populates the page with content passed during navigation.  Any saved state is also
        /// provided when recreating a page from a prior session.
        /// </summary>
        /// <param name="sender">
        /// The source of the event; typically <see cref="NavigationHelper"/>
        /// </param>
        /// <param name="e">Event data that provides both the navigation parameter passed to
        /// <see cref="Frame.Navigate(Type, Object)"/> when this page was initially requested and
        /// a dictionary of state preserved by this page during an earlier
        /// session.  The state will be null the first time a page is visited.</param>
        private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
        {
            // TODO: Assign a collection of bindable groups to this.DefaultViewModel["Groups"]
        }

        #region NavigationHelper registration

        /// The methods provided in this section are simply used to allow
        /// NavigationHelper to respond to the page's navigation methods.
        /// 
        /// Page specific logic should be placed in event handlers for the  
        /// <see cref="GridCS.Common.NavigationHelper.LoadState"/>
        /// and <see cref="GridCS.Common.NavigationHelper.SaveState"/>.
        /// The navigation parameter is available in the LoadState method 
        /// in addition to page state preserved during an earlier session.

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            navigationHelper.OnNavigatedTo(e);
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            navigationHelper.OnNavigatedFrom(e);
        }

        #endregion
    }
}

使用Exits\u Expert\u London\u Lite.Common；
使用制度；
使用System.Collections.Generic；
使用System.IO；
使用System.Linq；
使用Windows基金会；
使用Windows。
使用Windows.UI.Xaml；
使用Windows.UI.Xaml.Controls；
使用Windows.UI.Xaml.Controls.Primitives；
使用Windows.UI.Xaml.Data；
使用Windows.UI.Xaml.Input；
使用Windows.UI.Xaml.Media；
使用Windows.UI.Xaml.Media.Animation；
使用Windows.UI.Xaml.Navigation；
命名空间退出\u Expert\u London\u Lite.Lines\u和\u Stations.WC
{
/// 
///显示项目分组集合的页面。
/// 
公共密封部分类银行：第页
{
私人导航助手导航助手；
private observedictionary defaultViewModel=new observedictionary（）；
/// 
///可以将其更改为强类型视图模型。
/// 
公共可观测默认视图模型
{
获取{返回this.defaultViewModel；}
}
/// 
///NavigationHelper在每个页面上用于帮助导航和
///过程生命周期管理
/// 
公共导航帮助器导航帮助器
{
获取{返回this.navigationHelper；}
}
公共银行
{
this.InitializeComponent（）；
this.navigationHelper=新的navigationHelper（this）；
this.navigationHelper.LoadState+=navigationHelper\u LoadState；
this.Tapped+=Page_OnTapped；
}
#区域自定义应用程序栏
私有故事板隐藏程序；
私人故事板ShowCustomAppBar故事板；
私人规模；
私有大小AppBarButtonSize；
private bool isappbarshow=false；
私有void CustomAppBarRoot\u已加载（对象发送方，RoutedEventArgs e）
{
appBarSize=新大小（CustomAppBarRoot.ActualWidth、CustomAppBarRoot.ActualHeight）；
AppBarButtonSize=新尺寸（ButtonStackPanel.ActualWidth、ButtonStackPanel.ActualHeight）；
初始化存储板（）；
hideucotomappbar（）；
}
私有void ShowCustomAppBar（）
{
IsAppBarShowed=true；
showCustomAppBarStoryboard.Begin（）；
}
私有void HideCustomAppBar（）
{
IsAppBarShowed=false；
hideCustomAppBarStoryboard.Begin（）；
}
私有void DotsTextBlock_OnTapped（对象发送方，tappedroutedventargs e）
{
如果（如图所示）
hideucotomappbar（）；
其他的
ShowCustomAppBar（）；
}
私有无效页\u OnTapped（对象发送方，TappedRoutedEventArgs TappedRoutedEventArgs）
{
如果（如图所示）
hideucotomappbar（）；
}
私有无效初始值创业板（）
{
hideCustomAppBarStoryboard=新故事板（）；
showCustomAppBarStoryboard=新故事板（）；
var showDoubleAnimation=新的DoubleAnimation（）
{
EasingFunction=new CircleEase（）{EasingMode=EasingMode.EaseInOut}，
To=0，
持续时间=新的持续时间（时间跨度从毫秒（200））
};
var hideDoubleAnimation=new DoubleAnimation（）
{
EasingFunction=new（）{EasingMode=EasingMode.EaseInOut}，
To=AppBarButtonSize.Height，
持续时间=新的持续时间（时间跨度从毫秒（200））
};
hideCustomAppBarStoryboard.Children.Add（hideDoubleAnimation）；
showCustomAppBarStoryboard.Children.Add（showDoubleAnimation）；
故事板.SetTarget（hideCustomAppBarStoryboard，CustomAppBarRoot）；
Storyboard.SetTarget（showCustomAppBarStoryboard，CustomAppBarRoot）；
Storyboard.SetTargetProperty（showCustomAppBarStoryboard，“（UIElement.RenderTransform）。（TranslateTransform.Y）”；
Storyboard.SetTargetProperty（hideCustomAppBarStoryboard，”（UIElement.RenderTransform）。（TranslateTransform.Y）”；
}
#端区
私有void CustomAppBarRoot_OnManipulationDelta（对象发送方，操纵DeltaRouteDeventargs e）
{
var translateTransform=（CustomAppBarRoot.RenderTransform作为translateTransform）；
双newY=e.Delta.Translation.Y+translateTransform.Y；
translateTransform.Y=Math.Max（0，Math.Min（newY，AppBarButtonSize.Height））；
}
私有void CustomAppBarRoot\u OnManipulationCompleted（对象发送方，ManipulationCompletedRoutedEventA
<Page
x:Class="CustomAppBar.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CustomAppBar"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">


    <Grid Name="CustomAppBarRoot" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Loaded="CustomAppBarRoot_OnLoaded"
          ManipulationMode="TranslateY"
          ManipulationDelta="CustomAppBarRoot_OnManipulationDelta"
          ManipulationCompleted="CustomAppBarRoot_OnManipulationCompleted"
          Tapped="CustomAppBarRoot_OnTapped">
        <Grid.RenderTransform>
            <TranslateTransform X="0" Y="0"/>
        </Grid.RenderTransform>

        <Grid.Background>
            <SolidColorBrush Color="Black" Opacity="0.5"></SolidColorBrush>
        </Grid.Background>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Name="DotsTextBlock" FontSize="28" Text="..." HorizontalAlignment="Right" VerticalAlignment="Top"
                    Margin="0 0 15 0" Tapped="DotsTextBlock_OnTapped" Width="50" Height="50" TextAlignment="Center">
            <TextBlock.RenderTransform>
                <TranslateTransform Y="0" X="11"/>
            </TextBlock.RenderTransform>
        </TextBlock>

        <StackPanel Name="ButtonsStackPanel" Grid.Row="1" Orientation="Horizontal">
            <AppBarButton Label="tfg" Icon="Add"/>
            <AppBarButton Label="tfg" Icon="Add"/>
        </StackPanel>

    </Grid>
</Grid>

   public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        this.Tapped += Page_OnTapped;
    }

    private void Page_OnTapped(object sender, TappedRoutedEventArgs tappedRoutedEventArgs)
    {
        if ( isAppBarShown )
            HideCustomAppBar();
    }

    #region custom app bar

    private Storyboard hideCustomAppBarStoryboard;
    private Storyboard showCustomAppBarStoryboard;
    private Size appBarSize;
    private Size appBarButtonsSize;
    private bool isAppBarShown = true;

    private void CustomAppBarRoot_OnLoaded(object sender, RoutedEventArgs e)
    {
        appBarSize = new Size(CustomAppBarRoot.ActualWidth, CustomAppBarRoot.ActualHeight);
        appBarButtonsSize = new Size(ButtonsStackPanel.ActualWidth, ButtonsStackPanel.ActualHeight);
        InitializeStoryboards();

        HideCustomAppBar();
    }

    private void ShowCustomAppBar()
    {
        isAppBarShown = true;
        showCustomAppBarStoryboard.Begin();
    }

    private void HideCustomAppBar()
    {
        isAppBarShown = false;
        hideCustomAppBarStoryboard.Begin();
    }

    private void DotsTextBlock_OnTapped(object sender, TappedRoutedEventArgs e)
    {
        if (isAppBarShown)
            HideCustomAppBar();
        else
            ShowCustomAppBar();
    }

    private void InitializeStoryboards()
    {
        hideCustomAppBarStoryboard = new Storyboard();
        showCustomAppBarStoryboard = new Storyboard();

        var showDoubleAnimation = new DoubleAnimation()
        {
            EasingFunction = new CircleEase() {EasingMode = EasingMode.EaseInOut},
            To = 0,
            Duration = new Duration(TimeSpan.FromMilliseconds(200))
        };
        var hideDoubleAnimation = new DoubleAnimation()
        {
            EasingFunction = new CubicEase() {EasingMode = EasingMode.EaseInOut},
            To = appBarButtonsSize.Height,
            Duration = new Duration(TimeSpan.FromMilliseconds(200))
        };
        hideCustomAppBarStoryboard.Children.Add(hideDoubleAnimation);
        showCustomAppBarStoryboard.Children.Add(showDoubleAnimation);

        Storyboard.SetTarget(hideCustomAppBarStoryboard, CustomAppBarRoot);
        Storyboard.SetTarget(showCustomAppBarStoryboard, CustomAppBarRoot);
        Storyboard.SetTargetProperty(showCustomAppBarStoryboard, "(UIElement.RenderTransform).(TranslateTransform.Y)");
        Storyboard.SetTargetProperty(hideCustomAppBarStoryboard, "(UIElement.RenderTransform).(TranslateTransform.Y)");
    }

    #endregion

    private void CustomAppBarRoot_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        var translateTransform = (CustomAppBarRoot.RenderTransform as TranslateTransform);

        double newY = e.Delta.Translation.Y + translateTransform.Y;
        translateTransform.Y = Math.Max(0, Math.Min(newY, appBarButtonsSize.Height));
    }

    private void CustomAppBarRoot_OnManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
    {
        // if small appbar-position changes are made app bar should back to previous position, just like in windows phone
        if (Math.Abs(e.Cumulative.Translation.Y) < 20)
            isAppBarShown = !isAppBarShown;

        if (!isAppBarShown)
            ShowCustomAppBar();
        else
            HideCustomAppBar();
    }

    private void CustomAppBarRoot_OnTapped(object sender, TappedRoutedEventArgs e)
    {
        e.Handled = true; // prevents raising Page.Tapped event so appbar won't be closed on AppBar-area tap
    }
}