In your WPF project, would you benefit by creating variables? Perhaps in your XAML code, you need to specify a property in numerous places and you don’t want to type that property value multiple times. Perhaps you also are sure of its value and you want to be able to change it and experiment with it. For whatever reason, it’s not difficult to create a variable.

A variable in XAML is a resource, a logical resource, as opposed to a binary resource. There are two types of resources: binary and logical. There are two types of logical resources: static and dynamic.

We have a very simple application here. When the user clicks either of the two squares, the background color of the text box below changes to the color of the clicked square. The border of the first square uses a variable to set the border thickness.

Below is the code that creates and initializes the variable. The variable’s identifier is theStrokeThickness and the value is 3. Feel free to use any of the below code in your own projects.

<System:Double x:Key="theStrokeThickness">3</System:Double>

Bwelow is the full XAMl listing.

<Window x:Class="VariablesInXAML.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:System="clr-namespace:System;assembly=mscorlib"
        xmlns:local="clr-namespace:VariablesInXAML"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="VariablesInXAML" Height="150" Width="300">
    <Window.Resources>
        <SolidColorBrush x:Key="theStroke">Green</SolidColorBrush>
        <System:Double x:Key="theStrokeThickness">3</System:Double>
    </Window.Resources>
    <DockPanel Margin="6">
        <WrapPanel DockPanel.Dock="Top">
            <Rectangle Name="rctMintCream" Height="43" Width="43" Margin="3" Fill="MintCream" 
                        MouseLeftButtonUp="rctMintCream_MouseLeftButtonUp" 
                       Stroke="{StaticResource theStroke}" 
                       StrokeThickness="{StaticResource theStrokeThickness}"
                       MouseEnter="rctMintCream_MouseEnterAsync" ToolTip="MintCream"/>
            <Rectangle Name="rctBeige" Height="43" Width="43"  Margin="3" Fill="Beige" 
                        MouseLeftButtonUp="rctBeige_MouseLeftButtonUp" Stroke="DarkGray" StrokeThickness="1"
                       MouseEnter="rctBeige_MouseEnterAsync" ToolTip="Beige"/>
        </WrapPanel>
        <TextBox Name="txtViewer" ScrollViewer.HorizontalScrollBarVisibility="Auto"
                Margin="3"
                Background="White"
                ScrollViewer.VerticalScrollBarVisibility="Auto"
                ScrollViewer.CanContentScroll="True" TextWrapping="NoWrap" />
    </DockPanel>
</Window>

Here is the code behind.

using System.Threading.Tasks;
using System.Windows;
using System.Windows.Media;
using System.Windows.Shapes;

namespace VariablesInXAML
{

    public partial class MainWindow : Window
    {
        int intDelay = 40;

        public MainWindow()
        {
            InitializeComponent();
        }
        private void rctMintCream_MouseLeftButtonUp(object sender, RoutedEventArgs e)
        {
            txtViewer.Background = Brushes.MintCream;
        }
        private async void rctMintCream_MouseEnterAsync(object sender, RoutedEventArgs e)
        {
            Rectangle r = sender as Rectangle;
            if (r != null)
            {
                r.Fill = Brushes.White;
                await Task.Delay(intDelay);
                r.Fill = Brushes.MintCream;
            }
        }
        private void rctBeige_MouseLeftButtonUp(object sender, RoutedEventArgs e)
        {
            txtViewer.Background = Brushes.Beige;
        }
        private async void rctBeige_MouseEnterAsync(object sender, RoutedEventArgs e)
        {
            Rectangle r = sender as Rectangle;
            if (r != null)
            {
                r.Fill = Brushes.White;
                await Task.Delay(intDelay);
                r.Fill = Brushes.Beige;
            }
        }
    }
}