WPF简单入门总结

WPF简单总结

最近看了点关于WPF的东西，总结了点点入门的东西。

XAML语法基础

1、  定义样式

    <Window.Resources><!--窗体资源的定义-->

        <!--定义风格-->

        <Style x:Key="myStyle1"  TargetType="Button">

            <Style.Setters><!--表示的是集合-->

                <Setter Property="Background" Value="Blue"  ></Setter>

                <Setter Property="Content">

                    <Setter.Value>

                        <Image Source="/demo1_1;component/Images/1.bmp" ></Image>

                    </Setter.Value>

                </Setter>

                <Setter Property="FontSize" Value="20">

                </Setter>

                <Setter Property="FontFamily" Value="Times New Roman">

                </Setter>

            </Style.Setters>

        </Style>

    </Window.Resources>

2、  运用样式

<Button   FontSize="20"  Click="button1_Click" Margin="188,86,192,113" Style="{StaticResource myStyle1}"></Button>

3、  或者在App.xaml中加入一样可以运用在文件中

<Application.Resources>

        <Style x:Key="appStyle1"  TargetType="Button">

            <Style.Setters>

                <!--表示的是集合-->

                <Setter Property="Background" Value="Blue"  ></Setter>

            </Style.Setters>

        </Style>

</Application.Resources>

4、  打开文件对话框

OpenFileDialog ofd=new OpenFileDialog();

String filename=ofd.FileName;//打开的文件名

ofd.Filter=”文本文件|*.txt|图片|*.jpg|视频|*.avi”;//筛选打开的文件名

5、  保存文件对话框

SaveFileDialog sfg=new SaveFileDialog();

Sfg.Filter=”文本文件|*.txt|word文档|*.doc”;

If(sfd.ShowDialog()==true)

{

    MessageBox.Show(sfd.FileName)

}

几种常见的布局

1、  Grid 定义由行和列灵活的网格区域

下面为四行三列的网格布局

<Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="250" Height="100">

      <Grid.ColumnDefinitions>   //列集合

        <ColumnDefinition />   //一列

        <ColumnDefinition />

        <ColumnDefinition />

      </Grid.ColumnDefinitions>

      <Grid.RowDefinitions>   //行集合

        <RowDefinition />     //一行

        <RowDefinition />

        <RowDefinition />

        <RowDefinition />

      </Grid.RowDefinitions>

     创建控件并放入指定的网格位置

      <TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0">2005 Products Shipped</TextBlock>

      <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0">Quarter 1</TextBlock>

      <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1">Quarter 2</TextBlock>

      <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2">Quarter 3</TextBlock>

      <TextBlock Grid.Row="2" Grid.Column="0">50000</TextBlock>

      <TextBlock Grid.Row="2" Grid.Column="1">100000</TextBlock>

      <TextBlock Grid.Row="2" Grid.Column="2">150000</TextBlock>

      <TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="3">Total Units: 300000</TextBlock>

    </Grid>

2、  StackPanel  将子元素排列成一行（科研水平或垂直方向

<StackPanel>

    <Border Background="SkyBlue" BorderBrush="Black" BorderThickness="1">

      <TextBlock Foreground="Black" FontSize="12">Stacked Item #1</TextBlock>

    </Border>

    <Border Width="400" Background="CadetBlue" BorderBrush="Black" BorderThickness="1">

      <TextBlock Foreground="Black" FontSize="14">Stacked Item #2</TextBlock>

    </Border>

    <Border Background="LightGoldenRodYellow" BorderBrush="Black" BorderThickness="1">

      <TextBlock Foreground="Black" FontSize="16">Stacked Item #3</TextBlock>

    </Border>

    <Border Width="200" Background="PaleGreen" BorderBrush="Black" BorderThickness="1">

      <TextBlock Foreground="Black" FontSize="18">Stacked Item #4</TextBlock>

    </Border>

    <Border Background="White" BorderBrush="Black" BorderThickness="1">

      <TextBlock Foreground="Black" FontSize="20">Stacked Item #5</TextBlock>

    </Border>

  </StackPanel>

3、  WrapPanel从左至右按顺序位置定位子元素

<Border HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="2">

        <WrapPanel Background="LightBlue" Width="200" Height="100">

            <Button Width="200">Button 1</Button>

            <Button>Button 2</Button>

            <Button>Button 3</Button>

            <Button>Button 4</Button>

        </WrapPanel>

  </Border>   

4、  Canvas 画布，随意布局

<Canvas Background="LightSteelBlue">

    <TextBlock FontSize="14" Canvas.Top="100" Canvas.Left="10">Hello World!</TextBlock>

    <TextBlock FontSize="22" Canvas.Top="200" Canvas.Left="75">Isn't absolute positioning handy?</TextBlock>

  </Canvas>

数据绑定

1、  控件与控件之间的绑定

<Slider Name="mySlider" Minimum="0.5" Maximum="1" Background="PaleGreen" LargeChange="0.1" Width="300"></Slider>

<TextBox Name="myNum" Width="100" Text="{Binding ElementName=mySlider,Path=Value,Mode=TwoWay}" ></TextBox>

这为把滑块中的值绑定到文本框中显示。则文本框的文本显示为滑块的值

格式为：

{Binding ElementName=”绑定数据源的控件的Name” Path=绑定数据源显示的Value,Mode=绑定显示模式}

2、  前台直接绑定后台实体(User.cs)的值

namespace WpfDataBinding

{

    public class User

    {

        private string _userName;

        public string UserName

        {

            get { return _userName; }

            set { _userName = value; }

        }

        private int _userAge;

        public int UserAge

        {

            get { return _userAge; }

            set { _userAge = value; }

        }

        private string _userPhoto;

        public string UserPhoto

        {

            get { return _userPhoto; }

            set { _userPhoto = value; }

        }

    }

}

a)         第一步 首先在前段引入命名空间

xmlns:myspace="clr-namespace:WpfDataBinding"

Xmls:变量名=”clr-namespace:自己命名控件名”

b)         第二步 indow.Resource实例化User类

<Window.Resources>

<myspace:User x:Key="myUser" UserName="haha" UserAge='12' UserPhoto="123456"></myspace:User>

    </Window.Resources>

<引如控件变量名:类名 x.Key=”数据源名” 属性初始化>

c)         第三步 通过属性DataContext绑定数据源

<StackPanel Orientation="Vertical" DataContext="{StaticResource ResourceKey=myUser}">

<!--把资源里的数据绑定到控件中  DataContext数据上下文 引入刚刚引入的实体类-->

<WrapPanel><TextBox Text="{Binding Path=UserName}" Width="150"></TextBox>

</WrapPanel></StackPanel>

在父节点或子节点的DataContext进行数据源的绑定：控件直接可以使用Text="{Binding Path=属性名"  Width="150">

集合类的数据绑定

1、  ListBox集合

a)         第一步：

<ListBox x:Name="myListBox">

        <ListBox.Resources>

            <!--定义模板的样式-->

        </ListBox.Resources>

            <ListBox.ItemTemplate><!--数据项定义模板-->

                <DataTemplate><!--数据呈现-->

                <StackPanel>

                    <StackPanel.Resources>

                        <Style TargetType="TextBlock">

                            <Setter Property="FontSize" Value="28"></Setter>

                        </Style>

                        <Style TargetType="Image">

                            <Setter Property="Width" Value="100"></Setter>

                            <Setter Property="Height" Value="100"></Setter>

                        </Style>

                    </StackPanel.Resources>

                    <Image Width="100" Height="100"  Source="{Binding Path=UserPhoto}"></Image>

                    <TextBlock Text="{Binding Path=UserName}"></TextBlock>

                    <TextBlock Text="{Binding Path=UserAge}"></TextBlock>

                </StackPanel>

            </DataTemplate>

            </ListBox.ItemTemplate>

        </ListBox>

b)         第二步 在后台进行绑定

myListBox.ItemsSource = list;

c)         第三步

class UserList : ObservableCollection<User> //必须使用ObservableCollection集合

属性绑定

属性值的改变，直接发送给客户端更改显示属性值

实现接口：INotifyPropertyChanged

        public string UserName

        {

            get { return _userName; }

            set

            {

                _userName = value;

                NotifyPropertyEventHandler("UserName");

            }

        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyEventHandler(string info)

        {

            if (PropertyChanged != null)

            {

                PropertyChanged(this,new PropertyChangedEventArgs(info));

            }

        }

图形变换Transform 类

1、  缩放

<Image Source="001.jpg" Width="100" Canvas.Left="322" Canvas.Top="99">

                <Image.RenderTransform>

                    <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.5"  ScaleY="0.5"></ScaleTransform>

                </Image.RenderTransform>

            </Image>

2、  使元素扭曲

<Image Source="001.jpg" Width="83" Canvas.Left="117" Canvas.Top="158" Height="109">

                <Image.RenderTransform>

                    <SkewTransform AngleX="6"  AngleY="6" CenterX="0" CenterY="0"></SkewTransform>

                </Image.RenderTransform>

            </Image>

3、  平移元素

<Image Source="001.jpg" Width="100" Canvas.Left="15" Canvas.Top="-57">

                <Image.RenderTransform>

                    <TranslateTransform X="200" Y="200"></TranslateTransform>

                </Image.RenderTransform>

            </Image>

4、  使元素就地旋转

<Image Source="001.jpg" Width="100" Canvas.Left="95" Canvas.Top="-8">

                <Image.RenderTransform>

                    <RotateTransform CenterX="0" CenterY="0" Angle="30"></RotateTransform>

                </Image.RenderTransform>

            </Image>

5、  多种一起用

<Image Source="001.jpg" Width="83" Canvas.Left="55" Canvas.Top="212" Height="109">

                <Image.RenderTransform>

                    <TransformGroup>

                        <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.5"  ScaleY="0.5"></ScaleTransform>

                        <SkewTransform AngleX="6"  AngleY="6" CenterX="0" CenterY="0"></SkewTransform>

                        <RotateTransform CenterX="0" CenterY="0" Angle="30"></RotateTransform>

                    </TransformGroup>

                </Image.RenderTransform>

            </Image>

简单动画

1、  创建 DoubleAnimation

<Canvas>

            <Rectangle Name="MyRectangle"  Width="100" Height="100" Margin="200 0 0 0"></Rectangle>

            <!--在xaml界面中实现动画-->

            <!--第一步，明确在什么时候（什么时候触发动画的执行）-->

            <Canvas.Triggers>

                <EventTrigger RoutedEvent="Rectangle.Loaded">

                    <!--具体事件执行代码-->

                    <EventTrigger.Actions>

                        <!--故事版-->

                        <BeginStoryboard>

                            <!--所以的动画都的放在Storyboard里面-->

                            <Storyboard>

                                <!--必须设置：TargetName ; TargetProperty ;-->

                                <DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width” From="1.0" To="0.0"  Duration="0:0:5"    AutoReverse="True"  RepeatBehavior="Forever" />  </Storyboard> </BeginStoryboard></EventTrigger.Actions></EventTrigger>  </Canvas.Triggers></Canvas>

2、  创建 ColorAnimation

<ColorAnimation Storyboard.TargetName="MyAnimatedBrush"

Storyboard.TargetProperty="Color"

To="YellowGreen"

Duration="0:0:5" 

AutoReverse="True"

RepeatBehavior="Forever"/>

注：TargetName 目标颜色笔刷的名字

         TargetProperty 属性(要修改的)

         To   Form 

         Duration 动画持续的时间

         AutoReverse 自动放回

         RepeatBehavior 重复的方式  forever 永远

3、  创建PointAnimation

<PointAnimation Storyboard.TargetName="myRadialGradientBrush"

Storyboard.TargetProperty="GradientOrigin"

From="0.0,0.5" To="0.5,0.5" 

Duration="0:0:5"

AutoReverse="True"

RepeatBehavior="Forever" />

简单笔刷

1、  线性渐变

<Rectangle Width="200" Height="100">

  <Rectangle.Fill>

    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

      <GradientStop Color="Yellow" Offset="0.0" />

      <GradientStop Color="Red" Offset="0.25" />

      <GradientStop Color="Blue" Offset="0.75" />

      <GradientStop Color="LimeGreen" Offset="1.0" />

    </LinearGradientBrush>

  </Rectangle.Fill>

</Rectangle>

2、  径向渐变

<Rectangle Width="200" Height="100">

      <Rectangle.Fill>

        <RadialGradientBrush

          GradientOrigin="0.5,0.5"

          Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">

          <RadialGradientBrush.GradientStops>

            <GradientStop Color="Yellow" Offset="0" />

            <GradientStop Color="Red" Offset="0.25" />

            <GradientStop Color="Blue" Offset="0.75" />

            <GradientStop Color="LimeGreen" Offset="1" />

          </RadialGradientBrush.GradientStops>

        </RadialGradientBrush>

      </Rectangle.Fill>

    </Rectangle>