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，且看下文。