【Win8】-- XAML中琐碎知识点
【win8开发 -- XAML中琐碎知识点】
1、 Canvas、StackPanel、Grid
Width、Height的可选值：Auto，自动：*，表示百分号时为：0.3*
2、Button在Grid中占两列的代码：Grid.ColumnSpan="2"
3、点击Button在StackPanel中动态添加元素：
TextBox tb=new TextBox(); tb.Text=DataTime.Now.ToString(); StackPanel.Children.Add(tb);
4、在Button的Click事件中动态生成元素
1 private void btn1_Click(object sender, RoutedEventArgs e) 2 { 3 for (int row = 0; row < 3; row++) 4 { 5 for (int column = 0; column < 3; column++) 6 { 7 TextBox tb = new TextBox(); 8 tb.Text = row + "," + column; 9 Grid.SetRow(tb,row); //在Grid下设置行，相当于XAML中设置tb的Grid.Row属性 10 Grid.SetColumn(tb, column); 11 grid1.Children.Add(tb);//动态添加到grid1中TextBox的子元素 12 } 13 } 14 }
5、连连看，随机生成并显示图片
1 protected override void OnNavigatedTo(NavigationEventArgs e) 2 { 3 //定义10行8列 4 for (int i = 0; i < 10; i++) 5 { 6 RowDefinition rowdf=new RowDefinition(); 7 grid1.RowDefinitions.Add(rowdf); 8 } 9 for (int i = 0; i < 8; i++) 10 { 11 ColumnDefinition coldf = new ColumnDefinition(); 12 grid1.ColumnDefinitions.Add(coldf); 13 } 14 //在定义好的行列中添加图片来显示进行连连看 15 //随机生成代码一定要写在for循环外面 16 Random rd = new Random(); 17 for (int row = 0; row < 10; row++) 18 { 19 for (int column = 0; column < 8; column++) 20 { 21 Image img = new Image(); 22 //随机生成6个图片，取不到上限值所以上限值为7 23 int sum = rd.Next(1, 7); 24 //通过代码来为Image赋值，如果图片位于项目中，则需要添加“ms-appx:///” 25 string filename = "ms-appx:///Images/" + sum + ".png"; 26 // img.Source=new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri(filename)); 27 //任何一个类型都不能强转string类型，因为任何类都没有继承于string，string是密封类。Source为ImageSource类型 28 //img.Source的类型为ImageSource类型，BitmapImage继承于BitmapSource，BitmapSource继承于ImageSource 29 img.Source = new BitmapImage(new Uri(filename)); 30 grid1.Children.Add(img); 31 Grid.SetColumn(img, column); 32 Grid.SetRow(img, row); 33 } 34 } 35 }
注意： //通过代码来为Image赋值，如果图片位于项目中，则需要添加“ms-appx:///”，如果不添加的话会出现以下错误信息：“Invalid URI:The format of the URI could not be determined”
6、Button
想在Button中添加多个控件，需要加上StackPanel容器
7、画刷（Brush）
实心颜色画刷：SolidColorBrush
渐变画刷：LinearGradienBrush
图片画刷：ImageBrush
Brush类型的属性都可以指定各种Brush，例如Button的Foreground、Rectangle的Fill
Brush在Button中设计的代码：
1 <Button Content="Button" > 2 <Button.Background> //渐变画刷 3 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> //去掉 EndPoint="0.5,1" StartPoint="0.5,0"后，显示出来的是横向渐变 4 <LinearGradientBrush.RelativeTransform> //相对转换格式 5 <CompositeTransform CenterY="0.5" CenterX="0.5" SkewX="-3"/> //复合型转换格式 6 </LinearGradientBrush.RelativeTransform> 7 <GradientStop Color="Black" Offset="0"/> //Offset：抵消 8 <GradientStop Color="Yellow" Offset="0.7"/> 9 <GradientStop Color="red" Offset="1"/> 10 </LinearGradientBrush> 12 </Button.Background> 13 </Button>
8、歌词动态显示
（1）实现字体的瞬间变化
1 <TextBlock Text="我有一只小毛驴，从来也不骑。。。" Margin="105,302,0,0"> 2 <TextBlock.Foreground> 3 <LinearGradientBrush> 4 <GradientStop Color="Yellow"></GradientStop> 5 <GradientStop x:Name="gds1" Color="Yellow" Offset="0.38"></GradientStop> 6 <GradientStop x:Name="gds2" Color="Red" Offset="0.38"></GradientStop> 7 <GradientStop Color="Red" Offset="1"></GradientStop> 8 </LinearGradientBrush> 9 </TextBlock.Foreground> 10 </TextBlock>
（2）实现歌词的动态显示
1 protected override void OnNavigatedTo(NavigationEventArgs e) 2 { 3 //asp.net中有Timer控件来指定随时间变化发生的事情，在win8中用的是DispatcherTimer 4 DispatcherTimer timer = new DispatcherTimer(); 5 timer.Interval = TimeSpan.FromMilliseconds(200); //Interval：间隔、间距、幕间休息，TimeSpan：时间间隔 6 timer.Tick += timer_Tick; 7 timer.Start(); 8 } 9 void timer_Tick(object sender, object e) 10 { //Offset之间间隔0.05来更改颜色的变化，满值为 1 11 gds1.Offset += 0.05; 12 gds2.Offset += 0.05; 13 }
9、变换和投射
以Button为例：
（1）变换Transform：旋转变换（RotateTransform）、缩放变换（ScaleTransform）、平移变换（TranslateTransform）
<Button.RenderTransform> //Render：致使、打底、交纳 //混合变换 <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"/> <ScaleTransform ScaleX="1.7" ScaleY="1.5"/> <TranslateTransform X="12" Y="20"/> </Button.RenderTransform>
（2）投射Projection：
<Image HorizontalAlignment="Left" Height="400" Margin="544,260,0,0" VerticalAlignment="Top" Width="552" Source="Assets/1.png" Stretch="Fill"> <Image.Projection> <PlaneProjection x:Name="pp1" RotationY="12"/> </Image.Projection> </Image>
10、页面导航
（1）缓存
wp中回退的页面的值是自动保存的缓存，而win8中的缓存是不存在的，可以自动添加
public BlankPage1() { this.InitializeComponent(); //启用缓存，当回退到该页面时之前做的修改仍存在，必须写在构造函数中 NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled; }
（2）导航、传参、返回
<1> Frame.Navigate(typeof(BlankPage1), 1); //导航到BlankPage1页面，并传参 <2> protected override void OnNavigatedTo(NavigationEventArgs e) { //e.Parameter 为导航到这个页面(此时页面为BlancPage1页面)时传入的参数 int i =(int) e.Parameter; if (i==1) { this.tbx1.Text = "我是一"; } else if (i==2) { this.tbx1.Text = "我是二"; } } <3> Frame.GoBack(); //返回上一个页面
（3）判断该页面是否是新页面（New）、前进页面（Forward）、后退页面（Back）或者是自身页面的导航（Refresh）
if (e.NavigationMode==NavigationMode.New) { }
如图：
11、样式
在silverlight中，微软定义的就是 属性等同于样式，win8中的样式和wp中的样式是一样的
在win8中，可以新添加一个资源字典把所有要定义的样式存放到一起，然后再引用
<Page.Resources>
<ResourceDictionary Source="Dictionary1.xaml" />
</Page.Resources>
VS2012也自定义了一些样式，在默认的StandardStyles.xaml中
12、消息框（MessageDialog）
MessageDialog在 Using Windows.UI.Popups中；
MessageDialog mdialog = new MessageDialog("我是个好孩子", "提示"); mdialog.ShowAsync(); //对话框显示的异步操作
（1）、自定义消息框。下面是自己定义的消息框，命令是你想要的操作，此处略（用ToDo来表示）
private async void CustomCommandButton_Click2(object sender, RoutedEventArgs e) { //设置内容和标题 var messageDialog = new MessageDialog("确定离开该页面吗？", "提示"); messageDialog.Commands.Add(new UICommand("Don't install", (command) => { //ToDo: })); messageDialog.Commands.Add(new UICommand("Install updates", (command) => { //ToDo: })); //设置默认按钮 messageDialog.DefaultCommandIndex = 1; await messageDialog.ShowAsync(); }
（2）、 什么按钮都没有增加的时候，默认会有一个Close按钮。
private async void DefaultCloseCommandButton_Click2(object sender, RoutedEventArgs e) { var messageDialog = new MessageDialog("哈哈，我是好孩子"); await messageDialog.ShowAsync(); } // 此时弹出的文本框只有内容，没有标题。
（3）、使用命令ID，根据用户选择的命令ID分别做不同的操作。
private async void CompletedCallbackButton_Click(object sender, RoutedEventArgs e) { var messageDialog = new MessageDialog("确定离开该页面吗？", "提示！"); // 增加命令和命令ID messageDialog.Commands.Add(new UICommand("取消", null, 0)); messageDialog.Commands.Add(new UICommand("确认", null, 1)); messageDialog.DefaultCommandIndex = 1; var commandChosen = await messageDialog.ShowAsync(); switch (commandChosen.Id.ToString()) { case "0": //Todo: break; case "1": //ToDo: break; } }
（4）、当按下Esc时，取消命令去作用
private async void CancelCommandButton_Click2(object sender, RoutedEventArgs e) { var messageDialog = new MessageDialog("No internet connection has been found."); //两个命令的CallBack函数是一样的，与上面inline的形式不同。 messageDialog.Commands.Add(new UICommand("Try again", new UICommandInvokedHandler(this.CommandInvokedHandler2))); messageDialog.Commands.Add(new UICommand("Close", new UICommandInvokedHandler(this.CommandInvokedHandler2))); messageDialog.DefaultCommandIndex = 0; // 当按下Esc时，取消命令去作用 messageDialog.CancelCommandIndex = 1; await messageDialog.ShowAsync(); } private void CommandInvokedHandler2(IUICommand command) { //ToDo： }
直接在键盘上按下Esc退出按钮，直接调用退出命令。此处要注意，两个命令调用同一个函数CommandInvokedHandler2。
（5）、当然也可以封装一下
public async static void Show(string str) { var messageDialog = new MessageDialog(str); await messageDialog.ShowAsync(); } //例如自定义一个对话框 MessageDialog msg = new MessageDialog("恭喜您胜利了！" + "\n步数：" + this.txblock2.Text + "\n时间："); msg.Commands.Add(new UICommand("重玩", (command) => { ClearPic(); BindingPic(random()); this.txblock2.Text = "0"; })); msg.Commands.Add(new UICommand("菜单", (command) => { this.Frame.Navigate(typeof(GroupedItemsPage)); })); msg.DefaultCommandIndex = 1; msg.ShowAsync();
这些零碎的知识点是我根据传智播客的视频以及从网上查询资料简单记下的笔记，供自己学习，也分享给同样爱好win8的朋友们，请指教喽！@_@
下一节将会写到：数据绑定和动画基础。
