locked
App bar not appearing when I tap the ellipses

    Question

  • I'm trying to get my app bar to appear when I tap the 3 dots at the bottom of the screen, but when I do so it doesn't happen. Anyone know why & how this problem can be rectified?

    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
            }
        }
    }
    Tuesday, February 24, 2015 7:10 PM

Answers

All replies

  • Where did this fail? What happened when you debug? Does your trapped handler get called?

    It looks like your buttons stack panel may be on top of your ellipses

    Tuesday, February 24, 2015 7:21 PM
    Owner
  • When I debug, the app runs as normal and doesn't crash when I tap the elipses hence nothing happens.
    Tuesday, February 24, 2015 9:41 PM
  • why not use the tap event? maybe can check this sample:

    https://code.msdn.microsoft.com/windowsapps/AppBar-Hint-control-17e23dbf


    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    • Marked as answer by m.findlay93 Thursday, February 26, 2015 7:05 PM
    Tuesday, February 24, 2015 10:28 PM
  • When I debug, the app runs as normal and doesn't crash when I tap the elipses hence nothing happens.

    Does your tapped handler get called?

    It looks like your buttons stack panel may be on top of your ellipses. Try reversing that so the ellipses are on top:

    <StackPanel Name="ButtonsStackPanel" Grid.Row="1" Orientation="Horizontal">
        <AppBarButton Label="tfg" Icon="Add"/>
        <AppBarButton Label="tfg" Icon="Add"/>
    </StackPanel>
    
    <TextBlock x:Name="DotsTextBlock" Text="&#xe10c;" FontSize="14" FontFamily="Segoe UI Symbol" HorizontalAlignment="Right" VerticalAlignment="Top"
    Tapped="DotsTextBlock_OnTapped">
    </TextBlock>
    
    You can also use the Segoe UI Symbol "More" character to match the standard more ellipses rather than trying to implement your own. A step further would be to make it a button so that it has proper clickable semantics and will work properly with the keyboard, although for this specific use you can get away without it since you'll provide standard Windows+Z AppBar behaviour.
    Tuesday, February 24, 2015 10:45 PM
    Owner
  • I think it'll be best to reject using this as it is not recommended anyway.
    Thursday, February 26, 2015 7:05 PM