WPF/Silverlight随笔 CT（一）

转载

mb5fe94b3e552d9 2009-11-08 20:42:00

始终对Control Template抱有恐惧。这是WPF/Silverlight中最灵活的技术。

说到底，Control Template就是为控件定义了视觉外观，从Control派生的所有类型，都具有一个Template属性。

如果只有Template，那反而倒简单了：

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

我也看明白了，

            <Button.Template>
                <ControlTemplate>

在Button里面设置一下就好，然后把控件往里面一扔就好了。

如果在Template中还想使用其所有者（owner）的属性，比如说Button的Content属性，可以使用ContentControl.Content这样的语法。

Button那些原有的事件怎么办？扔到<ControlTemplate.Triggers>里面去，比如说：

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

我告诉你，烦就烦在WPF还有Resource这个技术，为了能够让Template重用，我们把Template扔到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>

再进一步，我们还可以把Template扔到Style里面去，这时候只在Style中指定TargetType就够了：

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