locked
Navigation appbar placeholder RRS feed

  • Question

  • Hi,

    in my app I have a navigation menu that I show in top appbar.
    I'm using Xaml and since there is no NavAppBar control like in Html. I made a custom control for navigation app bar that I put in every page in TopAppBar.

    I would like to show a placeholder button with ellipsis when the navigation appbar is closed, like in Calendar app.
    Which is the best way to implement this behavior?

    Should I put a button in each page that opens topappbar on click?

    Saturday, October 12, 2013 5:25 AM

Answers

All replies

  • Hi Oasis,

    yes, a control on each page would be the way to go. When you look at the Calendar-App, the placeholder button with ellipsis has no mouse-over effect. So I wouldn't use a button for that. I would use just a Border with a TextBlock. I've built something that looks like the one in the CalendarApp. Seems it's 15 units high:

    <Page
        x:Class="App5.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App5"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
      <Page.TopAppBar>
        <AppBar Background="DarkRed" BorderBrush="DarkRed">
          <!--Your content here-->
        </AppBar>
      </Page.TopAppBar>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
    
        <Border Background="DarkRed" Height="15" VerticalAlignment="Top" Tapped="Border_Tapped">
          <TextBlock Text="..." Foreground="White" Margin="0 0 60 -7" FontSize="40" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
        </Border>
        </Grid>
    </Page>

    And in the Codebehind-file:

           private void Border_Tapped(object sender, TappedRoutedEventArgs e)
            {
                TopAppBar.IsOpen = true;
            }

    You can wrap this in a user control, then you don't have to install the event handler in every pages codebehind-file.


    Thomas Claudius Huber

    "If you can´t make your app run faster, make it at least look & feel extremly fast"

    twitter: @thomasclaudiush
    homepage: www.thomasclaudiushuber.com
    author of: ultimate Windows Store Apps handbook | ultimate WPF handbook | ultimate Silverlight handbook

    Saturday, October 12, 2013 9:36 AM
  • i think you look for this: http://code.msdn.microsoft.com/AppBar-Hint-control-17e23dbf

    also have a nuget package that givesyou the control


    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Saturday, October 12, 2013 10:11 AM
  • Hi Dave,

    thank you very much, your control is great!!!

    In my app I have a navigation top app bar that is visible in most of the pages. Sometimes I have also a bottom app bar. In your opinion, it's better to show hint control for both app bars or only for top app bar?

    Saturday, October 12, 2013 11:01 AM
  • i would just show it on one place yes, where depends bit on your design. The sample just shows it works on both sides

    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Saturday, October 12, 2013 11:11 AM