Windows Phone Four, control templates

the concept of a control template

Each control in the Windows phone has a default template that describes the internal composition and appearance style of the control

Customizable templates are more customizable relative to the original style appearance operation

The most basic rewrite control template

1     <Grid>2         <!--button Buttons Center Align -3         <ButtonHorizontalAlignment= "Center">4             <!--the native control template is set to the template property -5             <button.template>6                 <!--control template Type -7                 <ControlTemplate>8                     <!--The border itself supports rounded corners -9                     <BorderTen                         BorderBrush= "White" One borderthickness= "3" A Cornerradius= "10,20,10,10"> -                         <TextBlock -                             Text= "button" the TextAlignment= "Center" - VerticalAlignment= "Center"/> -                     </Border> -                 </ControlTemplate> +             </button.template> -         </Button> +     </Grid>

BorderBrush Color borderthickness Border width cornerradius radians of four rounded corners

Text content TextAlignment Horizontal alignment verticalalignment vertical alignment

Binding properties and reuse (custom control templates)

1     <page.resources>2         <!--Rounded button Template -3         <ControlTemplatex:key= "Cornerbutton"TargetType= "button">4             <!--The border itself supports rounded corners -5             <Border6                         Background="{TemplateBinding Button.background}"7 BorderBrush="{TemplateBinding Button.borderbrush}"8 borderthickness="{TemplateBinding button.borderthickness}"9 Cornerradius= "10,20,10,10">Ten                 <!--TemplateBinding is used to bind the current control property in the stencil - One                 <TextBlock A                             Text="{TemplateBinding Button.content}" - TextAlignment= "Center" - VerticalAlignment= "Center"/> the             </Border> -         </ControlTemplate> -         <!--Unify all buttons - -         <StyleTargetType= "button"> +             <Setter Property= "Template"Value="{StaticResource Cornerbutton}"/> -         </Style> +     </page.resources> A     <Grid> at         <!--Fillet button Template, resource reference - -         <Button -             Content= "button" - Background= "Aqua" - BorderBrush= "Hotpink" - borderthickness= " the" in HorizontalAlignment= "Center" - Template="{StaticResource Cornerbutton}"> to         </Button> +     </Grid>

Icon button Display content

button is derived from ContentControl, and all ContentControl are displayed by Contentpersenter content property

1     <Grid>2         <Button>3             <button.content>4                 <SymboliconSymbol= "Accept"/>5             </button.content>6             <button.template>7                 <ControlTemplate>8                     <Border9                         BorderBrush= "White"Ten borderthickness= "3"Cornerradius= "Ten"> One                         <ContentPresenter/> A                     </Border> -                 </ControlTemplate> -             </button.template> the         </Button> -     </Grid>

Windows Phone Four, control templates