wpf视频学习笔记（word崩溃备份版

DEMO1 点击改变文字等

点击button，button上的字符改变。

Button 文字显示为当前时间:

button2.Content = DateTime.Now.ToShortTimeString();

运行结果:

显示格式为:14:36

DEMO2使用画布

使用canvas画一个笑脸

使用<Ellipse  Fill="Yellow" Stroke="Black" StrokeThickness="6" Width="100" Height="100"></Ellipse>叠加使用画出眼睛和整张脸

使用<Path Stroke="Black" StrokeThickness="6"Data="M 30,60 Q 50,9070,60"></Path>

绘制曲线.M为起始点,30,60:50,90和70,60为另外两点.Q表示非折线而是圆滑的曲线.

动态绘制曲线:使用程式方法添加。

点击按钮,新建line属性的l1,将l1的xy进行设定,对line颜色粗细进行设定,在grid.children中加入l1.

private void button2_Click(object sender, RoutedEventArgse)

        {

            Linel1=new Line();

            l1.X1 = 10;

            l1.X2 = 200;

            l1.Y1 = 10;

            l1.Y2 = 200;

            l1.Stroke = new SolidColorBrush(Color.FromRgb(0,0,255));

            l1.StrokeThickness = 6;

 

            grid1.Children.Add(l1);

 

        }

DEMO3 透明度鼠标事件

透明度混色特效

<Ellipse Height="100" HorizontalAlignment="Left" Margin="205,112,0,0" Name="ellipse2"Stroke="Black" VerticalAlignment="Top" Width="200" Fill="#FF1F1FF2"Opacity="0.5"/>

蓝色椭圆透明度为0.5

要将边框设置为none否则会报错。WindowStyle="None"

透明化之后无法使用鼠标移动

通过设置鼠标事件来解决

鼠标事件定义在开头，在window中。

<Window x:Class="_20140701demo3.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        MouseDown="Window_MouseDown"

        MouseMove="Window_MouseMove"

        Title="MainWindow" Height="350" Width="525" Opacity="0.7" AllowsTransparency="True" WindowStyle="None">

 

鼠标移动事件和鼠标点击事件：

private void Window_MouseDown(object sender, MouseButtonEventArgse)

        {

           oldx = e.GetPosition(this).X;

            oldy= e.GetPosition(this).Y;

        }

 

 private void Window_MouseMove(objectsender, MouseEventArgs e)

        {//只有点击才有以下移动行为

            if(e.LeftButton == MouseButtonState.Pressed)

            {

                doublex = e.GetPosition(this).X;

                doubley = e.GetPosition(this).Y;

                doubledx = x - oldy;

                doubledy = y - oldy;

                this.Left+= dx;

                this.Top+= dy;

 

                oldx = x;

                oldy = y;

            }

        }

 

Demo4 笔刷

ImageBrush：影像笔刷。

  <ImageBrush ImageSource="C:\Users\yo\Documents\visual studio2010\Projects\image\show_grid.bmp" Viewport="0,0,0.30.,3" TileMode="Tile" Stretch="None"></ImageBrush>

Stretch 是否拉抻 填满 以中心为原点填满。

Viewport 这张图要看成怎样的大小。

Demo5 渐变笔刷

 

嵌套的渐变模仿按钮：

<Ellipse Height="100" HorizontalAlignment="Left" Margin="128,102,0,0" Name="ellipse1"Stroke="Black" VerticalAlignment="Top" Width="100">

            <Ellipse.Fill

> 

//从左上角到右下角，白色为1，黑色为0。故为黑仔左上，白在右下

                <LinearGradientBrushStartPoint="0,0" EndPoint="1,1">

                    <GradientStop Color="White" Offset="1">

                       

                    </GradientStop>

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

                </LinearGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

        <Ellipse Height="88" Width="88" HorizontalAlignment="Left" Margin="134,108,0,0" Name="ellipse2"Stroke="Black" VerticalAlignment="Top"  >

            <Ellipse.Fill>

                <LinearGradientBrushStartPoint="1,1" EndPoint="0,0">

                    <GradientStop Color="White" Offset="1">

                       

                    </GradientStop>

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

                </LinearGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

DEMO6 使用笔刷制作屏幕放大效果

1.  作对称效果完全复制笔刷

            <Rectangle.Fill>

                < <VisualBrush Visual="{BindingElementName=textBox1}">

                    <VisualBrush.RelativeTransform>//相对位移

使用转化组

                        <TransformGroup>

                        在x轴方向为1，y轴方向为-1，即上下翻转。

                            <ScaleTransform ScaleX="1" ScaleY="-1">

                            </ScaleTransform>

                            <TranslateTransform Y="1"></TranslateTransform>

                        </TransformGroup>

                    </VisualBrush.RelativeTransform>

            </Rectangle.Fill>

TranslateTransform

使用VISUALBRUSH,将textBox1内容绑定至矩形。

2 放大镜

代码：

          <StackPanel Grid.ColumnSpan="3" Orientation="Horizontal"Margin="0,0,0,20">

            <TextBlock FontSize="20" Margin="5">放大区域大小:</TextBlock>

                <TextBox FontSize="20" Name="txtTargetSize" Text="50" TextChanged="ZoomChanged" />

            </StackPanel>

          <Slider Orientation="Horizontal" Grid.Row="1" Grid.ColumnSpan="3" Name="sliderTargetSize" Margin="0,20,0,30"

                              Value="{Binding ElementName=txtTargetSize,Path=Text}"

                              Minimum="2" Maximum="400" Width="400" />

            <CheckBox FontSize="20" Grid.Row="2" Grid.ColumnSpan="3" Name="checkEnableMagnifier" IsChecked="False"

                      HorizontalAlignment="Center" Margin="0,30" >

                启用放大鏡

            </CheckBox>

            <TextBlock FontSize="20" Grid.Row="3" Grid.ColumnSpan="3" FontFamily="PalatinoLinotype" TextWrapping="Wrap" Margin="0,20,0,20">

                勾选上面的方块來启动或关闭放大鏡，

                通过调节滑轮来调节放大的区域大小。

            </TextBlock>

            <Button Grid.Row="4" Grid.Column="2" Click="ExitClick">

              <AccessText>E_xit</AccessText>

            </Button>

        </Grid>

        <CanvasHorizontalAlignment="Left" VerticalAlignment="Top">

            <Canvas Name="magnifierCanvas" Visibility="Hidden">放大镜出示状态是隐藏的

            放大镜的把手向右的斜线

                <Line StrokeThickness="30" X1="200" Y1="200" X2="300" Y2="300">

                    <Line.Stroke>对斜线的笔刷

                        <LinearGradientBrushStartPoint="0.78786,1" EndPoint="1,0.78786">

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

                                <GradientStop Offset="0.9" Color="LightGreen"/>

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

                        </LinearGradientBrush>

                    </Line.Stroke>

                </Line>

                <Path Fill="White" StrokeThickness="3" Width="250" Height="250">

                    <Path.Data>

                        <GeometryGroup>                            <EllipseGeometry RadiusX="125" RadiusY="125" Center="125,125" />

                            <EllipseGeometry RadiusX="1" RadiusY="1" Center="125,125" />

                        </GeometryGroup>

                    </Path.Data>

                </Path>

                <Path Width="250" Height="250" Name="magnifierEllipse">

                    <Path.Fill>

                        <VisualBrush ViewboxUnits="Absolute" Viewbox="0,0,50,50"

                                     ViewportUnits="RelativeToBoundingBox" Viewport="0,0,1,1"/>

                    </Path.Fill>

                    <Path.Data>

                        <GeometryGroup>嵌套的椭圆组成一个有孔的圆环。

 

                            <EllipseGeometry RadiusX="125" RadiusY="125" Center="125,125" />

 

                          <!-- 在放大鏡中間放一個小洞，這樣滑鼠才可以點到表單上的控制項 -->

                            <EllipseGeometry RadiusX="1" RadiusY="1" Center="125,125" />

                        </GeometryGroup>

                    </Path.Data>

                </Path>

              <Ellipse StrokeThickness="3" Width="250" Height="250">

                <Ellipse.Stroke>

                  <LinearGradientBrushStartPoint="0,0" EndPoint="0,1">

                      <GradientStop Color="#aaa" Offset="0"/>

                      <GradientStop Color="#111" Offset="1"/>

                  </LinearGradientBrush>

                </Ellipse.Stroke>

              </Ellipse>

 

              <Ellipse Canvas.Left="2" Canvas.Top="2" StrokeThickness="4" Width="246" Height="246">

                <Ellipse.Stroke>

                  <LinearGradientBrushStartPoint="0,0" EndPoint="0,1">

                      <GradientStop Color="#555" Offset="0"/>

                      <GradientStop Color="#eee" Offset="1"/>

                  </LinearGradientBrush>

                </Ellipse.Stroke>

              </Ellipse>

            </Canvas>

        </Canvas>

    </Grid>

</Window>

Demo7 外观控制

使用visual对各种控件可以进行绑定，对textbox,canvas,甚至grid都可以绑定并使用

 

 

Demo 8 定义资源 套用样式

样式：属性设定background  fill等

    触发方式：键盘，鼠标等动作

    动画：  事务移动等

    模板：tamplate，外观改变。

资源设定：resource

定义在资源档案中。或者在程序之前（无法重复使用）。

[元素].resource

<Grid>

<Grid.Resources>

<style x:key=”dapper”>

<Setter Property =”Background” Value=”Red”’/>所有dapper的背景色都会显示为红色。

</Style>

</Grid.Resource>

</Grid>

调用：

<Button Style=”{StaticResourcedapper}”>Click</Button>

静态资源——放在上方代码（程式）中的。

层次结构示意图:只能向下套用，不能向上套用（父类子类差不多

应用：<Grid>

        <Grid.Resources>

            <Style x:Key="Red1" TargetType="Button"><!--标向目标为button（对于button的属性进行设定）-->

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

            </Style>

        </Grid.Resources>

        <Button Style="{StaticResource Red1}" Content="Button" Height="49" HorizontalAlignment="Left" Margin="68,50,0,0" Name="button1"VerticalAlignment="Top" Width="88" />

        <Button Content="Button" Height="49" HorizontalAlignment="Left" Margin="179,50,0,0" Name="button2"VerticalAlignment="Top" Width="92" />

        <Button Content="Button" Height="49" HorizontalAlignment="Left" Margin="295,50,0,0" Name="button3"VerticalAlignment="Top" Width="87" />

使用：Style.Trigger来对Style进行触发。

<Grid.Resources>

            <Style x:Key="Red1" TargetType="Button"><!--标向目标为button（对于button的属性进行设定）-->

                <Style.Triggers>

                    <Trigger Property="Button.IsMouseOver" Value="True">

                    </Trigger>

                    <Trigger Property="Button.IsPressed" Value="True">

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

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

                    </Trigger>

                </Style.Triggers>

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

                <Setter Property="Foreground" Value="Green"></Setter>

            </Style>

        </Grid.Resources>

        <Button Style="{StaticResource Red1}" Content="Button" Height="49" HorizontalAlignment="Left" Margin="68,50,0,0" Name="button1"VerticalAlignment="Top" Width="88" />

问题：点击之后会在红色和蓝色之间闪烁。源代码也会闪烁。

Demo9 模板

在Style的范围内

<Style x:Key="style2"TargetType="{x:Type ListBox}">//目标指向x：type中的listbox

                <Setter Property="Template">//修改template属性

                    <Setter.Value>

                        <ControlTemplate TargetType="{x:Type ListBox}">

                            <Border

                      Background="{TemplateBinding Panel.Background}"

                      BorderBrush="{TemplateBinding Border.BorderBrush}"

                      BorderThickness="{TemplateBinding Border.BorderThickness}">

                                <ScrollViewerHorizontalScrollBarVisibility="Auto">

                                    <StackPanel x:Name="StackPanel1" IsItemsHost="True"

                     Orientation="Horizontal"/>

                                </ScrollViewer>

                            </Border>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

 

listbox资源绑定，style设定。

  <ListBox ItemsSource="{Binding}" Style="{StaticResource style2}"

 

Demo10 画面裁切

对于图像的裁切使用image.clip

<Image Source="C:\Users\yo\Documents\visualstudio 2010\Projects\image\Tulips.jpg">

            <Image.Clip>

裁切成为椭圆,圆心center 200100,横向宽度RadiusX 竖向宽度RadiusY 都为100

                <EllipseGeometry Center="200,110" RadiusX="100" RadiusY="100">

               

                </EllipseGeometry>

            </Image.Clip>

        </Image>

使用路径裁切:最终在画面上形成一个三角形。注意：裁切的点都是相对于image的而不是整个位置所以画面00点为下列坐标的00对照点。

<Image.Clip>

                <PathGeometry>//路径裁切

                    <PathGeometry.Figures>?

                        <PathFigureCollection>//路径集合

                            <PathFigure StartPoint="80,80" IsClosed="True">//初始点8080,是否封闭 是

                                <PathFigure.Segments>//线段

                                    <PathSegmentCollection>//线段集合

                                        <LineSegment Point="60,180"></LineSegment>//第一点

                                        <LineSegment Point="290,180"></LineSegment>第二点

                                    </PathSegmentCollection>

                                </PathFigure.Segments>

                            </PathFigure>

                        </PathFigureCollection>

                    </PathGeometry.Figures>

                </PathGeometry>

            </Image.Clip>

        </Image>

Demo 11圆形矩阵转换特效

!!!不见了?!

Demo12

保存:Inkcanvas中的绘制图形电脑.

private void button1_Click(object sender, RoutedEventArgse)

        {

            stringpath = @"c:\demo.jpg";

            FileStreamfs = new FileStream(path,FileMode.Create);

            RenderTargetBitmapbmp=new RenderTargetBitmap((int)ic.ActualWidth,(int)ic.ActualHeight,1/96,1/96,PixelFormats.Pbgra32);

            bmp.Render(ic);

            BitmapEncoderencoder = new TiffBitmapEncoder();

            encoder.Frames.Add(BitmapFrame.Create(bmp));

            encoder.Save(fs);

            fs.Close();

        }

 

Demo13 2D动画 宣告

对于控件可以通过,触发事件,并开始使用BeginStoryboard来开始动画

使用Storyboard来定义动画.。AutoReverse表示时间结束之后，以相反的顺序播放动画。

RepeatBehavior是否重复。（永远）

<Rectangle Height="100" HorizontalAlignment="Left" Margin="24,26,0,0" Name="rectangle1"Stroke="Black" VerticalAlignment="Top" Width="200" Fill="#FFFC0D0D" >

            <Rectangle.Triggers>

                <EventTrigger RoutedEvent="Page.Loaded">

                    <BeginStoryboard>

                        <Storyboard AutoReverse="True" RepeatBehavior="Forever">

                            <DoubleAnimation

                                Storyboard.TargetName="rectangle1"\\目标名称

                                Storyboard.TargetProperty="Height"\\目标的属性。

                                From="10" To="200"\\改变方向从10到200

                                Duration="0:0:10">\\在多少时间内改变

</DoubleAnimation>

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

 

与旋转相平行的对color使用动画改变：ColorAnimation

<ColorAnimation RepeatBehavior="Forever"  AutoReverse="True"

                                            From="Blue" To="Red"

                                            Duration="00:0:10"

                                            Storyboard.TargetName="recolor"

                                            Storyboard.TargetProperty="Color"

                                            >

                               

                            </ColorAnimation>

注！：对这些属性进行改变之前需要对其进行命名，并在每个Animation中设定Storyboard的Tage属性名字和被修改属性

对坐标点进行修改动画使用：PointAnimation

<Path Fill="Red">

            <Path.Data>

                <EllipseGeometry x:Name="ellp1" Center="70,70" RadiusX="50" RadiusY="50"></EllipseGeometry>

            </Path.Data>

            <Path.Triggers>

                <EventTrigger RoutedEvent="Page.Loaded">

                    <BeginStoryboard>

                        <Storyboard RepeatBehavior="Forever" AutoReverse="True">

                            <PointAnimationStoryboard.TargetName="ellp1"

                                            Storyboard.TargetProperty="Center"

                                            From="50,50" To="200,200"

                                            Duration="0:0:5"

                                            ></PointAnimation>

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Path.Triggers>

        </Path>

Demo14 事件触发和动画

对按键使用XMAL处理触发事件

//设置新的矩形

<Rectangle Height="100" HorizontalAlignment="Left" Margin="216,48,0,0" Name="rectangle1" Stroke="Black" VerticalAlignment="Top" Width="100" Fill="#FF1D1DE2">

//设定矩形动画，通过修改参数对动画进行控制

            <Rectangle.RenderTransform>

                <RotateTransform CenterX="50" CenterY="50" Angle="0 " x:Name="ro1"></RotateTransform>

            </Rectangle.RenderTransform>

        </Rectangle>

//设置4个按钮，功能分别为开始，暂停，继续和结束。

        <Button Content="动画开始" Height="23" HorizontalAlignment="Left" Margin="78,174,0,0" Name="begin" VerticalAlignment="Top" Width="75" IsCancel="False" />

        <Button Content="暂停" Height="23" HorizontalAlignment="Left" IsCancel="False" Margin="182,174,0,0" Name="pause" VerticalAlignment="Top" Width="75" />

        <Button Content="继续" Height="23" HorizontalAlignment="Right" IsCancel="False" Margin="0,174,151,0" Name="again" VerticalAlignment="Top" Width="75" />

        <Button Content="停止" Height="23" HorizontalAlignment="Right" IsCancel="False" Margin="0,174,50,0" Name="stop" VerticalAlignment="Top" Width="75" />

//对整个Grid设计触发       

<Grid.Triggers>

//事件触发触发的控件名字，控件发生什么情况的时候触发（Button.Click 点击）

            <EventTrigger SourceName="begin" RoutedEvent="Button.Click">

                <EventTrigger.Actions>//设置将要进行的动画

                    <BeginStoryboard x:Name="beginstory">//动画，为这个动画起名字，为了接下来的触发操作

                        <Storyboard RepeatBehavior="Forever"   >

                            <DoubleAnimation Storyboard.TargetName="ro1"

                                             Storyboard.TargetProperty="Angle"

                                             From="0" To="360"

                                             Duration="0:0:5">

                            </DoubleAnimation>

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger.Actions>

            </EventTrigger>

//暂停事件触发

            <EventTrigger SourceName="pause" RoutedEvent="Button.Click">

                <EventTrigger.Actions>//直接对storyboard进行操作，需要storyboard的名字。

                    <PauseStoryboard BeginStoryboardName="beginstory"></PauseStoryboard>

                </EventTrigger.Actions>

            </EventTrigger>

//继续事件触发原理通上

            <EventTrigger SourceName="again" RoutedEvent="Button.Click">

                <EventTrigger.Actions>

                    <ResumeStoryboard BeginStoryboardName="beginstory">

                    </ResumeStoryboard>

                </EventTrigger.Actions>

            </EventTrigger>

//停止事件触发

            <EventTrigger SourceName="stop" RoutedEvent="Button.Click">

                <EventTrigger.Actions>

                    <StopStoryboard BeginStoryboardName="beginstory"></StopStoryboard>

                </EventTrigger.Actions>

            </EventTrigger>

        </Grid.Triggers>