WP7页面的样式设置

       如果根元素是Page,则是<Page.Resources>,不要以为是特殊用法,Resources只是UserControl的一个属性,这是在给属性用复杂方法赋值,这样的样式就是全局的样式, TargetType指定目标控件类型(SL中样式必须指定目标类型,而不像CSS中那样可以弱类型),x:Key为样式的名字(必须唯一),Silverlight中样式必须指定目标控件类型。

    在控件中通过Style=“{StaticResource WarnBtn}”来引用样式

    Style也可以不设定x:Key,这样表示对于所有这种类型的控件设置这个样式

和CSS类似,内层范围的控件自动继承上层范围控件的样式;同样内联覆盖页面级,页面级覆盖全局级。

在根节点下增加

1  <UserControl.Resources>
2         <Style TargetType="Button" x:Key="yangshi">
3             <SetterProperty="Foreground" Value="Red"></Setter>
4         </Style>
5 </UserControl.Resources>
6 
7  <Button Content="样式" Style="{StaticResource yangshi}">
8           
9         </Button>

下面的效果与上面的效果相同;在控件上直接给控件的的样式赋值

1  <Button Content="样式">
2             <Button.Foreground >
3                red
4             </Button.Foreground>
5         </Button>

样式是可以继承的:

1  <Style TargetType="Button" x:Key="yangshi">
2         <Setter Property="Foreground" Value="Red"></Setter>
3     </Style>
4     <Style x:Key="yangshi1" TargetType="Button" BasedOn="{StaticResource yangshi}">
5         <Setter Property="Width" Value="200"></Setter>
6     </Style>

也可以把样式设置到应用程序资源。这样的样式就是全局的样式了,整个程序都可以访问

1 <!--应用程序资源-->
2     <Application.Resources>
3         <Style x:Key="yangshi"  TargetType="Button">
4             <Setter Property="Foreground" Value="red"></Setter>
5         </Style>
6     </Application.Resources>

我们还可以把样式写在一个资源文件中:

    可惜的是微软并没有提供相应的资源文件,所以需要我们自己来创建一个

    新建一个XML文件

 

并且把后缀改成xaml写入下面的内容

1 <ResourceDictionary
2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
4     <Style TargetType="Button" x:Key="yangshi">
5         <Setter Property="Foreground" Value="Red"></Setter>
6     </Style>
7 </ResourceDictionary>

然后我们在使用这个资源文件的程序中进行引用:

1  <UserControl.Resources>
2         <ResourceDictionary Source="XMLFile1.xaml">
3             
4         </ResourceDictionary>
5     </UserControl.Resources>

 附加个小知识点:

   动态的去修改一个图片的地址:不能直接给Source赋地址路径;因为它需要的是一个imageSource对象

1 image1.Source = new BitmapImage(new Uri("Images/mm.jpg",UriKind.Relative));

 

 附加一个闪光字的制作方法:

我们先来画这么一个界面

 1   <TextBlock  FontSize="80" Height="119" HorizontalAlignment="Left" Margin="56,232,0,0" Name="textBlock1" Text="功夫之王" VerticalAlignment="Top" Width="366" >
 2             <TextBlock.Foreground>
 3                <LinearGradientBrush>
 4                    <GradientStop Color="Beige" Offset="0.2"></GradientStop>
 5                     <GradientStop x:Name="qidian" Color="Gold" Offset="0.4"></GradientStop>
 6                     <GradientStop Color="BurlyWood" Offset="0.6"></GradientStop>
 7                     <GradientStop Color="GhostWhite" Offset="0.8"></GradientStop>
 8                     <GradientStop Color="Bisque" Offset="1"></GradientStop>
 9                </LinearGradientBrush>
10             </TextBlock.Foreground>
11         </TextBlock>

然后来配置动画控件的属性:

 1 <phone:PhoneApplicationPage.Resources>
 2         <Storyboard x:Name="donghua">
 3             <DoubleAnimation 
 4                 AutoReverse="True"  //是否逆向  左→右→左  默认是左→右 左→右
 5 
 6                 Duration="0:0:3" //动画在From、To值之间变化时的持续时长
 7                 BeginTime="0:0:3" //动画三秒以后播放
 8 
 9                 RepeatBehavior="3x" //重复的次数  Forever为永远播放
10                 Storyboard.TargetName="qidian"  //动画作用的控件名
11                 Storyboard.TargetProperty="Offset" //动画作用的属性名
12                 From="0.1" //起始
13                 To="1"//结束
14                 ></DoubleAnimation>
15         </Storyboard>
16     </phone:PhoneApplicationPage.Resources>

    最后在后台begin动画 

1   private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
2         {
3             donghua.Begin();
4         }

      除了DoubleAnimation之外,还有很多其他动画,这些动画都从TimeLine类继承,都有的属性AutoReverse、RepeatBehavior、Duration、Completed事件(播放完成)、BeginTime(延迟播放,不是立即播放)

 

      Storyboard中可以放多个Animation

动画是异步播放的,Begin只是启动动画,不会等待动画播放完成再返回

指定EasingFunction属性可以设定动画的缓动曲线(EasingFunction属性也非常的好玩,大家可以试下!)

posted @ 2012-08-20 00:09  Carl --卡尔  阅读(1409)  评论(0编辑  收藏  举报