[TUTORIAL] How to create your own XAML Styles

Remember this is just my own way of creating style

In this tutorial I will be creating a basic button with round corners and no hover over effect.

I am not a really good teacher so forgive me if I dont explain something properly.

Step 1.

Create a new folder in the solution explorer and create a Ressource Dictionary in the folder you just created.

https://media.discordapp.net/attachments/1067168861343989910/1108828129801289748/pDw4Xh3Tgk.png

Step 2.

Open the Ressource dictionary and create a new Style. Set the properties "x:Key"," "TargetType" and "x:Name" to your liking.

"TargetType" is the most important of those properties, set this property to the element you are creating the style for.

https://media.discordapp.net/attachments/1067168861343989910/1108829043085803580/vhEUte2rYq.png?width=1440&height=445

Step 3.

Create a Setter and set its "Property" property to "Template". Create Setter.Value and a ControlTemplate. Set the "TargetType" property again to the element you are creating the style for.

 https://media.discordapp.net/attachments/1067168861343989910/1108831076798971986/cJ7IgvAr4J.png?width=1440&height=529

Step 4.

Create a border in the ControlTemplate and modify its properties how you like. This border will decide how the element will look like. Remember to put in "<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>" so you can use stuff like text.

If you want to modify a propety like background between all the different elements without creating a new style for everything you can use "TemplateBinding". In this example I set the Background property to "{TemplateBinding Background}"

https://cdn.discordapp.com/attachments/1067168861343989910/1108836312628351056/jxPu1cAYPC.png

Step 5.

Navigate to "App.xaml" in your solution explorer. Create "ResourceDictionary" and in that create "ResourceDictionary.MergedDictionaries". Reference the style by typing <ResourceDictionary Source="PATH OF YOUR STYLE"/>   

https://cdn.discordapp.com/attachments/1067168861343989910/1108835183140024390/UrnGk6Rdct.png

Step 6.

Et voilà!

https://cdn.discordapp.com/attachments/1067168861343989910/1108836740363460719/JPibDK8hXY.png

I hope this helped you out a bit if you were struggling : ). Again I am sorry if I might not have explained everything properly.