When building graphical user interfaces, you will often want to use a resource, such as a brush, to paint the background of controls. These resources can be defined in a single place and shared throughout the app.
In the Solution Explorer window, double-click on the App.xaml file.
Add the following markup inside the existing <Application> element:
<Application.Resources>
<LinearGradientBrush x:Key="rainbow">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Orange" Offset="0.1" />
<GradientStop Color="Yellow" Offset="0.3" />
<GradientStop Color="Green" Offset="0.5" />
<GradientStop Color="Blue" Offset="0.7" />
<GradientStop Color="Indigo" Offset="0.9" />
<GradientStop Color="Violet" Offset="1" />
</LinearGradientBrush>
</Application.Resources>
In the MainPage.xaml file, modify the Grid element to have its background set to the rainbow brush that you just defined, like this:
<Grid Background="{StaticResource rainbow}">
Rerun the application and view the result:
You can redefine how a control looks by replacing its default template.
One of the most common resources is a Style that can set multiple properties at once. If a style has a unique Key, then it must be explicitly set, like we did earlier with the linear gradient. If it doesn't have a Key, then it will be automatically applied based on the TargetType.
In the App.xaml file, add the following markup inside the <Application.Resources> element:
<ControlTemplate x:Key="DarkGlassButton" TargetType="Button">
<Border BorderBrush="#FFFFFFFF"
BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
<Border x:Name="border" Background="#7F000000"
BorderBrush="#FF000000" BorderThickness="1,1,1,1"
CornerRadius="4,4,4,4">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Opacity="0" HorizontalAlignment="Stretch"
x:Name="glow" Width="Auto" Grid.RowSpan="2"
CornerRadius="4,4,4,4">
</Border>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" Width="Auto"
Grid.RowSpan="2" Padding="4"/>
<Border HorizontalAlignment="Stretch" Margin="0,0,0,0"
x:Name="shine" Width="Auto"
CornerRadius="4,4,0,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,0.9"
StartPoint="0.5,0.03">
<GradientStop Color="#99FFFFFF" Offset="0"/>
<GradientStop Color="#33FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Border>
</Border>
</ControlTemplate>
<Style TargetType="Button">
<Setter Property="Template"
Value="{StaticResource DarkGlassButton}" />
<Setter Property="Foreground" Value="White" />
</Style>
Rerun the application and view the results. Note the "black glass" effect on the button:
