Changing Pivot Header to Image instead of Text - [Tip]

Pivot controls are really awesome in Windows 10 and has provided multiple views for tailored content. Pivot control is personally one of my favorite control, It starts with a pivot control and has pivot items inside it. Very basic XAML for pivot would be something like this.

<Pivot HeaderTemplate="{StaticResource HeaderTemp}">
           <PivotItem Header="tvh.png" Margin="12,10,12,0"></PivotItem>
</Pivot>

after writing this XAML you would end up with something similar to this,

but if you have a glance at some top apps, you would find that they are using images instead of text, as that makes it more interesting and beautiful. Now question is that how can you change text to image? Would you have to write your own pivot like control? The answer is NO! you just need to perform few magical trick in Blend for VS 2015 and you would be good to go.


Pivot has an header which is called pivot header. All text you see in the image above is pivot header. 

Now what we got to do is that we have to change the template for pivot header. How you are going to do that? Just open your solution in Blend for VS and follow these steps.

• Click on the main pivot control in Objects & Timeline
• Right Click on the Pivot control > Edit Additional Template > Edit Header Template > Create Empty
• Now you just need to open XAML and header tag would be available for you to edit. with a simple grid having nothing in it.
• Introduce a Image control in that grid
• Size that image according to your need
• After sizing the image, you need to set the source of that image, just type {Binding } and that would be enough.
• Now the question is that where to add the image source? 
• You just need to add image source to the propert "Header" of Pivot Item and you would be good to go.

You would get something like this,
here is code of Pivot Control with Images,


<Page.Resources>
        <DataTemplate x:Key="HeaderTemp">
            <Grid>
                <Image Source="{Binding}"></Image>
            </Grid>
        </DataTemplate>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Pivot HeaderTemplate="{StaticResource HeaderTemp}">
           <PivotItem Header="tvh.png" Margin="12,10,12,0">                 </PivotItem>
           <PivotItem Header="dp.jpg" Margin="12,10,12,0">                   </PivotItem>


        </Pivot>
</Grid>


Hope you have enjoyed the tip, if you are having some question do comment under.
Happy coding

Windows 10 - Split view | Unleashing Hamburger Menu

Windows 10 is available for development and it's SDK has been released, Split view is new addition to XAML in Windows 10. Let's learn about split view control, The split view control can be used to make a nav pane pattern. To build this pattern, developer needs to add an expand/collapse button which is formally called hamburger control.

Split view control has an expandable pane and a content area. The content area is always visible. The pane can expand and collapse and remain in an open state, and can present itself from either the left side or the right side of an app windows. 

Split View had 3 Modes:

Overlay

           The pane is hidden until opened. When open, the pane overlays the content area.

Inline

           The pane is always visible and doesn't overlay the content area. The pane and content areas divide the available screen.

Compact

           The pane is always visible in this mode, which is just wide enough to show icons,
NOTE: usually 48 epx wide

The pane and the content area divide the available screen real estate. Although the standard compact mode doesn't overlay the content area, it can transform to a wider pane to show more content which will overlay the content area.


Let's try to use split view to create a hamburger menu.

Step 1:

Make sure the you have Development environment all set. The first thing you need to do it make sure you are running  some version of Windows 10, which you can find on Windows Insider. You need to have Visual Studio 2015 community edition installed as well. Those are only two things that ensure that you have installed.

Step 2:

Open Visual Studio Community Edition 2015 , now that you have opened the Visual Studio , you need to select Windows 10 section. In that you need to click on Blank Application and create that.

Step 3 : 

Visual Studio would create the project and now you can see the project listings in Solution Explorer. You would notice that this project does not consist for Windows Phone and Windows Store. There is only one project for both Windows Phone store and other.

Step 4:

Go to MainPage.xaml and let's edit some XAML, You would see Grid tag here, you just need to remove that and lets start our work by adding SplitView control. Split view has two main elements, the pane and the content. The pane represents the menu that you want to be able to interect with and the content represents the main content of your page.

Here is the code,

<SplitView>
       <SplitView.Pane>

       </SplitView.Pane>
       <SplitView.Content>

       </SplitView.Content>
</SplitView>


Before you add content , You should mention length of pane in compact form and in open form and also some other properties just like I have done here,

<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay"  IsPaneOpen="False" 
               CompactPaneLength="50" OpenPaneLength="150">

Now each of the part needs a container that might be of any type, Grid , StackPanel or anything.
Lets add the grid and a simple textblock now.

 <SplitView.Content>
        
            <Grid>
               <TextBlock Text="Content of SplitView " FontSize="45" Foreground="White"
                          HorizontalAlignment="Center" VerticalAlignment="Center"/>
           </Grid>
       
</SplitView.Content>

Step 5:

Now it's time to create Hamburger Button that would be used to expand or contract the pane and would be used as Menu Button, now hamburger is quiet famous and is used in android and iOS. It's sign is 3 horizontal line.

Let's add that, remember you need to add that in <SplitView.Pane> tag and don't forget to add a container in that before you add Hamburger Menu Button. (StackPanel)

<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
                    Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>

You would notice that here and click event handler is attached to the xaml of hamburger menu, I would tell you later the purpose of this click event

Step 6:

You may add some more buttons below hamburger menu button, just like this,

<StackPanel Orientation="Horizontal">
                   <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#xE825;"
                   Width="50" Height="50" Background="Transparent"/>
                   <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
               </StackPanel>
               <StackPanel Orientation="Horizontal">
                   <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content="&#xE10F;"
                       Width="50" Height="50" Background="Transparent"/>
                   <TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />
               </StackPanel>
               <StackPanel Orientation="Horizontal">
                   <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content="&#xE1D6;"
                       Width="50" Height="50" Background="Transparent"/>
                   <TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />
               </StackPanel>

Now our xaml is ready, you just need one more line in C# to make you Hamburger Menu working

Step 7:

  You just need to add this simple line to the click event of hamburger menu button.

MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;

Conclusion:

This is everything you need to make your own hamburger menu. I hope you learnt something good today, till next article happy coding!

ScreenShots:

References:

https://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.splitview.aspx

CODE (GITHUB)