Tutorials for web designers and developers
Tutorials for Developers_

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:

 Title="PYF 2014" 

 

 <SettingsFlyout.Background>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
         <GradientStop Color="#FFFFFF6F" Offset="1"/>
         <GradientStop Color="White"/>
    </LinearGradientBrush>
</SettingsFlyout.Background>
   <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
            <Image Source="Assets/pyf-420.png"></Image>
            <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="Punjab Youth Festival 2014" Margin="0,10,0,0" FontSize="22" Foreground="#FF4D4D4D" FontWeight="Normal" />
            <TextBlock Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,0,25" TextWrapping="Wrap" Foreground="#FF4D4D4D" FontSize="13">
                <TextBlock.Text>
                    Microsoft Hackathon held under Punjab Youth Festival 2014. Microsoft is technology event for this hackathon.
                </TextBlock.Text>
            </TextBlock>
            <TextBlock FontSize="24" Margin="0 50 0 0" Foreground="#FF4D4D4D" FontFamily="Segoe UI" FontWeight="Bold">
                Microsoft Hackathon
            </TextBlock>
            <TextBlock Foreground="#FF4D4D4D" FontSize="13">
                Windows 8.1 Store App development
            </TextBlock>
            <Image Source="Assets/micLahore.jpg" Margin="0 5 "></Image>

            <TextBlock Margin="0 10 0 0" FontSize="14" FontWeight="Bold" Foreground="#FF4D4D4D">
                    Team Name: ENTER YOUR TEAM NAME
            </TextBlock>
            <TextBlock Margin="0 10 0 0" FontSize="14" FontWeight="Bold" Foreground="#FF4D4D4D">
                    Email: ENTER CONTACT EMAIL
            </TextBlock>     
        </StackPanel>
    </StackPanel>

 

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.

protected override void OnWindowCreated(WindowCreatedEventArgs args)
        {
 	    SettingsPane settingsPane = SettingsPane.GetForCurrentView();
      settingsPane.CommandsRequested += settingsPane_CommandsRequested;
        }
        void settingsPane_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
        {// right click UICommandInvokedHandler and select resolve to add header files
            UICommandInvokedHandler handler = new UICommandInvokedHandler(AboutHandler);
            SettingsCommand aboutCommand = new SettingsCommand("pyf", "Punjab Youth Festival", handler);
            args.Request.ApplicationCommands.Add(aboutCommand);
        }
        private void AboutHandler(IUICommand args)
        {
//highlighted text must be the name of your flyout
            AboutSettingsFlyout aboutSettingsFlyout = new AboutSettingsFlyout();
            aboutSettingsFlyout.Show();
        }

 

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

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email

23 Responses

  1. 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) {
      switch(args.QueryText)
      {
      case “Aiman”:
      this.Frame.Navigate(typeof(page1));
      break;
      case “Javaid”:
      this.Frame.Navigate(typeof(Page2));
      break;
      } }

  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) {
      switch(args.QueryText)
      {
      case “Aiman”:
      this.Frame.Navigate(typeof(page1));
      break;
      case “Javaid”:
      this.Frame.Navigate(typeof(Page2));
      break;
      } }

  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. 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

  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..

  6. 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 Reply

Your email address will not be published.