Styling Controls



While creating user interfaces, you generally place a layout control, such as a Grid or StackPanel to the design area and add some basic action controls to the design. It is noticed that after putting the controls onto the design area they all a certain default look and feel. So for now you used the Properties pane in Visual Studio to adjust various properties, such as the Font, FontSize, Margin, and so on. Doing this for a few controls is simple and not time-consuming. When you try to do this for complex user interfaces with many different pages becomes a difficult task. If you came from any kind of web development background, you surely are familiar with Cascading Style Sheets (CSS) and their ability to apply various styles to controls and elements on a particular web page. XAML provides a similar concept as CSS with control styles. Control styles create a style and apply it to a particular XAML control instance, or you can create it in such a way that it is generic to all instances of a given XAML control. 

Control styles are mainly a collection of properties like CSS attributes that reside in the App.xaml file. Style definitions can also be maintained in a separate resource file called a ResourceDictionary. You can include them in the app by adding a line in the App.xaml file. The styling depends on few things:

When you need styles for controls on a particular page, you can simply add them to
that page between the following Resource tags:

 <Page.Resources>

 </Page.Resources>

If you think you need to reuse the style information across multiple pages or if you want a particular style to apply to all instances of a given XAML control type, you need to include it either in App.xaml or a ResourceDictionary file.

Here is an example of styling that will briefly explain the logic:



<common:LayoutAwarePage

    x:Name="pageRoot" x:Class="ControlStyling.BasicStyles"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    IsTabStop="false"
    xmlns=
http://schemas.microsoft.com/winfx/2006/xaml/presentation 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ControlStyling"
    xmlns:common="using:ControlStyling.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">


<Page.Resources>


    <x:String x:Key="AppName">Basic Styles</x:String>
    <Style x:Key="BasicTextBlockStyle" TargetType="TextBlock">
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="FontSize" Value="20"/>
    </Style>
    <Style x:Key="BasicTextBoxStyle" TargetType="TextBox">
    <Setter Property="HorizontalAlignment" Value="Left"/><Setter Property="VerticalAlignment" Value="Top"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="Width" Value="200"/>
    </Style>


</Page.Resources>



<Grid Style="{StaticResource LayoutRootStyle}">
 <Grid.RowDefinitions>
  <RowDefinition Height="140"/>
  <RowDefinition Height="*"/>
 </Grid.RowDefinitions>

<Grid>

 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="*"/>
 </Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResourcePageHeaderTextStyle}"/>
</Grid>
<Grid Margin="0" Grid.Row="1">
<TextBlock Margin="65,53,0,0" Text="First Name" Style="{StaticResourceBasicTextBlockStyle}" />
<TextBox Margin="193,53,0,0" Text="TextBox" Style="{StaticResourceBasicTextBoxStyle}"/>
<TextBlock Margin="65,93,0,0" Text="Last Name" Style="{StaticResourceBasicTextBlockStyle}"/>
<TextBox Margin="193,109,0,0" Text="TextBox" Style="{StaticResourceBasicTextBoxStyle}"/>
</Grid>

<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>

<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFramesStoryboard.TargetName="backButton" Storyboard.TargetProperty="Style"><DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

<VisualState x:Name="Snapped">
<Storyboard>

<ObjectAnimationUsingKeyFramesStoryboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFramesStoryboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</common:LayoutAwarePage>

Now with the style information extracted out and shared, the original code example is reduced to the following code:

<Grid Margin="0" Grid.Row="1">
<TextBlock Margin="65,53,0,0" Text="First Name" Style="{StaticResourceBasicTextBlockStyle}" />
<TextBox Margin="193,53,0,0" Text="TextBox" Style="{StaticResourceBasicTextBoxStyle}"/>
<TextBlock Margin="65,93,0,0" Text="Last Name" Style="{StaticResourceBasicTextBlockStyle}"/>
<TextBox Margin="193,109,0,0" Text="TextBox" Style="{StaticResourceBasicTextBoxStyle}"/>
</Grid>

As you have seen in the Page.Resources section, the following code declares the styles necessary to achieve the effect:

<Style x:Key="BasicTextBlockStyle" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="FontSize" Value="20"/>
</Style>
<Style x:Key="BasicTextBoxStyle" TargetType="TextBox">
<Setter Property="HorizontalAlignment" Value="Left"/><Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Width" Value="200"/>
</Style>
  

The Style tag in XAML is used for the declaration of a new set of styles to be applied for a particular control or set of controls. By using the x:Name attribute you create a named style which means the style applies only to the controls set up to use that specific style. This was done in the example above by setting the Style property of the TextBlock or TextBox with the following code:

Style="{StaticResource BasicTextBoxStyle}"
 
Styling Controls Styling Controls Reviewed by Afsar Murad on 00:32 Rating: 5
Powered by Blogger.