WP7页面的样式设置 Carl

如果根元素是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属性也非常的好玩，大家可以试下！）