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:
3.141.3.175