Adding PYF Flyout in Windows 8.1 App

Folks! Let see how we can add Punjab Youth Festival’s settings flyout in windows 8.1 app for Microsoft Hackathon 2014. Remember, its an easy breasy task. How to access settings flyout? While your app is running, press ‘Windows Key’+ C and goto settings. You will see available options.  

Lets do it now!

1. Start visual studio 13 > New Project > Visual C# > Windows store app > Blank app

2. Next add settings flyout by right clicking on your project > Add > New Item >

3. Next name settings flyout (whatever you like) and click add. 4. Open settings flyout (XAML file) and add following lines of code inside SettingsFlyout tag like this: <SettingsFlyout > PASTE BELOW CODE</SettingsFlyout> You can enter your team name and contact email here. Secondly change title attribute of settings flyout tag in the very beginning too like this:


5. Now lets add these two images in assets folder of your app project. 6. Goto  App.xaml.cs and add following lines of code AFTER  public App() {} Method you must enter name of your Flyout.


Here is snapshot of MY code.   Download Complete Code  here is how our PYF flyout looks like:  Any Question?? Comment down below.


  1. Pingback: Windows Store 8.1 App Development Hackathon in Punjab Youth Festival 2014 - Rules & Regulations - Microsoft Pakistan Community Blog - Site Home - MSDN Blogs

  2. kindly post Search code n steps briefly. {OnNevigatedTo() event )
    How to search pages and nevigate at those pages?

    1. Add this to navigate, just a simple switch
      void MainPage_QuerySubmitted(SearchPane sender, SearchPaneQuerySubmittedEventArgs args) {
      case “Aiman”:
      case “Javaid”:
      } }

  3. i was trying to create a grid app(using template) with variable sized grids but was unable to do it

    as when binding it to height and width the size of data template remains same can you please help or create a blog post for it…….

    1. the sizes remain the same because their exists a template in XAML file if u change width or height of one it will effect all grids attached to that template and that attached that comes from sampleData.json file.

      so either you create different templates for each Group item in json file.
      ok i will make a tutorial today.

      1. i just want to make one grid of larger size and others of same or different size,

        when we add an custom object(or variable created by user) in json file where in sampledatasource.cs must it be reflected in coding
        or please tell
        how to create a custom json file and use it as data model

  4. Nice blog hafiz !! I just want to know can we show locally stored HTML page inside Flyouts ??

  5. Hi,

    I’m currently working in Windows Store app 8.1.

    I have a flyout which displays a list of Location. i have given an ItemClick Event in it. Once an Location is Clicked i get the Corresponding String Value.

    Now i need to pass this string value to next flyout_loaded. so that i can display the item of Selected Location.

    Could you help me with this..

Leave a Comment