WinRT - 当我点击省略号时应用栏不出现

Question

我试图让我的应用栏在我点击屏幕底部的 3 个点时出现，但是当我这样做时它没有发生。有人知道为什么以及如何解决这个问题吗？

MainPage.xaml

<Page
    x:Name="pageRoot"
    x:Class="HP.MainPage"
    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">    

    <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="Page name" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/>
                </Grid>
            </Hub.Header>

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

MainPage.cs

using HP.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;

// The Hub Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=321224

namespace HP
{
    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
        }
    }
}

Answer 1

将 CustomAppBarRoot Grid 移到 Hub 控件之后，使其呈现在顶部。实际上，Hub 控件覆盖了 CustomAppBarRoot，因此单击省略号会转到 Hub 而不是 DotsTextBlock。如果你给集线器一个背景颜色来测试，这是很明显的（离开生产背景）：

<Hub Background="Magenta">

您还可以通过应用 Canvas.ZIndex 属性; 提高 Z 顺序中的 CustomAppBarRoot；但是，由于您的 CustomAppBarRoot 不在 Canvas 中，这是标签外使用，所以我更愿意将 CustomAppBarRoot 放在 Xaml:

中的集线器之后

 <Grid Name="CustomAppBarRoot" Canvas.ZIndex="100" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Loaded="CustomAppBarRoot_OnLoaded"

在 Unicode 0xe10c 中有一个用于 "More" 省略号的 Segoe UI 符号，您可以使用它来代替句点字符串：

<TextBlock Name="DotsTextBlock" Text="&#xe10c;" FontSize="14" FontFamily="Segoe UI Symbol" 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>

WinRT - 当我点击省略号时应用栏不出现

WinRT - App bar not appearing when I tap the ellipses

c#

winrt-xaml

windows-rt

winrt-async