Skip to main content

How to create app bar with menu windows 8 (Windows Store apps using C# and XAML)

Hi Guys..
These days i am interesting in windows 8 app developing because i have to create 20 windows 8 apps for Microsoft student champs .So i decided to create series of post "How to Create windows 8 app".
Actually i am not going to start this in beginner level but if you requested then i can consider about it.  Lets go to the my fist post in "How to Create windows 8 app"


When you add commands to an app bar, consider whether your command sets would work better in a command menu. Menus let you present more options in less space and include interactive controls. In this example, the Sort menu pops up a simple list that makes choosing options easy.


Step 1: Add an app bar to the app

  • Add an app bar to your app.Here, we add a bottom app bar with a button to show the sort menu.
 <Page.BottomAppBar>  
   <AppBar x:Name="bottomAppBar" IsSticky="True">  
     <Grid>  
       <StackPanel x:Name="rightPanel"   
             Orientation="Horizontal" HorizontalAlignment="Right">  
         <Button Style="{StaticResource AppBarButtonStyle}"   
             Content="&#xE174;"   
             AutomationProperties.Name="Sort"  
             AutomationProperties.AutomationId="SortButton"  
             Click="SortMenuButton_Click" />  
       </StackPanel>  
     </Grid>  
   </AppBar>  
 </Page.BottomAppBar>  


Step 2: Show the menu pop up

When a user clicks the Sort command button on the AppBar, you show a Popup menu. The user picks a sort option from the menu.

  1. Create a Popup to host the sort menu.
  2.  Popup popUp = new Popup();  


  3. Set the Popup.IsLightDismissEnabled property to true.
    With light dismiss enabled, the Popup hides automatically when the user interacts with another part of the app.
  4.  popUp.IsLightDismissEnabled = true;  
    


  5. Create a panel as the root of the menu UI.
  6.  StackPanel panel = new StackPanel();  
     panel.Background = bottomAppBar.Background;  
     panel.Height = 140;  
     panel.Width = 180;  
    


  7. Add command buttons to the menu UI.
  8.  Button byRatingButton = new Button();  
     byRatingButton.Content = "By rating";  
     byRatingButton.Style = (Style)App.Current.Resources["TextButtonStyle"];  
     byRatingButton.Margin = new Thickness(20, 5, 20, 5);  
     byRatingButton.Click += SortButton_Click;  
     panel.Children.Add(byRatingButton);  
    


  9. Add the menu root panel as the Popup content.
  10.  popUp.Child = panel;  
    


  11. Calculate the placement of the Popup menu.
    Here, we place the Popup in the bottom right corner of the screen, above the AppBar, with a padding of 4.
  12.  popUp.HorizontalOffset = Window.Current.CoreWindow.Bounds.Right - panel.Width - 4;  
     popUp.VerticalOffset = Window.Current.CoreWindow.Bounds.Bottom - bottomAppBar.ActualHeight - panel.Height - 4;  
    


  13. Open the Popup.
  14.  popUp.IsOpen = true;  
    


    Thank You Guys :)

Comments

Popular posts from this blog

C# Character Escape Sequences

Character combinations consisting of a backslash ( \ ) followed by a letter or by a combination of digits are called "escape sequences." To represent a newline character, single quotation mark, or certain other characters in a character constant, you must use escape sequences. An escape sequence is regarded as a single character and is therefore valid as a character constant.

Windows 8 Icons: Segoe UI Symbol

Whatz up guyz... In this post i am going to tell you about "Windows 8 Icons" . If you ever used a windows 8 app, you know that there are so many standard Icons. Actually we do not want to add images for each button, simply we can use the character map for obtain the icons.Go to the character map and select the font as "Segoe UI Symbol" .Then you will see lot of standard symbols in the character map.

Multithreading C# : Part 01

Multithreading with C# Think about old days, you have one central processing unit (CPU) in your pc which is capable of executing one operation at a time. If we have 5 operations to run then we have to wait till one operation is completed and then only other one can start. What will happen if the running operation has a bug and got stuck, then whole computer going to be freeze and useless unless we restart it. This is a huge problem. So if we can run multiple operation in the same time that would be great because it will solve this problem.