what are the Style Controls are used in XAML??

Question

I often see while developing phone app in grid they using Asterisk(*) and Auto , i cant identify its use any people pls kindly give some suggestions....

Answer 1

The XAML framework offers many ways to customize the appearance of your apps. Styles enable you to set control properties and reuse those settings for a consistent appearance across multiple controls.

Style basics

Use styles to extract visual property settings into reusable resources. Here's an example that shows 3 buttons with a style that sets the BorderBrush, BorderThickness and Foreground properties. By applying a style, you don't have to set these properties on each control separately, and the controls all have the same appearance.

You can define a style inline in the Extensible Application Markup Language (XAML) for a control, or as a reusable resource. Define resources in an individual page's XAML file, in the App.xaml file, or in a separate resource dictionary XAML file. A resource dictionary XAML file can be shared across apps, and more than one resource dictionary can be merged in a single app. Where the resource is defined determines the scope in which it can be used. Page-level resources are available only in the page where they are defined. If resources with the same key are defined in both App.xaml and in a page, the resource in the page overrides the resource in App.xaml. If a resource is defined in a separate resource dictionary file, it's scope is determined by where the resource dictionary is referenced.

In the Style definition, you need a TargetType attribute and a collection of one or more Setter elements. The TargetType attribute is a string that specifies a FrameworkElement type to apply the style to. The TargetType value must specify a FrameworkElement-derived type that's defined by the Windows Runtime or a custom type that's available in a referenced assembly. If you try to apply a style to a control and the control's type doesn't match the TargetType attribute of the style you're trying to apply, an exception occurs.

Each Setter element requires a Property and a Value. These property settings indicate what control property the setting applies to, and the value to set for that property. You can set the Setter.Value with either attribute or property element syntax. The XAML here shows the style we used in the previous example. In this XAML, the first two Setter elements use attribute syntax, but the last Setter, for the BorderBrush property, uses property element syntax. The example doesn't use the x:Key attribute, so the style is implicitly applied to the buttons. Applying styles implicitly or explicitly is explained in the next section.

XAML

             <Page.Resources>
             <Style TargetType="Button">
             <Setter Property="BorderThickness" Value="5" />
             <Setter Property="Foreground" Value="Blue" />
             <Setter Property="BorderBrush" >
             <Setter.Value>
              <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="Yellow" Offset="0.0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1.0" />
             </LinearGradientBrush>
             </Setter.Value>
             </Setter>
             </Style>
             </Page.Resources>

Using based-on styles

To make styles easier to maintain and to optimize style reuse, you can create styles that inherit from other styles. You use the BasedOn property to create inherited styles. Styles that inherit from other styles must target the same type of control or a control that derives from the type targeted by the base style. For example, if a base style targets ContentControl, styles that are based on this style can target ContentControl or types that derive from ContentControl such as Button and ScrollViewer. If a value is not set in the based-on style, it's inherited from the base style. To change a value from the base style, the based-on style overrides that value. The next example shows a Button and a CheckBox with styles that inherit from the same base style.

The base style targets ContentControl, and sets the Height, and Width properties. The styles based on this style target CheckBox and Button, which derive from ContentControl. The based-on styles set different colors for the BorderBrush and Foreground properties.

XAML Code:

      <phone:PhoneApplicationPage.Resources>

         <Style x:Key="BasicStyle" TargetType="ContentControl">
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="30" />
        </Style>
        <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Orange" />
        </Style>
        <Style x:Key="CheckBoxStyle" TargetType="CheckBox" BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Green" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Green" />
        </Style>
   </phone:PhoneApplicationPage.Resources>

<Grid Background="White">
    <Button Content="Button" Style="{StaticResource ButtonStyle}" Height="Auto"           
      Margin="190,369,80,330" Width="Auto" RenderTransformOrigin="0.5,0.5">
    </Button>
    <CheckBox Content="CheckBox"  Style="{StaticResource CheckBoxStyle}" Height="Auto" 
      Margin="73,261,37,324" Width="Auto"/>
    </Grid>