Gui design using VS

Idea : To add app bars and buttons to a project using VS

Project to download - GUIOpg3.zip

                       

Exercise 1 : Add app bars and buttons to a project

• Unzip GuiOpg3.zip - and - Open the Project
• Run the program.

 

• Make sure the MainPage.xaml is the only page open
• In the XAML area, Just below the Page- tag and before Page.DataContext
   
• Insert the xaml tag 'Page.BottomAppBar'
• Between the start- and end Page.BottomAppBar tags insert a new tag CommandBar
   
• Between the start- and end CommandBar tags insert two new tag AppBarButton

• In the first AppBarButton
• Click at the AppBarButton-tag and look in the property-view
• In Icons-tab choose the Symbol Icons
• Click
at the SymbolIcon-tag and look in the property-view
• In the propert-window find the common-tab and choose add-symbol
  
 
• In the second AppBarButton
• Click at the AppBarButton-tag and look in the property-view
• In Icons-tab choose the Symbol Icons
• Click
at the SymbolIcon-tag and look in the property-view
• In the propert-window find the common-tab and choose delete-symbol
  
  
• Now you have two buttons
   
• Run the program
   
• Now add functionality to your two AppBarButtons
• In XAML - Choose your first AppBarButton (ADD)
• insert a Command={Binding .. }
• Bind to the AddCommand
   
• Now add functionality to your two AppBarButtons
  • In XAML - Choose your first AppBarButton (ADD)
  • insert a Command={Binding .. }
  • Bind to the DeleteCommand
    

• Now run your application - Your can now add and remove students from the list.

Extra Exercise : Add more app bars and buttons to a project

• To your command bar - add a secondary command bar - between the CommandBar-tags insert CommandBar.SecondaryCommands
• Add an appBarButton - make it to save i.e. find save symbol and set (bind) command to be SaveCommand
  And set the label to 'Save'