win8开发-Xaml学习笔记一
前言占位
-----------------------------------------------------------------------------
还是边学边整理记录吧,不然真的很快就忘了.
参考来自http://www.cnblogs.com/kefira/archive/2013/03/07/windows8.html
1.给Button指定复杂内容
在Button中添加多个控件，需要加上StackPanel容器
<Button Content="Button" HorizontalAlignment="Left" Height="112" Margin="419,257,0,0" VerticalAlignment="Top" Width="211"> //<TextBlock Text="确定"></TextBlock> //<Image Source="image/1.jpg" ></Image> //不可直接在button里添加多个object </Button>
添加按钮控件http://technet.microsoft.com/zh-cn/library/jj153346
2.画刷
实心颜色画刷：SolidColorBrush
渐变画刷：LinearGradienBrush
图片画刷：ImageBrush
1)画刷渐变
<Button Content="Button" HorizontalAlignment="Left" Height="91" Margin="181,134,0,0" VerticalAlignment="Top" Width="194"> <Button.Background> <!--<SolidColorBrush Color="Gold"></SolidColorBrush>--> <LinearGradientBrush > <GradientStop Color="Red" Offset="0"></GradientStop> <!--GradientStop渐变点--> <GradientStop Color="Yellow" Offset="0.5"></GradientStop> <GradientStop Color="Blue" Offset="1"></GradientStop> </LinearGradientBrush> </Button.Background> </Button>
2)画刷瞬变
<TextBlock Text="miss my lung" FontSize="35" Height="40" Width="200" Margin="10,30,0,0"> <TextBlock.Foreground> <LinearGradientBrush> <GradientStop Color="Yellow"></GradientStop> <GradientStop Color="Yellow" Offset="0.5"></GradientStop> <!--两个渐变点前后紧靠,此点成瞬变点--> <GradientStop Color="Red" Offset="0.5"></GradientStop> <GradientStop Color="Red" Offset="1"></GradientStop> </LinearGradientBrush> </TextBlock.Foreground> </TextBlock>
3)歌词颜色变化
protected override void OnNavigatedTo(NavigationEventArgs e) { //asp.net中有Timer控件来指定随时间变化发生的事情，在win8中用的是DispatcherTimer DispatcherTimer Timer = new DispatcherTimer(); //xaml中的定时器;Interval：间隔、间距、幕间休息，TimeSpan：时间间隔 Timer.Interval = TimeSpan.FromMilliseconds(200);//每200毫秒执行一次 Timer.Tick +=Timer_Tick; Timer.Start(); } void Timer_Tick(object sender, object e) { gc1.Offset += 0.01;//歌词颜色变化间隔0.01 gc2.Offset += 0.01; }
3.变换与投射
1)变换
<Button.RenderTransform>
<CompositeTransform CenterY="20" CenterX="10" Rotation="11.978" ScaleX="1.5" SkewX="4" SkewY="2" TranslateX="12" TranslateY="33" />
<!--<RotateTransform Angle="19" CenterX="12" CenterY="25"/> //RotateTransform 旋转变换;centerX,centerY最大值为像素;Angle为旋转角度,顺时针为正,逆时针为负-->
<!--<ScaleTransform ScaleX="1.7" ScaleY="1.5"/> //ScaleTransform 缩放变换;scaleX，scaleY为负值时，可以实现翻转效果-->
<!--<TranslateTransform X="12" Y="20"/>//TranslateTransform平移变换-->
</Button.RenderTransform>
2)投射
<Image.Projection>
<PlaneProjection x:Name="PP1" RotationX="40"><!--//RotationX,图片沿着x轴旋转40度角-->
</PlaneProjection>
</Image.Projection>
2.1)图片旋转
protected override void OnNavigatedTo(NavigationEventArgs e) { DispatcherTimer Timer1 = new DispatcherTimer(); Timer1.Interval = TimeSpan.FromMilliseconds(200); Timer1.Tick += Timer_Tick; Timer1.Start(); } private void Timer_Tick(object sender, object e) { PP1.RotationX += 5;//围绕x轴旋转,每200millisecond旋转5度 // PP1.RotationY += 5; //PP1.RotationZ += 5; }
4.页面导航
1)导航
private void Button_Click_1(object sender, RoutedEventArgs e) { Frame.Navigate(typeof(页面导航2));//点击按钮转到另一页面 }
2)返回
private void Button_Click_1(object sender, RoutedEventArgs e) { Frame.GoBack();//返回上个页面;frame就是page的一个属性 }
3) 传参
protected override void OnNavigatedTo(NavigationEventArgs e) { //e.Parameter为导航这个页面的时候传递的参数 int i=(int)e.Parameter; if(i==1) { tb1.Text="我是新闻一"; } else if(i==2) { tb1.Text="我是新闻二"; } }//用传参方式,避免使用各多个页面返回
4)缓存
public 页面导航() { this.InitializeComponent(); NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;//表示对当前页面启用缓存,必须写到构造函数里面!!! }
wp中返回上一个页面时,上个页面的值是自动保存的缓存，在win8中的缓存是不存在的，需要添加上述代码启动缓存
5)判断页面时新进的（new）、还是后进进来的（back）、还是前进来的（forward）
protected override void OnNavigatedTo(NavigationEventArgs e) { //因为后退回来还会触发，所以需要判断只有是新进入的"new"，才加载数据 if (e.NavigationMode == NavigationMode.New) { //加载数据 } }
*OnNavigatedTo:当页面成为活动页面时用。e.NavigationMode得知是new，还是back，还是forward，一般数据初始化放到OnNavigatedTo中，注意判断Mode
*OnNavigatedFrom()：当页面不再是活动页面时用；
*OnNavigatingFrom()：在页面即将不再是活动页面时用，实现确认是否退出。
5.样式
silverlight中，属性等同于样式.
<Page.Resources><!--//resource是page的一个属性--><!--//控制button属性控件--><!--//没用名字的button默认应用所有button--> <Style TargetType="Button"> <Setter Property="Background" Value="Red"></Setter> <Setter Property="BorderBrush" Value="Blue" ></Setter> <Setter Property="BorderThickness" Value="5"></Setter> </Style> <Style TargetType="Button" x:Key="btnstyle1"><!--根据名字来采用不同的样式;给另外一组样式的button起名,为什么不是name?--> <Setter Property="Background" Value="Red"></Setter> <Setter Property="BorderBrush" Value="Purple" ></Setter> <Setter Property="BorderThickness" Value="5"></Setter> </Style> <Style TargetType="TextBox"> <Setter Property="Foreground"> <Setter.Value>yellow</Setter.Value><!--//也可以这么改变属性--> </Setter> </Style> </Page.Resources>
*也可引用外部样式文件-资源字典
<Page.Resources>
<ResourceDictionary Source="外部样式文件_hotstyle.xaml"></ResourceDictionary><!--引用外部样式文件-->
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button Style="{StaticResource normalBtn}" Content="Button" HorizontalAlignment="Left" Height="71" Margin="101,63,0,0" VerticalAlignment="Top" Width="165"/>
<TextBox Style="{StaticResource normalTextbox}" HorizontalAlignment="Left" Height="55" Margin="122,206,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="109"/>
</Grid>
</Page>
把样式写入app.xaml，样式应用于全局
<Button Style="{StaticResource AppBarButtonStyle}" Content="Button" HorizontalAlignment="Left" Height="95" Margin="175,351,0,0" VerticalAlignment="Top" Width="235"/>//引用standardStyles.xaml中的样式-->
6.消息
MessageDialog在 Using Windows.UI.Popups中
1）消息框
Button Content="Button" HorizontalAlignment="Left" Height="91" Margin="121,145,0,0" VerticalAlignment="Top" Width="227" Click="Button_Click_1"/>
private void Button_Click_1(object sender, RoutedEventArgs e) { MessageDialog dlg = new MessageDialog("删除成功","提示"); dlg.ShowAsync(); }
7.数据绑定
1)slider-数据绑定
<TextBox HorizontalAlignment="Left" Height="64" Margin="487,270,0,0" TextWrapping="Wrap" Text="{Binding Value,Mode=TwoWay,ElementName=slider1}" VerticalAlignment="Top" Width="149"/> //ElementName=slider1,与叫slider1的slider进行数据绑定.数据绑定模式Mode=OneTime/oneway/twoway,数据绑定的默认模式是oneway <Slider x:Name="slider1" Maximum="100" Minimum="0" Value="30" HorizontalAlignment="Left" Height="103" Margin="384,434,0,0" VerticalAlignment="Top" Width="310"/>//slider滑动条
三种数据绑定模式
OneTime：一次绑定,绑定创建时使用源数据更新控件,目标控件只更新一次(可以是普通的set/get属性)
OneWay(默认值)： 单向绑定,当源数据发生变化的时候更新控件,但反过来更改控件的值源数据不发生变化。(必须实现INotifyPropertyChanged接口或者继承来自DependencyObject),相当于Eval。
TwoWay： 双向绑定，数据源的变化会更新控件，控件的变化也会更新数据源。。(必须实现INotifyPropertyChanged接口或者继承来自DependencyObject),相当于Bind。
namespace App1 { public class Person : INotifyPropertyChanged //为了让模型发生改变界面也跟着变，实现这个接口，接口里面定义了一个事件 { private string _name; public string Name { get { return _name; } set { _name = value; if (PropertyChanged != null)//告诉别人值发生变化 { PropertyChanged(this, new PropertyChangedEventArgs("Name"));//把事件告诉别人 } } } public event PropertyChangedEventHandler PropertyChanged; } }
2）数据上下文
<Grid x:Name="g1" Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <TextBox x:Name="textName" HorizontalAlignment="Left" Height="51" Margin="127,125,0,0" TextWrapping="Wrap" Text="{Binding Name}" VerticalAlignment="Top" Width="119"/> <TextBox x:Name="textAge" HorizontalAlignment="Left" Height="61" Margin="127,230,0,0" TextWrapping="Wrap" Text="{Binding Age}" VerticalAlignment="Top" Width="119"/> </Grid>
namespace App1 { public sealed partial class 数据上下文 : Page { private Person p1 = new Person() { Name="Ruka",Age=20}; private Person p2 = new Person() { Name = "sakura", Age = 21 }; public 数据上下文() { this.InitializeComponent(); } protected override void OnNavigatedTo(NavigationEventArgs e) { if (e.NavigationMode == NavigationMode.New) { //textName.DataContext = p1; //textAge.DataContext = p1; this.DataContext = p1;//this指的整个页面，给整个页面的datacontext进行设置，则具体子控件就不用单独设置 //给外层控件设置数据上下文,内层控件会自动继承下来。子控件会自动继承父控件的DataContext g1.DataContext = p2;//此时，则grid-g1层覆盖this的page层 } } } }
-----------------------------------------------------------------------------------------------------------------------
视频看到这的时候，心痒痒着去折腾了个app，且看下文。
