Home > Articles > Mobile Application Development & Programming

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Wire up the Flyout

When you add a new item to a project, Visual Studio does a lot of the work for you, but it can’t do everything. In the case of the SettingsFlyout, we need to add code to the App.Xaml.cs or App.Xaml.vb file to hook the flyout we create to the Settings charm. Here’s how:

c_03.jpg
  • common_circle.jpg REFERENCE APPLICATIONSETTINGS
  • The objects we’ll be using are defined in the Windows.UI.ApplicationSettings namespace, so open up the App.Xaml code-behind file and add a using statement to the top of the file:

    using Windows.UI.ApplicationSettings;
c_03.jpg

common_circle.jpg Register an Event Handler

We want to display our custom settings flyout when the user opens the Settings charm, so the first thing we need to do is register an event handler to the CommandsRequested event of the SettingsPane.

Don’t worry too much about the details of how this works right now. We’ll discuss contracts and the structure of the App.Xaml.cs file in detail in Chapter 17. Just scroll to the bottom of the file and add the OnWindowCreated function shown below. Notice that Visual Studio offers a conventional name for the event handler and then offers to create a skeleton function for us. Press Tab twice to save yourself some typing.

c_03.jpg

common_circle.jpg Handle the Event

We could do everything inside the event handler Visual Studio created for us, but best practice dictates that we should separate responding to the event from opening the flyout, and that’s what we’ll do:

vb_03.jpg

common_circle.jpg Reference Applicationsettings

The objects we’ll be using are defined in the Windows.UI.ApplicationSettings and Windows.UI.Popups namespaces, so open up the App.xaml code-behind file and add a using statement to the top of the file:

Imports Windows.UI.ApplicationSettings
Imports Windows.UI.Popups
vb_03.jpg

common_circle.jpg Register an Event Handler

We want to display our custom settings flyout when the user opens the Settings charm, so the first thing we need to do is register an event handler to the CommandsRequested event of the SettingsPane.

Don’t worry too much about the details of how this works right now. We’ll discuss contracts and the structure of the App.Xaml.vb file in detail in Chapter 17. Just scroll to the bottom of the file and add the OnWindowCreated function shown below. Because we haven’t created the method yet, Visual Studio will display an error. If you click on the red button and choose “Generate method stub...”, you’ll save yourself some typing.

vb_03.jpg

common_circle.jpg Handle the Event

We could do everything inside the event handler Visual Studio created for us, but best practice dictates that we should separate responding to the event from opening the Flyout, and that’s what we’ll do:

common_circle.jpg Run the Application on your Local Machine

You can’t use the simulator to test how your application interacts with the operating system, so choose Local Machine from the toolbar, and then click the green arrow to run the app.

062fig01.jpg

common_circle.jpg Open the Settings Charm

Once the application loads, open the Charm Menu and choose the Settings charm.

common_circle.jpg Choose Custom Setting

Choose Custom Settings and (if you got all those event handlers right) our custom flyout will display. Not much there now, but don’t worry, you’ll learn how to expand its functionality in Chapter 17.

  • + Share This
  • 🔖 Save To Your Account