[UWP]Changing what a button looks like? RRS feed

  • Question

  • So on my UWP I can modify the button colour and font. When I push down on the button I notice it goes transparent. How can I change the "pushed down" style of the button? eg: Alpha, colour, text size etc?


    I made a pivot navigation. I can set the header text to white but the "tab headers" are still black. How can I change the styling there? Can I also use icons?


    • Edited by Barry Wang Monday, October 26, 2015 9:52 AM Edit Title
    Sunday, October 25, 2015 10:16 PM


All replies

  • You need to style the button. If you find the button in the document outline (or Blend) then edit the template you will be shown the xaml that represents the button and all of its different states. Change at will.


    • Edited by pkr2000 Sunday, October 25, 2015 10:42 PM
    Sunday, October 25, 2015 10:42 PM
  • In general you will need to style the controls by providing custom control templates. To learn how to do this generally, you should first read Styling controls and then read Control templates. The Control templates link is particularly helpful since it provides an example of customizing a control (the Checkbox control).

    Once you've read those links and understand the customization process, you will then need to create custom templates for the specific controls you want to customize. You can find the default styles and templates for all of the built-in controls here: https://msdn.microsoft.com/en-us/library/windows/apps/xaml/mt210948.aspx . The remaining links are for the two controls you asked about specifically.

    For the Button control, its default styles and templates are here: https://msdn.microsoft.com/en-us/library/windows/apps/xaml/mt299109.aspx .

    For the Pivot control, it is more complex. The main Pivot control default styles and templates are here: https://msdn.microsoft.com/en-us/library/windows/apps/xaml/mt299144.aspx . The PivotHeaderItem default styles and templates are here: https://msdn.microsoft.com/en-us/library/windows/apps/xaml/mt299142.aspx . Lastly, the PivotItem default styles and templates are here: https://msdn.microsoft.com/en-us/library/windows/apps/xaml/mt299143.aspx . You probably want to customize the PivotHeaderItem control template based on your question.

    Visual C++ MVP | http://bit.ly/bobtaco (website) | http://bit.ly/mikebmcl (Twitter: @mikebmcl)

    • Proposed as answer by MikeBMcL Sunday, October 25, 2015 10:55 PM
    • Marked as answer by Barry Wang Wednesday, November 4, 2015 4:37 AM
    Sunday, October 25, 2015 10:55 PM
  • Thanks that helped.


    Saturday, October 31, 2015 1:12 AM
  • Cheers! I managed to get the button tweaked. Haven't tried with the pivot headers yet.

    I'm not finding it "ergonomic". Windows forms were much easier. lol.


    Saturday, October 31, 2015 1:13 AM
  • @David98xp,

    Sounds like Mike's solution works for you. Do you mind to mark his post as the answer?

    Best regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, November 2, 2015 1:01 PM