WPF/Silverlight casual CT (1)

Always have fear of the control template. This is the most flexible technology in WPF/Silverlight.

After all, the control template defines the visual appearance of the control. All types derived from the control have a template attribute.

If there is only a template, it would be simpler:

<Button Height="23" HorizontalAlignment="Left" Margin="8,38,0,0" Name="button1" VerticalAlignment="Top" Width="75">    Button    <Button.Template>        <ControlTemplate>            <Border Name="border" BorderThickness="3" BorderBrush="Red" Background="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}">                <TextBlock Name="txtblk" FontStyle="Italic" Text="{TemplateBinding ContentControl.Content}" Margin="{TemplateBinding Control.Padding}" />            </Border>                        <ControlTemplate.Triggers>                <Trigger Property="UIElement.IsMouseOver" Value="True">                    <Setter TargetName="border" Property="Border.CornerRadius" Value="24" />                    <Setter TargetName="txtblk" Property="TextBlock.FontWeight" Value="Bold" />                </Trigger>                                <Trigger Property="Button.IsPressed" Value="True">                    <Setter TargetName="border" Property="Border.Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" />                </Trigger>                            </ControlTemplate.Triggers>        </ControlTemplate>                    </Button.Template></Button>

 

I also understand,

            <Button.Template>                <ControlTemplate>

Set it in the button, and then throw the control in it.

If you want to use the attributes of the owner in the template, such as the content attribute of the button, you can use the syntax such as contentcontrol. content.

 

What should I do with the original button events? To <controltemplate. triggers>, for example:

                    <ControlTemplate.Triggers>                        <Trigger Property="UIElement.IsMouseOver" Value="True">                            <Setter TargetName="border" Property="Border.CornerRadius" Value="24" />

 

I will tell you, I am bored with the technology of WPF and resource. In order to make the template reusable, we will throw the Template into the resource:

<Window.Resources>    <ControlTemplate x:Key="btnCustom" TargetType="{x:Type Button}">        <Border Name="border" BorderThickness="3" BorderBrush="Red" Background="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}">            <TextBlock Name="txtblk" FontStyle="Italic" Text="{TemplateBinding ContentControl.Content}" Margin="{TemplateBinding Control.Padding}" />        </Border>        <ControlTemplate.Triggers>            <Trigger Property="UIElement.IsMouseOver" Value="True">                <Setter TargetName="border" Property="Border.CornerRadius" Value="24" />                <Setter TargetName="txtblk" Property="TextBlock.FontWeight" Value="Bold" />            </Trigger>            <Trigger Property="Button.IsPressed" Value="True">                <Setter TargetName="border" Property="Border.Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" />            </Trigger>        </ControlTemplate.Triggers>    </ControlTemplate></Window.Resources><Grid>    <Button Height="23" HorizontalAlignment="Left" Margin="8,38,0,0" Name="button1" VerticalAlignment="Top" Width="75"             Template="{StaticResource btnCustom}">        Button    </Button></Grid>

 

Further, we can also throw the Template into the style. At this time, it is enough to specify targettype in the style:

    <Style x:Key="bjq" TargetType="{x:Type Button}">        <Setter Property="Template">            <Setter.Value>                <ControlTemplate>                    <Border Name="border" BorderThickness="3" BorderBrush="Red" Background="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}">                        <TextBlock Name="txtblk" FontStyle="Italic" Text="{TemplateBinding ContentControl.Content}" Margin="{TemplateBinding Control.Padding}" />                    </Border>                    <ControlTemplate.Triggers>                        <Trigger Property="UIElement.IsMouseOver" Value="True">                            <Setter TargetName="border" Property="Border.CornerRadius" Value="24" />                            <Setter TargetName="txtblk" Property="TextBlock.FontWeight" Value="Bold" />                        </Trigger>                        <Trigger Property="Button.IsPressed" Value="True">                            <Setter TargetName="border" Property="Border.Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" />                        </Trigger>                    </ControlTemplate.Triggers>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style></Window.Resources>    <Grid>    <Button Height="23" HorizontalAlignment="Left" Margin="8,38,0,0" Name="button1" VerticalAlignment="Top" Width="75"             Style="{StaticResource bjq}">        Button    </Button></Grid>