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属性也非常的好玩,大家可以试下!)