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

最新推荐文章于 2026-06-25 12:38:01 发布

原创最新推荐文章于 2026-06-25 12:38:01 发布 · 618 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了使用WPF进行图形用户界面开发的各种实用技巧，包括动态改变控件文本、使用画布绘制图形、实现透明度及鼠标交互、利用笔刷制作视觉效果、创建渐变填充、实现屏幕放大功能、定义样式和模板、执行动画操作等内容。

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 透明度鼠标事件

透明度混色特效

蓝色椭圆透明度为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：影像笔刷。

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

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

Demo5 渐变笔刷

嵌套的渐变模仿按钮：

<Ellipse.Fill

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

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

</GradientStop>

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

<Ellipse.Fill>

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

</GradientStop>

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

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

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

<Rectangle.Fill>

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

<VisualBrush.RelativeTransform>//相对位移

使用转化组

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

</ScaleTransform>

</TransformGroup>

</VisualBrush.RelativeTransform>

</Rectangle.Fill>

TranslateTransform

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

2 放大镜

代码：

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

</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>

</Button>

</Grid>

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

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

放大镜的把手向右的斜线

<Line.Stroke>对斜线的笔刷

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

</LinearGradientBrush>

</Line.Stroke>

</Line>

<Path.Data>

</GeometryGroup>

</Path.Data>

</Path>

<Path.Fill>

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

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

</Path.Fill>

<Path.Data>

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

</GeometryGroup>

</Path.Data>

</Path>

<Ellipse.Stroke>

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

</LinearGradientBrush>

</Ellipse.Stroke>

</Ellipse>

<Ellipse.Stroke>

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

</LinearGradientBrush>

</Ellipse.Stroke>

</Ellipse>

</Canvas>

</Grid>

</Window>

Demo7 外观控制

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

Demo 8 定义资源套用样式

样式：属性设定background fill等

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

动画：事务移动等

模板：tamplate，外观改变。

资源设定：resource

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

[元素].resource

<Grid>

<Grid.Resources>

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

</Style>

</Grid.Resource>

</Grid>

调用：

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

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

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

应用：<Grid>

<Grid.Resources>

</Style>

</Grid.Resources>

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

<Grid.Resources>

<Style.Triggers>

</Trigger>

</Trigger>

</Style.Triggers>

</Style>

</Grid.Resources>

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

Demo9 模板

在Style的范围内

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

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

<Setter.Value>

<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.Clip>

裁切成为椭圆,圆心center 200100,横向宽度RadiusX 竖向宽度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.Triggers>

<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.Data>

</Path.Data>

<Path.Triggers>

<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.RenderTransform>

</Rectangle.RenderTransform>

</Rectangle>

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

//对整个Grid设计触发

<Grid.Triggers>

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

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

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

<DoubleAnimation Storyboard.TargetName="ro1"

Storyboard.TargetProperty="Angle"

From="0" To="360"

Duration="0:0:5">

</DoubleAnimation>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

//暂停事件触发

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

</EventTrigger.Actions>

</EventTrigger>

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

<EventTrigger.Actions>

</ResumeStoryboard>

</EventTrigger.Actions>

</EventTrigger>

//停止事件触发

<EventTrigger.Actions>

</EventTrigger.Actions>

</EventTrigger>

</Grid.Triggers>

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

DEMO1 点击改变文字等

DEMO2使用画布

DEMO3 透明度鼠标事件

Demo4 笔刷

Demo5 渐变笔刷

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

Demo7 外观控制

Demo 8 定义资源 套用样式

Demo9 模板

Demo10 画面裁切

Demo 11圆形矩阵转换特效

Demo12

Demo13 2D动画 宣告

Demo14 事件触发和动画

Demo 8 定义资源套用样式

Demo13 2D动画宣告