Window_Store

最新推荐文章于 2024-04-21 15:03:23 发布

转载最新推荐文章于 2024-04-21 15:03:23 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pushudepu/p/6105380.html

文章标签：

#ui

布局基础：Canvas,StackPanel,Grid

Grid:分成两行两列

 1 <Grid>
 2     <Grid.RowDefinitions>
 3           <RowDefinition></RowDefinition>
 4           <RowDefinition></RowDefinition>
 5     </Grid.RowDefinitions>
 6     <Grid.ColumnDefinitions>
 7           <ColumnDefinitions></ColumnDefinitions>
 8           <ColumnDefinitions></ColumnDefinitions>
 9     </Grid.ColumnDefinitions>
10 </Grid>

动态生成：

注意：//通过代码来为Image赋值，如果图片位于项目中，则需要给出ms-appx:///

为图片赋值路径：image.Source = new BitmapImage(new Uri(fileName));

 1   for (int i = 0; i < 10; i++)
 2             {
 3                 RowDefinition row = new RowDefinition();
 4                 grid1.RowDefinitions.Add(row);
 5             }
 6             for (int i = 0; i < 8; i++)
 7             {
 8                 ColumnDefinition column = new ColumnDefinition();
 9                 grid1.ColumnDefinitions.Add(column);
10             }
11             Random r = new Random();
12             for (int i = 0; i < 10; i++)
13             {
14                 for (int j = 0; j < 8; j++)
15                 {
16                     Image image = new Image();                    
17                     int num = r.Next(1,10);
18                     //通过代码来为Image赋值，如果图片位于项目中，则需要给出ms-appx:///
19                     string fileName="ms-appx:///Images/"+num+".png";
20                     //为图片赋路径
21                     image.Source = new BitmapImage(new Uri(fileName));
22                     grid1.Children.Add(image);
23                     Grid.SetRow(image,i);
24                     Grid.SetColumn(image,j);
25                 }
26             }

画刷：

1 创建渐变的Button
2 <Button.Background>
3      <LinearGradientBrush>
4            <GradientStop Offset="0" Color="Red"></GradientStop>
5            <GradientStop Offset="0.7" Color="Yellow"></GradientStop>
6            <GradientStop Offset="1" Color="Blue"></GradientStop>
7      </LinearGradientBrush>
8 </Button.Background>

仅用画刷实现模拟歌词的移动：

 1 <TextBlock Margin="50,350" FontSize="70" Text="今天天气好晴朗">
 2             <TextBlock.Foreground>
 3                 <LinearGradientBrush>
 4                     <GradientStop Color="Yellow" Offset="0"></GradientStop>
 5                     <GradientStop x:Name="gs1" Color="Yellow" Offset="0"></GradientStop>
 6                     <GradientStop x:Name="gs2" Color="Blue" Offset="0"></GradientStop>
 7                     <GradientStop Color="Blue" Offset="1"></GradientStop>
 8                 </LinearGradientBrush>
 9             </TextBlock.Foreground>
10         </TextBlock>

 1 后台
 2  protected override void OnNavigatedTo(NavigationEventArgs e)
 3         {
 4             DispatcherTimer timer = new DispatcherTimer();
 5             timer.Interval = TimeSpan.FromMilliseconds(200);
 6             timer.Tick+=timer_Tick;
 7             timer.Start();
 8         }
 9 
10         private void timer_Tick(object sender, object e)
11         {
12             gs1.Offset += 0.03;
13             gs2.Offset += 0.03;
14         }

变换：

RotateTransform：旋转Angle

ScaleTransform:变大变小 ScaleY="-1" ScaleX="2"

TranslateTransform：左右平移 X="100"

3D投影：

<Image.Projection>
<PlaneProjection x:Name="pp1" RotationX="30" ></PlaneProjection>
</Image.Projection>

win8中是没有对话框的概念，不同的界面是不同的页，类似于网页，通过Frame.Navigate(typeof(TestPage),obj参数)来在不同页面导航。

NavigationService属性的方法：GoBack()后退；GoForward()前进；CanGoBack()属性判断是否可以后退。

页面导航默认是不启用缓存的，也就是后退以后前一个页面恢复成原始状态，需要在构造函数中执行NavigationCacheMode=NavigationCacheMode.Enable

页面三个和页面导航相关的四个虚方法：

OnNavigatedTo:当页面成为活动页面时调用。e.NavigationMode得知是新来的(New)还是后退回来的(Back)还是前进来的(Forward)，一般初始化放到OnNavigatedTo中，注意判断Mode

OnNavigatedFrom():当前页面不是活动页面时调用

OnNavigatingFrom():在页面即将不再是活动页面时调用，实现确认是否退出

页面间跳转：Frame.Navigate(typeof(MainPage),1);

1位所传的参数

启用缓存：NavigationCacheMode.Enable启用页面缓存，当后退到这个页面的时候之前的修改还在，必须写在构造函数里面

在OnNavigatedTo的方法中

e.NavigationMode:可以用来判断是第一次访问还是后退回来的，前进来的。。。

NavigationMode.New:加载数据

设置样式：

直接在xaml中设置:

 1 <Page.Resources>
 2 <!--<Style TargetType="Button">
 3 <Setter Property="Background" Value="Red"></Setter>
 4 <Setter Property="BorderBrush" Value="Blue"></Setter>
 5 <Setter Property="BorderThickness" Value="5"></Setter>
 6 </Style>
 7 <Style TargetType="Button" x:Key="btnStyle">
 8 <Setter Property="Background" Value="Yellow"></Setter>
 9 <Setter Property="BorderBrush" Value="Gray"></Setter>
10 <Setter Property="BorderThickness" Value="5"></Setter>
11 </Style>-->
12 
13 </Page.Resources>

 1
用资源字典：
 <Page.Resources>
 2 
 3         <ResourceDictionary Source="NomalDic.xaml"></ResourceDictionary>
 4     </Page.Resources>
 5     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 6         <Button Style="{StaticResource nomalBtn}" Content="Button" HorizontalAlignment="Left" Margin="216,252,0,0" VerticalAlignment="Top" Height="82" Width="184"/>
 7         <Button Style="{StaticResource nomalBtn}" Content="Button" HorizontalAlignment="Left" Margin="652,245,0,0" VerticalAlignment="Top" Height="160" Width="202"/>
 8         <Button Style="{StaticResource nomalBtn}" Content="Button" HorizontalAlignment="Left" Margin="1040,255,0,0" VerticalAlignment="Top" Height="150" Width="122"/>
 9         <TextBlock Style="{StaticResource nomalTb}" HorizontalAlignment="Left" Margin="348,52,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="149" Height="107"/>
10         <TextBlock Style="{StaticResource nomalTb}" HorizontalAlignment="Left" Margin="748,92,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="329" Height="109"/>
11 
12     </Grid>

资源字典的写法：

 1 <ResourceDictionary
 2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4     xmlns:local="using:App4">
 5     <Style TargetType="TextBlock" x:Key="nomalTb">
 6         <Setter Property="Foreground" Value="Red"></Setter>
 7     </Style>
 8     <Style TargetType="Button" x:Key="nomalBtn">
 9         <Setter Property="Background" Value="Red"></Setter>
10         <Setter Property="BorderBrush" Value="Blue"></Setter>
11         <Setter Property="BorderThickness" Value="5"></Setter>
12     </Style>
13 </ResourceDictionary>

数据绑定：

Silverlight中的数据绑定对被绑定对象有特殊要求，如果只是普通的get、set属性的对象用在数据绑定上有很多问题(无法双向绑定。只有Model值不会变或者Model变了不要求界面跟着变才可以使用普通属性)，一般要求类实现INotifyPropertyChanged接口.

绑定中类属性的特殊写法：

 1 public class Person : INotifyPropertyChanged
 2     {
 3         private string _name;
 4         public string Name
 5         {
 6             get 
 7             {
 8                 return _name;
 9             }
10             set
11             {
12                 _name = value;
13                 if (PropertyChanged != null)
14                 {
15                     PropertyChanged(this,new PropertyChangedEventArgs("Name"));
16                 }
17             }
18         }
19         private int _age;
20         public int Age
21         {
22             get
23             {
24                 return _age;
25             }
26             set
27             {
28                 _age = value;
29                 if (PropertyChanged != null)
30                 {
31                     PropertyChanged(this,new PropertyChangedEventArgs("Age"));
32                 }
33             }
34         }
35 
36         public event PropertyChangedEventHandler PropertyChanged;
37     }

三种绑定模式：

OneTime:一次绑定，绑定创建时使用源数据更新控件。(可以是普通的get、set)。

OneWay(默认值):单向绑定，在绑定创建时使用源数据更新控件，当源数据发生变化的时候也更新控件。(必须实现INotifyPropertyChanged接口或者继承自DependencyObject)。相当于Eval

TwoWay:双向绑定，数据源的变化会更新控件，控件的变化也会更新到数据源。(必须实现INotifyPropertyChanged接口或者继承自DependencyObject)。相当于Bind

例：Text="{Binding Age,Mode=OneTime}"

绑定数据集合：

普通的集合的变化是不会影响UI的，集合需要实现INotifyCollectionChanged接口

如果使用OneWay、TwoWay以达到数据源发生变化时UI的项随着数据变化，那么数据可以放到 private ObservableCollection<string> list1 = new ObservableCollection<string>()中，因为ObservableCollection中定义了一个集合改变的通知事件。

动画：

资源加载：

1  <Storyboard x:Name="sb1">
2             <DoubleAnimation Storyboard.TargetName="st1"   Storyboard.TargetProperty="ScaleX" From="0" To="3">             </DoubleAnimation>
3 </Storyboard>

1 控件部分：
2 <Image Name="img1" HorizontalAlignment="Left" Height="85" Margin="154,243,0,0" VerticalAlignment="Top" Width="86" Source="Images/China.jpg">
3             <Image.RenderTransform>
4                 <ScaleTransform x:Name="st1" ScaleX="3"></ScaleTransform>
5             </Image.RenderTransform>
6             <Image.Projection>
7                 <PlaneProjection x:Name="pp1" RotationY="30"></PlaneProjection>
8             </Image.Projection>
9         </Image>

AppBar

当向上手势或者鼠标右键的时候会显示AppBar(以FreshPaint为例)，AppBar分为顶部TopAppBar、底部BottomAppBar两块，建议把主要操作放在底部、顶部有特殊意义再放

Xaml中Page的TopAppBar、BottomAppBar两个属性赋值，AppBar类型，然后Content内容自由绘制。一般绘制横向的圆形图标，一般采用StandrardStyle.xaml中预置的AppBarButtonStyle样式，用到哪个反注释哪个，AutomationProperties.Name设定显示的文本。用法：<Button Style="{StaticResource EditAppBarButtonStyle}" AutomationProperties.Name="编辑"></Button>

高级：IsOpen打开状态(可以实现程序打开时默认AppBar显示)；IsSticky是否钉住；Opened、Closed打开关闭事件。

高级容器：

ProgressBar进度条：IsIndeterminate模式

ProcessRing圆形的不确定进度条，IsActive属性表示是否活动

ToggleSwitch开关控件，IsOn是否打开，OffContent、OnContent、Heade关闭、打开、头部的显示内容；Toggled更改事件；

ScrollViewer用于显示大内容，显示尺寸不够则可以通过滚动条控制。

HorizontalScrollBarVisibility、VerticalScrollBarVisibility控制滚动条显示。

.net 4.5异步编程

异步方法不用等任务结束后才返回。异步编程可以避免界面卡死的问题，但是会导致编写“等待一个异步操作执行完成再执行一段代码”的程序很麻烦。

异步方法返回Task或者IAsyncOperation对象(鼠标悬停会显示“可等待”)，一般以Async结尾，异步方法不会等结束才返回。

在.net4.5中引入了async、await关键字，这样方法中这一行代码都将在异步方法执行完成后才执行。注意：一个方法中如果有await，则必须标注为async。

可以直接在await前声明变量，当异步方法执行完成后把执行结果返回设置给变量，一般var自动推断。