WPF动态呈现、控制Gif，及图片轮播，3D圆，Path，多方式填充等扩展知识

一介学徒

已于 2023-11-28 13:14:45 修改

阅读量566

点赞数

分类专栏： WPF基础与进阶文章标签： wpf c# 开发语言

于 2023-09-25 17:47:53 首次发布

本文链接：https://blog.csdn.net/rwo_bear/article/details/133274364

版权

WPF基础与进阶专栏收录该内容

12 篇文章 4 订阅

订阅专栏

Gif动态呈现

推荐GitHub开源库：WpfAnimatedGif

主要功能介绍

var control = WpfAnimatedGif.ImageBehavior.GetAnimationController(img);//获取控制对象
control.Play();//控制播放

control.Pause();//暂停

control.GotoFrame(control.FrameCount - 1);//到指定帧

control.CurrentFrameChanged//帧改变触发事件

WpfAnimatedGif.ImageBehavior.SetAnimatedSource(img,bitmapImage);//指定gif源

WpfAnimatedGif.ImageBehavior.SetAnimationSpeedRatio(img, speed);//控制速率

gif:ImageBehavior.AutoStart="False"//是否自动播放

gif:ImageBehavior.RepeatBehavior=“3x"//重复播放次数

gif:ImageBehavior.AnimationLoaded//动画加载时触发事件

gif:ImageBehavior.AnimationCompleted//动画结束触发事件

示例代码

C#后置代码：

        private void Button_Click(object sender, RoutedEventArgs e)
        {
          OpenFileDialog openFileDialog = new OpenFileDialog();
            openFileDialog.InitialDirectory = Directory.GetCurrentDirectory();
            openFileDialog.Filter = "图片类型|*.jpg;*.jpeg;*.gif";
            openFileDialog.ShowDialog();
            
            BitmapImage bitmapImage = new BitmapImage();
            bitmapImage.BeginInit();
            bitmapImage.UriSource = new Uri(openFileDialog.FileName);
            bitmapImage.EndInit();
            WpfAnimatedGif.ImageBehavior.SetAnimatedSource(img,bitmapImage);
        }

XAML：

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="3*" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Image x:Name="img"
               gif:ImageBehavior.AutoStart="False"
               gif:ImageBehavior.RepeatBehavior="Forever" />
        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <Button Grid.Column="1"
                    Width="80"
                    Height="80"
                    BorderBrush="Peru"
                    BorderThickness="5"
                    Click="Button_Click"
                    FontSize="20"
                    FontWeight="DemiBold">
                Open
            </Button>
            <Button Grid.Column="1"
                    Width="80"
                    Height="80"
                    BorderBrush="Green"
                    BorderThickness="5"
                    Click="Button_Click_1"
                    FontSize="20"
                    FontWeight="DemiBold">
                Play
            </Button>
            <Button Grid.Column="1"
                    Width="80"
                    Height="80"
                    BorderBrush="Green"
                    BorderThickness="5"
                    Click="Button_Click_2"
                    FontSize="20"
                    FontWeight="DemiBold">
                Pause
            </Button>
            <Button Grid.Column="1"
                    Width="80"
                    Height="80"
                    BorderBrush="Green"
                    BorderThickness="5"
                    Click="Button_Click_4"
                    FontSize="20"
                    FontWeight="DemiBold">
                加速
            </Button>
            <Button Grid.Column="1"
                    Width="150"
                    Height="80"
                    BorderBrush="Green"
                    BorderThickness="5"
                    Click="Button_Click_3"
                    FontSize="20"
                    FontWeight="DemiBold">
                Go To End
            </Button>
        </StackPanel>
    </Grid>

示例呈现

GifTest

添加闪烁

   <Window.Resources>
        <Storyboard x:Key="story">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="img" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.03" Value="{x:Static Visibility.Hidden}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.06" Value="{x:Static Visibility.Visible}"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

GifTest2

扩展：图片轮播

主要使用DispatcherTimer定时器实现图片轮播功能

示例代码：

        /// <summary>
        /// 开始轮播
        /// </summary>
        public void StartCarousel()
        { 
            DispatcherTimer timer = new DispatcherTimer();
            timer.Interval=TimeSpan.FromSeconds(0.2);
            timer.Tick+=MyTick;
            ImgSource=new BitmapImage(new Uri(ImgPaths[0],UriKind.Absolute));
            timer.Start();
        }

        /// <summary>
        /// 计时器间隔过去触发响应事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void MyTick(object sender, EventArgs e)
        {
            index++;
            if (index >= ImgPaths.Count)
            { 
                index = 0;
            }
            BitmapImage bitmapImage=new BitmapImage(new Uri(ImgPaths[index],UriKind.Absolute));
            ImgSource=bitmapImage;
        }

扩展：图形的效果滤镜

两个依赖属性

BitmapEffect（已过时）

Effect（抽象类）

Effect派生：BlurEffect，模糊效果

DropShadowEffect，投影效果

ShaderEffect，着色器效果（抽象类）

扩展：图形的变形

控制变形的属性：RenderTransform：呈现变形（定义在UIElement类中）；

LayoutTransform：布局变形（定义在FrameworkElement类中）；

其数据类型都是Transform抽象类

Transform派生类;

1、MatrixTransform：矩阵变形

2、RotateTransform：旋转变形

3、ScaleTransform：坐标系变形

4、SkewTransform：拉伸变形

5、TranslateTransform：偏移变形

6、TransformGroup：变形组（多个独立变形合成一个变形组）

扩展：3D圆

            <Ellipse Grid.Row="0"
                     Grid.Column="1"
                     Width="100"
                     Height="100">
                <Ellipse.Fill>
                    <RadialGradientBrush GradientOrigin="0.2,0.8" RadiusX="0.75" RadiusY="0.75">
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5" />
                                <TranslateTransform />
                            </TransformGroup>
                        </RadialGradientBrush.RelativeTransform>
                        <GradientStop Offset="0" Color="White" />
                        <GradientStop Offset="0.66" Color="Blue" />
                        <GradientStop Offset="1" Color="DarkBlue" />
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>

扩展：WPF绘图重点-Path

Path的强大所在，基本能实现大部分图形

重点属性：

Figures属性，容纳PathFigure对象

PathFigure对象的Segments属性，容纳多种线段

通过线段的组合，形成各种图形

线段种类;

LineSegment：直线段

ArcSegment：圆弧线段

BezierSegment：平滑三次方贝塞尔曲线段

QuadraticBezierSegment：平滑二次方贝塞尔曲线段

PolyBezierSegment：多三次方贝塞尔曲线段

PolyQuadraticBezierSegment：多二次方贝塞尔曲线段

路径标记语法表：

示例：

            <Path Stroke="{StaticResource blue}" Data="M 0,0 C 200,30 200,170 20,130" StrokeThickness="5" Grid.Column="1" Grid.Row="1"/>
            <Path StrokeThickness="3" Grid.Row="2" Grid.Column="0">
                <Path.Effect>
                    <DropShadowEffect BlurRadius="50"
                                      Direction="-45"
                                      Opacity="0.6"
                                      ShadowDepth="1"
                                      Color="Red" />
                </Path.Effect>
                <Path.Fill>
                    <RadialGradientBrush GradientOrigin="0.2,0.8" RadiusX="0.75" RadiusY="0.75">
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5"/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </RadialGradientBrush.RelativeTransform>
                        <GradientStop Color="White" Offset="0"/>
                        <GradientStop Color="Red" Offset="0.66"/>
                        <GradientStop Color="DarkRed" Offset="1"/>
                    </RadialGradientBrush>
                </Path.Fill>
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="100,50">
                            <PathFigure.Segments>
                                <BezierSegment Point1="50,10" Point2="10,80" Point3="100,120"/>
                                <BezierSegment Point1="190,80" Point2="150,10" Point3="100,50"/>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>

扩展：长方形多方式填充

除常见的实心填充、线性渐变、径向渐变

DrawingBrush：矢量图、位图填充；

ImageBrush：图片填充；

VisualBrush：可视化对象填充；

TileMode：平铺方式

Viewport：尺寸布局

            <Rectangle Stroke="Black">
                <Rectangle.Fill>
                    <DrawingBrush TileMode="FlipX" Viewport="1,1,0.5,0.5">
                        <DrawingBrush.Drawing>
                            <GeometryDrawing Brush="Blue">
                                <GeometryDrawing.Geometry>
                                    <EllipseGeometry RadiusX="10" RadiusY="10" />
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingBrush.Drawing>
                    </DrawingBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Grid.Row="1" Stroke="Black">
                <Rectangle.Fill>
                    <ImageBrush ImageSource="./Images/desk10.jpg"
                                TileMode="Tile"
                                Viewport="0,0,0.5,0.5" />
                </Rectangle.Fill>
            </Rectangle>

一介学徒

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WPF动态呈现、控制Gif，及图片轮播，3D圆，Path，多方式填充等扩展知识

/获取控制对象//控制播放//暂停//到指定帧control.CurrentFrameChanged//帧改变触发事件//指定gif源//控制速率gif:ImageBehavior.AutoStart="False"//是否自动播放gif:ImageBehavior.RepeatBehavior=“3x"//重复播放次数gif:ImageBehavior.AnimationLoaded//动画加载时触发事件。
复制链接

扫一扫

专栏目录