Customizing Template 10 page header bar by editing its styles [Template10,XAML,UWP]

In this very short article we will look at how to customize your PageHeader in the Template 10 Control.

In the example we will remove the three dots that allow you to show the name of the button or show the secondary buttons in the header bar.

Or in other words we will go from this:


To this :

To keep things very simple I have just cloned the default Hamburger sample app from template 10 which can be found here under  https://github.com/Windows-XAML/Template10/tree/master/Templates%20(Project)/Hamburger

Next we need to find the default styles for the PageHeader and the PageHeaderButton, the two different styles can be found here under https://github.com/Windows-XAML/Template10/blob/master/Template10%20(Library)/Themes/PageHeader.xaml

What you will need to do is look under the style named PageHeader and under each VisualTransition you will have  ObjectAnimationUsingKeyFrames elements that is targeting MoreButton and should comment out this Element.

Here is an example of what one of the ObjectAnimationUsingKeyFrames look like:

<ObjectAnimationUsingKeyFrames 

      Storyboard.TargetName="MoreButton" 

      Storyboard.TargetProperty="VerticalAlignment">
     <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch" />
</ObjectAnimationUsingKeyFrames>

You will need to comment out element that reference MoreButton about 34 times, once you have done this you should not be seeing the three anymore congratulation!

Here is the Link to the sample project.
Happy coding.