sliverligth自定义控件外观(一)

ControlTemplate 介绍

  在sliverligth中我们往往会自定义一些控件的外观,或者创建新的空间,这里主要通过ControlTemplate来实现。

  ControlTemplate类,派生自FrameworkTemplate类,命名空间为System.Windows.Controls;引用程序集System.Windows.dll。

在XAML中定义ControlTemplate

  要在XAML中定义ControlTempalte主要有三种方法。

  1)将Template本地设置成内联定义的ControlTemplate

1 <Button Content="Button1">
2   <Button.Template>
3     <ControlTemplate TargetType="Button">
4
5       <!--Define the ControlTemplate here.-->
6
7     </ControlTemplate>
8   </Button.Template>
9 </Button> 

  2)将Template本地设置成对定义为资源的ControlTemplate的引用

 1 <StackPanel>
 2   <StackPanel.Resources>
 3     <ControlTemplate TargetType="Button" x:Key="newTemplate">
 4
 5       <!--Define the ControlTemplate here.-->
 6
 7     </ControlTemplate>
 8   </StackPanel.Resources>
 9
10   <Button Template="{StaticResource newTemplate}" Content="Button1"/>
11 </StackPanel>

  3)用Style设置Template和定义 ControlTemplate

 1 <StackPanel>
 2   <StackPanel.Resources>
 3     <Style TargetType="Button" x:Key="newTemplate">
 4       <Setter Property="Template">
 5         <Setter.Value>
 6           <ControlTemplate TargetType="Button">
 7
 8             <!--Define the ControlTemplate here.-->
 9
10           </ControlTemplate>
11         </Setter.Value>
12       </Setter>
13     </Style>
14   </StackPanel.Resources>
15   <Button Style="{StaticResource newTemplate}" Content="Button1"/>
16 </StackPanel>

  据说第三种最常见,但一切还是看个人习惯和喜好了。

  定义了ControlTemplate后就可以更改控件的外观了,这里可以通过更改控件的可视化结构来完成,也可以根据控件状态来更改控件的外观,当然也可以两者结合起来用。

  1)更改控件的可视化结构

 1 <ControlTemplate TargetType="Button">
 2                 <Border x:Name="RootElement">
 3
 4                   <!--Create the SolidColorBrush for the Background
 5                       as an object elemment and give it a name so
 6                       it can be referred to elsewhere in the control template.-->
 7                   <Border.Background>
 8                     <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
 9                   </Border.Background>
10
11                   <!--Create a border that has a different color by adding smaller grid.
12                       The background of this grid is specificied by the button‘s Background
13                       property.-->
14                   <Grid Margin="4" Background="{TemplateBinding Background}">
15
16            <!--Use a ContentPresenter to display the Content of
17                         the Button.-->
18                     <ContentPresenter
19                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
20                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
21                         Margin="4,5,4,4" />
22
23                   </Grid>
24                 </Border>
25               </ControlTemplate>

  然后在 </StackPanel.Resources>后面加入以下语句:

1  <Button Style="{StaticResource newTemplate}" Content="Button1" Width="100"/>
2         <TextBlock FontSize="20" Text="Buttons with a custom ControlTemplate" HorizontalAlignment="Center"/>
3         <TextBlock Text="This sample demonstrates the visual structure of a custom ControlTemplate." HorizontalAlignment="Center" Margin="2"
4                TextWrapping="Wrap"/>
5         <Button Style="{StaticResource newTemplate}" Width="100"
6             Content="Button1"/>
7
8         <Button Style="{StaticResource newTemplate}" Background="Purple"  Width="100"
9             Content="Button2"/>

  效果图:

  2)根据控件状态更改控件外观

  我们可以使用 VisualState 对象指定控件在处于特定状态时的外观,VisualState 包含 Storyboard,用于更改 ControlTemplate 中的元素的外观。

1 <VisualState x:Name="MouseOver">
2   <Storyboard>
3     <ColorAnimation Storyboard.TargetName="BorderBrush"
4                     Storyboard.TargetProperty="Color" To="Red" />
5
6   </Storyboard>
7 </VisualState>

  可以将 VisualState 对象添加到 VisualStateGroup 对象中。  可以将 VisualStateGroup 对象添加到 VisualStateManager.VisualStateGroups 附加属性,该属性是在 ControlTemplate 的根 FrameworkElement 上设置的。

  

<ControlTemplate TargetType="Button">
  <Border x:Name="RootElement">
    <VisualStateManager.VisualStateGroups>
      <!--Define the states for the common states.
          The states in the VisualStateGroup are mutually exclusive to
          each other.-->
      <VisualStateGroup x:Name="CommonStates">
        <!--The Normal state is the state the button is in
            when it is not in another state from this VisualStateGroup.-->
        <VisualState x:Name="Normal" />
        <!--Change the SolidColorBrush, BorderBrush, to red when the
            mouse is over the button.-->
        <VisualState x:Name="MouseOver">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="BorderBrush"
                              Storyboard.TargetProperty="Color" To="Red" />
          </Storyboard>
        </VisualState>
        <!--Change the SolidColorBrush, BorderBrush, to Transparent when the
            button is pressed.-->
        <VisualState x:Name="Pressed">
          <Storyboard >
            <ColorAnimation Storyboard.TargetName="BorderBrush"
                              Storyboard.TargetProperty="Color" To="Transparent"/>
          </Storyboard>
        </VisualState>
          <!--The Disabled state is omitted for brevity.-->
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Border.Background>
      <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
    </Border.Background>
    <Grid Background="{TemplateBinding Background}" Margin="4">
      <ContentPresenter
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
        Margin="4,5,4,4" />
    </Grid>
  </Border>
</ControlTemplate>

   所有代如下:

 1  <StackPanel>
 2         <StackPanel.Resources>
 3             <Style TargetType="Button" x:Key="newTemplate">
 4                 <Setter Property="Template">
 5                     <Setter.Value>
 6                         <ControlTemplate TargetType="Button">
 7                             <Border x:Name="RootElement">
 8                                 <VisualStateManager.VisualStateGroups>
 9                               <!--Define the states for the common states.
10                                   The states in the VisualStateGroup are mutually exclusive to
11                                   each other.-->
12                                     <VisualStateGroup x:Name="CommonStates">
13                                         <!--Define the VisualTransitions that can be used when the control
14                                               transitions between VisualStates that are defined in the
15                                               VisualStatGroup.-->
16                                         <VisualStateGroup.Transitions>
17                                             <!--Take one hundredth of a second to transition to the Pressed state.-->
18                                             <VisualTransition To="Pressed" GeneratedDuration="0:0:0.01" />
19                                             <!--Take one half second to trasition to the MouseOver state.-->
20                                             <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.5" />
21                                             <!--Take one hundredth of a second to transition from the  Pressed state to the MouseOver state.-->
22                                             <VisualTransition From="Pressed" To="MouseOver" GeneratedDuration="0:0:0.01" />
23                                             <!--Take one and a half seconds to transition from the
24                                                 MouseOver state to the Normal state.
25                                                 Have the SolidColorBrush, BorderBrush, fade to blue,
26                                                 then to yellow, and then to black in that time.-->
27                                             <VisualTransition From="MouseOver" To="Normal"   GeneratedDuration="0:0:1.5">
28                                                 <Storyboard>
29                                                     <ColorAnimationUsingKeyFrames  Storyboard.TargetProperty="Color" Storyboard.TargetName="BorderBrush" FillBehavior="HoldEnd" >
30                                                         <ColorAnimationUsingKeyFrames.KeyFrames>
31                                                             <LinearColorKeyFrame Value="Blue" KeyTime="0:0:0.5" />
32                                                             <LinearColorKeyFrame Value="Yellow" KeyTime="0:0:1" />
33                                                             <LinearColorKeyFrame Value="Black" KeyTime="0:0:1.5" />
34                                                         </ColorAnimationUsingKeyFrames.KeyFrames>
35                                                     </ColorAnimationUsingKeyFrames>
36                                                 </Storyboard>
37                                             </VisualTransition>
38                                         </VisualStateGroup.Transitions>
39                                         <!--The remainder of the VisualStateGroup is the same as the previous example.-->
40                                         <VisualState x:Name="Normal" />
41                                         <VisualState x:Name="MouseOver">
42                                             <Storyboard>
43                                                 <ColorAnimation Storyboard.TargetName="BorderBrush"  Storyboard.TargetProperty="Color" To="Red" />
44                                             </Storyboard>
45                                         </VisualState>
46                                         <VisualState x:Name="Pressed">
47                                             <Storyboard >
48                                                 <ColorAnimation Storyboard.TargetName="BorderBrush" Storyboard.TargetProperty="Color" To="Transparent"/>
49                                             </Storyboard>
50                                         </VisualState>
51                                         <!--The Disabled state is omitted for brevity.-->
52                                     </VisualStateGroup>
53                                 </VisualStateManager.VisualStateGroups>
54                                 <Border.Background>
55                                     <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
56                                 </Border.Background>
57                                 <Grid Background="{TemplateBinding Background}" Margin="4">
58                                     <ContentPresenter
59                                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
60                                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
61                                         Margin="4,5,4,4" />
62                                 </Grid>
63                             </Border>
64                         </ControlTemplate>
65                     </Setter.Value>
66                 </Setter>
67             </Style>
68         </StackPanel.Resources>
69         <Button Style="{StaticResource newTemplate}" Content="Button1" Width="100"/>
70         <TextBlock FontSize="20" Text="Buttons with a custom ControlTemplate" HorizontalAlignment="Center"/>
71         <TextBlock Text="This sample demonstrates the visual structure of a custom ControlTemplate." HorizontalAlignment="Center" Margin="2"
72                TextWrapping="Wrap"/>
73         <Button Style="{StaticResource newTemplate}" Width="100"
74             Content="Button1"/>
75
76         <Button Style="{StaticResource newTemplate}" Background="Purple"  Width="100"
77             Content="Button2"/>
78     </StackPanel>

  

时间: 2024-11-13 08:49:25

sliverligth自定义控件外观(一)的相关文章

android - 自定义(组合)控件 + 自定义控件外观

转载:http://www.cnblogs.com/bill-joy/archive/2012/04/26/2471831.html android - 自定义(组合)控件 + 自定义控件外观 Android自定义View实现很简单 继承View,重写构造函数.onDraw,(onMeasure)等函数. 如果自定义的View需要有自定义的属性,需要在values下建立attrs.xml.在其中定义你的属性. 在使用到自定义View的xml布局文件中需要加入xmlns:前缀="http://sc

【自定义控件】自定义属性

做 Android布局是件很享受的事,这得益于他良好的xml方式.使用xml可以快速 有效的为软件定义界面.可是有时候我们总感觉官方定义的一些基本组件不够用,自定义组件就不可避免了.那么如何才能做到像官方提供的那些组件一样用xml 来定义他的属性呢?现在我们就来讨论一下他的用法. 一.在res/values文件下定义一个attrs.xml文件,代码如下: <?xml version="1.0" encoding="utf-8"?>  <resour

android自定义View之(七)------自定义控件组合仿actionbar控件

我们前面写了6个自定义view的样例,这都是全新自已画的控件.在这个样例中,我们来用几个现有的控件来组合成一个新的控件. 效果图: 我们用二个Button和一个TextView组合来成为一个actionbar,下面先来一个效果图: 关键代码: (1)res/layout/custom_action_bar.xml----组合控件布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&quo

QSS美化Qt程序以及最近做的Qt项目界面

什么是QSS QSS称为Qt Style Sheets也就是Qt样式表,它是Qt提供的一种用来自定义控件外观的机制.QSS大量参考了CSS的内容,只不过QSS的功能比CSS要弱很多,体现在选择器要少,可以使用的QSS属性也要少很多,并且并不是所有的属性都可以用在Qt的所有控件上. QSS在Qt程序中的使用办法 首先将QSS写在文件中,然后利用如下的代码设置QSS: MainWidget::MainWidget(QWidget *parent) : QWidget(parent), ui(new

WPF快速入门系列(7)——深入解析WPF模板

一.引言 模板从字面意思理解是“具有一定规格的样板".在现实生活中,砖块都是方方正正的,那是因为制作砖块的模板是方方正正的,如果我们使模板为圆形的话,则制作出来的砖块就是圆形的,此时我们并不能说圆形的”砖块“不是砖块吧.因为形状只是它们的外观,其制作材料还是一样的.所以,模板可以理解为表现形式.WPF中的模板同样是表现形式的意思. 在WPF中包括三种模板:控件模板.数据模版和面板模板.它们都继承于FrameworkTemplate基类,其继承层次结果如下图所示: 从上图可以发现,Framewor

C#二十八 数据绑定

在Windows中绑定是将操作界面和数据源的数据保持一致,即实现操作界面的增删改查与数据库的增删改查一致,这里所说的数据源指数据集或数据表,而窗体可以是Windows窗体或Web窗体,在这里,我们研究关于Windows窗体的数据绑定,一般分为两种类型:简单绑定和复杂绑定.简单绑定是指将一个控件的某个属性绑定到某个数据元素(如数据集表中列的值)的能力,这是用于TextBox或Label等控件的典型绑定类型.复杂绑定指将一个控件绑定到多个数据元素的能力,通常绑定到数据库的多条记录,如DataGrid

tabBar切换不同控制器的封装(自定义导航+自定义uiviewcontroler+系统自带tabbar+自定义tabbarController)

首先,一个app的搭建环境非常重要.既要实现基本功能,又要考虑后期优化的性能. 现在很多应用不仅仅是系统自带的控制器,由于需求复杂,基本上需要自定义多控制器来管理. 新建一个BasicNavigationViewController,继承UINavigationController 在这里实现导航外观,方法什么的. 示例代码如下: 接着自定义一个BasicTabbarViewController,继承UITabBarController 代码如下: #import <UIKit/UIKit.h>

QSS-qt样式表

QSS即Qt StyleSheet(Qt样式表)的简称,是一种用来自定义控件外观的强大机制,QSS可以让我们的程序界面更加漂亮 每条QSS样式都由两部分组成:1. 选择器,该部分指定要美化的控件  2. 声明,该部分指定要在控件上使用的属性 1 import sys 2 from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QLabel, QLineEdit, 3 QComboBox, QStackedWidget, QG

8.Android-简单的登录案例编写

本章来学习登录案例,由于还未学习自定义控件外观,所以ui界面先用最简单的,并保存登录账号密码到data/data/包名/files下 1.学习之前需要掌握的Context类(通过Context来往APK包所在目录下读写登录信息配置文件) Context:可以理解为对APK的工具管家,通过Context可以访问当前应用相关的全局信息(系统资源). 也可以发送广播.访问全局包信息.开启另外的activity. 1.1 如何获取Context 通过MainActivity.this获取 1.2 本章要