2015-02-23 3 views
1

Я пытаюсь открыть панель приложения, когда я нажимаю 3 точки в нижней части экрана, но когда я это делаю, этого не происходит. Кто-нибудь знает почему & как эту проблему можно исправить?WinRT - панель приложения не появляется, когда я нажимаю на эллипсы

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

ответ

2

Переместите CustomAppBarRoot сетку после управления Hub, так что делает на вершине. Как и в случае, управление концентратором охватывает CustomAppBarRoot, поэтому клики по эллипсам идут в концентратор, а не в DotsTextBlock. Если вы даете Концентратор цвет фона для тестирования это совершенно очевидно (оставить фон от для производства):

<Hub Background="Magenta"> 

Вы также можете поднять CustomAppBarRoot в Z-порядке применения Canvas.ZIndex имущества; Однако, так как ваш CustomAppBarRoot не в Canvas это использование вне лейбла, так что я бы предпочел поместить CustomAppBarRoot после хаб в Xaml:

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

Существует в Segoe UI символ для «Подробнее «эллипсы в Unicode 0xe10c, которые вы можете использовать, а не использовать строку периодов:

<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> 
Смежные вопросы