DevStudent

Resources are something which can be reused across the page or application.
We use same fonts, colors, ... throughout the application known as resources.
If you are having resources with same name at different levels like in application level, Page level and control level then you resource in the lowest level will be overriding the higher level resources.

Resource dictionary:

It is where all the styles can be created and used throughout the application or in a specific page.

We can write implicit styles in xaml pages.
We can give a name to the style to use that specific style using its name.

Templates are used to compose controls.
If every item is repeated is a data template.

ListView and GridView has the same properties but listview is a vertically scrolling control and gridview is a horizontally scrolling control.

Now here is the xaml code example to write implicit style for button

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Red"></Setter>
        </Style>
    </Page.Resources>
    <Grid Background="Black">
        <Button Content="Button" HorizontalAlignment="Left" Margin="100,98,0,0" VerticalAlignment="Top"/>
        <Button Content="Button" HorizontalAlignment="Left" Margin="100,135,0,0" VerticalAlignment="Top"/>
        <Button Content="Button" HorizontalAlignment="Left" Margin="100,182,0,0" VerticalAlignment="Top"/>
    </Grid>

</Page>

Explanation

Page.Resources tag is used to create implicit styles which can used within the page.
Style tag is used to create a style for a target type. In the above example target type is button ie., this is style for button.
Background of every button is changed to red by using this implicit style.

We can also apply styles to a specific button control by using naming styles as shown in the below code/



XAML code with implicit named styles to apply for a particular control in a page

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style TargetType="Button" x:Name="RedButton">
            <Setter Property="Background" Value="Red"></Setter>
        </Style>
    </Page.Resources>
    <Grid Background="Black">
        <Button Content="Button" Style="{StaticResource RedButton}" HorizontalAlignment="Left" Margin="100,98,0,0" VerticalAlignment="Top"/>
        <Button Content="Button" HorizontalAlignment="Left" Margin="100,135,0,0" VerticalAlignment="Top"/>
        <Button Content="Button" HorizontalAlignment="Left" Margin="100,182,0,0" VerticalAlignment="Top"/>
    </Grid>
</Page>

Here a button style with name as RedButton is created and applied to the first button.

You can also use this with GUI like
Go to properties of third button. - Miscellanous - style - browse - local resource - RedButton

We can also change the styles using C# code.

Here is an example to change the styles of a button when the user click on other buttons

x:key is used for greenbutton style and x:name is used for redbutton style. Key is preferred when you write global styles and name is preferred when you write implicit named styles in a page.

In the below code there are three buttons and two styles. Background color of first button change using c# code written in the click events of other two buttons.

xaml code

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style TargetType="Button" x:Name="RedButton">
            <Setter Property="Background" Value="Red"></Setter>
        </Style>
        <Style TargetType="Button" x:Key="GreenButton">
            <Setter Property="Background" Value="Green"></Setter>
        </Style>
    </Page.Resources>
    <Grid Background="Black">
        <Button x:Name="Button1" Content="Button" HorizontalAlignment="Left" Margin="100,98,0,0" VerticalAlignment="Top"/>
        <Button x:Name="Button2" Content="Make it Red" HorizontalAlignment="Left" Margin="100,135,0,0" VerticalAlignment="Top" Click="Button2_Click"/>
        <Button x:Name="Button3"  Content="Make it Green" HorizontalAlignment="Left" Margin="100,182,0,0" VerticalAlignment="Top" Click="Button3_Click"/>
    </Grid>
</Page>
csharp code

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace App1
{

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void Button2_Click(object sender, RoutedEventArgs e)
        {
            Button1.Style = RedButton;
        }

        private void Button3_Click(object sender, RoutedEventArgs e)
        {
            Button1.Style = this.Resources["GreenButton"] as Style;
        }
    }
}

Content Presenter in styles is used to display the value of content property of that specific control.