WPF界面设计工具---Blend学习（一）

article/2025/10/12 23:36:32

文章目录

  • 前言
      • 一.初用Blend之喜
      • 二.使用Blend
        • 1.Blend工具版本

前言

最近在空闲时间学习WPF界面设计工具Blend，之前写WPF的界面都是完全依靠手敲代码的方式，这种方式往往很低效率而且很难做到一些复杂的效果。比如动画，手敲代码实现动画的话，往往要写很多代码；而用Blend的话，只需两三分钟就可以实现一个效果很不错的动画，方便快捷，因此开始记录Blend工具学习之路，一边摸索一边记录。

一.初用Blend之喜

这是花了半个小时用Blend工具设计出的一个简单界面，效果如下：
在这里插入图片描述
这是Blend自动生成的代码：

<Window x:Class="WpfApp1.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp1"mc:Ignorable="d"Title="MainWindow" Height="600" Width="900" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True" Background="{x:Null}"><Window.Resources><Style x:Key="FocusVisual"><Setter Property="Control.Template"><Setter.Value><ControlTemplate><Rectangle Margin="2" StrokeDashArray="1 2" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" SnapsToDevicePixels="true" StrokeThickness="1"/></ControlTemplate></Setter.Value></Setter></Style><SolidColorBrush x:Key="Button.Static.Background" Color="White"/><SolidColorBrush x:Key="Button.Static.Border" Color="White"/><SolidColorBrush x:Key="Button.MouseOver.Background" Color="White"/><SolidColorBrush x:Key="Button.MouseOver.Border" Color="White"/><SolidColorBrush x:Key="Button.MouseOver.Foreground" Color="Black"/><SolidColorBrush x:Key="Button.Pressed.Background" Color="White"/><SolidColorBrush x:Key="Button.Pressed.Border" Color="White"/><SolidColorBrush x:Key="Button.Disabled.Background" Color="White"/><SolidColorBrush x:Key="Button.Disabled.Border" Color="White"/><SolidColorBrush x:Key="Button.Disabled.Foreground" Color="White"/><Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"><Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/><Setter Property="Background" Value="{StaticResource Button.Static.Background}"/><Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/><Setter Property="BorderThickness" Value="1"/><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="VerticalContentAlignment" Value="Center"/><Setter Property="Padding" Value="1"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true"><ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Border><ControlTemplate.Triggers><Trigger Property="IsDefaulted" Value="true"><Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/></Trigger><Trigger Property="IsMouseOver" Value="true"><Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/><Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/><Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.MouseOver.Foreground}"/><Setter Property="RenderTransform"><Setter.Value><ScaleTransform ScaleX="1.2" ScaleY="1.2"/></Setter.Value></Setter></Trigger><Trigger Property="IsPressed" Value="true"><Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/><Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/></Trigger><Trigger Property="IsEnabled" Value="false"><Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/><Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/><Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Storyboard x:Key="Storyboard1"><ObjectAnimationUsingKeyFrames Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Visibility)"><DiscreteObjectKeyFrame KeyTime="00:00:00.2000000" Value="{x:Static Visibility.Visible}"/></ObjectAnimationUsingKeyFrames><ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Visibility)"><DiscreteObjectKeyFrame KeyTime="00:00:00.4000000" Value="{x:Static Visibility.Visible}"/></ObjectAnimationUsingKeyFrames><ObjectAnimationUsingKeyFrames Storyboard.TargetName="image1" Storyboard.TargetProperty="(UIElement.Visibility)"><DiscreteObjectKeyFrame KeyTime="00:00:00.5000000" Value="{x:Static Visibility.Visible}"/></ObjectAnimationUsingKeyFrames><ObjectAnimationUsingKeyFrames Storyboard.TargetName="image2" Storyboard.TargetProperty="(UIElement.Visibility)"><DiscreteObjectKeyFrame KeyTime="00:00:00.6000000" Value="{x:Static Visibility.Visible}"/></ObjectAnimationUsingKeyFrames></Storyboard></Window.Resources><Window.Triggers><EventTrigger RoutedEvent="FrameworkElement.Loaded"><BeginStoryboard Storyboard="{StaticResource Storyboard1}"/></EventTrigger></Window.Triggers><Grid><Rectangle Stroke="Black"  RadiusX="24.5" RadiusY="24.5" Fill="White"/><StackPanel  HorizontalAlignment="Left" Height="550" Width="125" VerticalAlignment="Center" ><Grid Height="40"><TextBlock Margin="15,0,20,0" TextWrapping="Wrap" Text="Stripe" Height="24" VerticalAlignment="Top" TextAlignment="Center" Foreground="#FF0B4EF1" FontFamily="Microsoft JhengHei" FontWeight="Bold" FontSize="16"/></Grid><Grid Height="60"><StackPanel Orientation="Horizontal"><Image Height="30" Width="35" Source="认证失败.png"/><Button Style="{DynamicResource ButtonStyle1}" Margin="1,0,20,0" Content="Stripe" Height="30" VerticalAlignment="Center"  FontFamily="Microsoft JhengHei" FontWeight="Bold" FontSize="14" Width="78" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF555151"/></StackPanel></Grid><Grid Height="60"><StackPanel Orientation="Horizontal"><Image Height="30" Width="35" Source="日历.png"/><Button Margin="1,0,20,0" Content="Stripe" Height="30" VerticalAlignment="Center"  FontFamily="Microsoft JhengHei" FontWeight="Bold" FontSize="14" Width="78" Background="{x:Null}" BorderBrush="{x:Null}" Style="{DynamicResource ButtonStyle1}" Foreground="#FF555151"/></StackPanel></Grid><Grid Height="60"><StackPanel Orientation="Horizontal"><Image Height="30" Width="35" Source="设置.png"/><Button Margin="1,0,20,0" Content="Stripe" Height="30" VerticalAlignment="Center"  FontFamily="Microsoft JhengHei" FontWeight="Bold" FontSize="14" Width="78" Background="{x:Null}" BorderBrush="{x:Null}" Style="{DynamicResource ButtonStyle1}" Foreground="#FF555151"/></StackPanel></Grid><Grid Height="60"><StackPanel Orientation="Horizontal"><Image Height="30" Width="35" Source="时间.png"/><Button Margin="1,0,20,0" Content="Stripe" Height="30" VerticalAlignment="Center"  FontFamily="Microsoft JhengHei" FontWeight="Bold" FontSize="14" Width="78" Background="{x:Null}" BorderBrush="{x:Null}" Style="{DynamicResource ButtonStyle1}" Foreground="#FF555151"/></StackPanel></Grid><Grid Height="60"><StackPanel Orientation="Horizontal"><Image Height="30" Width="35" Source="相机.png"/><Button Margin="1,0,20,0" Content="Stripe" Height="30" VerticalAlignment="Center"  FontFamily="Microsoft JhengHei" FontWeight="Bold" FontSize="14" Width="78" Background="{x:Null}" BorderBrush="{x:Null}" Style="{DynamicResource ButtonStyle1}" Foreground="#FF555151"/></StackPanel></Grid><Grid Height="60"><StackPanel Orientation="Horizontal"><Image Height="30" Width="35" Source="显示.png"/><Button Margin="1,0,20,0" Content="Stripe" Height="30" VerticalAlignment="Center"  FontFamily="Microsoft JhengHei" FontWeight="Bold" FontSize="14" Width="78" Background="{x:Null}" BorderBrush="{x:Null}" Style="{DynamicResource ButtonStyle1}" Foreground="#FF555151"/></StackPanel></Grid></StackPanel><Rectangle x:Name="rectangle" HorizontalAlignment="Left" Height="295" Margin="215,-30,0,0" Stroke="Black" VerticalAlignment="Top" Width="540" Fill="#FF3938B6" Visibility="Hidden"/><Image x:Name="image" Margin="220,130,575,355" Source="日历.png" Stretch="Fill" Width="100" Height="100" Visibility="Hidden"/><Image x:Name="image1" Margin="355,90,345,310" Source="设置.png" Stretch="Fill" Width="100" Height="100" RenderTransformOrigin="-1.05,0.45" Visibility="Hidden"/><Image x:Name="image2" Margin="600,140,200,360" Source="相机.png" Stretch="Fill" Width="100" Height="100" Visibility="Hidden"/></Grid>
</Window>

二.使用Blend

1.Blend工具版本

当我们下载Visual Studio时，会自动下载一个同样版本的Blend。
如果界面需要实际到动画的话，这里推荐用2019版的Blend，不要用2022版的Blend，因为2019版的Blend有触发器这一视图，在这个视图中我们可以用来涉及动画，而2022版本的Blend把触发器这一视图给阉割了，如图是2019版本Blend中的触发器视图：
在这里插入图片描述


http://chatgpt.dhexx.cn/article/fhy2T7SY.shtml

相关文章

C# WPF 一个设计界面

C# WPF 一个设计界面

微信公众号&#xff1a;Dotnet9&#xff0c;网站&#xff1a;Dotnet9&#xff0c;问题或建议&#xff1a;请网站留言&#xff0c; 如果对您有所帮助&#xff1a;欢迎赞赏。 C# WPF 一个设计界面 今天正月初三&#xff0c;大家在家呆着挺好&#xff0c;不要忘了自我充电。 武汉…
阅读更多...
WPF界面设计

WPF界面设计

目录 1.设计一个优美的注册界面1.实现效果2.代码展示 2.简易登录按钮设计1.实现效果2.代码展示 3.设计一个优美的注册登录界面&#xff08;连接数据库&#xff09;1.实现效果2.代码展示 4.设计一个简单的在线教育系统界面1.实现效果2.代码展示 5. 设计一个Dashboard1.实现效果2…
阅读更多...
WPF实例系列一：登录、注册界面设计

WPF实例系列一：登录、注册界面设计

WPF实例系列一&#xff1a;登录、注册界面设计 文章目录 WPF实例系列一&#xff1a;登录、注册界面设计前言一、实例演示1. 登录界面展示2. 注册界面展示3. 数据存储4. 效果演示 二、结构及源码1.主界面跳转登录界面设计2.登录界面设计3.注册界面设计4.Excel保存数据类设计5.源…
阅读更多...
C# WPF界面设计参考 工控机上位机界面 美观炫酷的现代化风格界面设计实际案例分享 界面设计代码

C# WPF界面设计参考 工控机上位机界面 美观炫酷的现代化风格界面设计实际案例分享 界面设计代码

1.动图效果展示 2.界面1 3.界面2 4.界面3 需要界面效果代码的可留言联系博主
阅读更多...
WPF界面设计学习

WPF界面设计学习

github上发现了一个不错的项目&#xff1a; https://github.com/HenJigg/wpf-uidesign 还配有B站的学习视频&#xff1a; https://space.bilibili.com/32497462 看了这个项目&#xff0c;觉得自己学了这么多年的WPF&#xff0c;界面还设计的这么丑&#xff0c;顿时脸都不知道往…
阅读更多...
C# WPF十个美观的界面设计展示

C# WPF十个美观的界面设计展示

概述 很多时候&#xff0c;我们设计的界面总是感觉缺乏美感&#xff0c;不是我们不会开发好看的界面&#xff0c;而是不知道怎么才算美观&#xff0c;这时候我们不妨看看别人好的页面是怎么做的.下面展示一些我觉得做的比较好的cs界面&#xff0c;希望能给大家在平时做界面设计…
阅读更多...
WPF|分享一个登录界面设计

WPF|分享一个登录界面设计

分享一个登录界面&#xff0c;先看效果图&#xff1a; 准备 文中使用到了一些图标&#xff1a; [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZsHcZCFv-1652400544809)(https://img1.dotnet9.com/2022/05/3402.png)] 我们可以从 iconfont免费下载…
阅读更多...
行列式的意义

行列式的意义

本文转自http://www.cnblogs.com/AndyJee/p/3491487.html 三、行列式的几何意义&#xff1a; 行列式的定义&#xff1a; 行列式是由一些数据排列成的方阵经过规定的计算方法而得到的一个数。当然&#xff0c;如果行列式中含有未知数&#xff0c;那么行列式就是一个多项式。它…
阅读更多...
矩阵——对称行列式快解

矩阵——对称行列式快解

1、先化成爪型行列式 2、再化成上三角或下三角 第一步&#xff1a;把第1行的1倍分别加至第2、3、4行&#xff0c;化为爪型行列式 第二步&#xff1a;把第2、3、4列的&#xff08;-1&#xff09;倍都加到第1列&#xff0c;化为上三角 第三步&#xff1a;得出结果
阅读更多...
【线性代数】一、行列式和矩阵

【线性代数】一、行列式和矩阵

一、行列式 文章目录 一、行列式1.1 行列式性质1.2 余子式行列式按照行列展开的展开公式 一、行列式求解1.用行列式2.用矩阵3.用特征值 1.3 行列式计算一、具体形行列式(1)直接运算1.行\列和相等类型2.爪形、异爪形行列式 (2)化为121个基本行列式1. 主副对角线行列式2. 拉普拉斯…
阅读更多...
矩阵/行列式的意义

矩阵/行列式的意义

一、代数意义 矩阵乘法规则看起来比较复杂&#xff0c;不容易理解其乘法规则背后隐含的意义。现举一个例子说明矩阵乘法的意义。如下图所示&#xff0c;一个商店出售Beef pie&#xff0c;chicken pie&#xff0c;vegetable pie&#xff0c;其单价分别为3元&#xff0c;4元&…
阅读更多...
矩阵的行列式、秩的意义

矩阵的行列式、秩的意义

线性代数真是一个很抽象的东西&#xff0c;即使我们很多人都学过&#xff0c;但是我相信绝大部分的都不知道这是干嘛用的&#xff0c;找了不少资料&#xff0c;终于发现了这么一篇好文章&#xff0c;于是强烈希望可以和大家分享&#xff0c;帮助大伙进一步理解矩阵的行列式和秩…
阅读更多...
线代第二章 矩阵 +行列式与矩阵的区别

线代第二章 矩阵 +行列式与矩阵的区别

行列式与矩阵的区别 一、 行列式是一个数&#xff0c;矩阵是一个表格。 &#xff08;行列式都是n阶的方阵&#xff0c;但矩阵不一定是方阵Ann&#xff0c;也可以是Amn&#xff09; 只有n阶矩阵Ann&#xff1a;才有对应的行列式|A|&#xff0c;才能计算对应行列式的模。 二、…
阅读更多...
行列式和矩阵的区别

行列式和矩阵的区别

1&#xff0c;本质上 &#xff08;1&#xff09;行列式是一个数&#xff0c;一个值。当有未知数时就是一个表达式。 &#xff08;2&#xff09;矩阵是一个数表&#xff0c;一种数据结构&#xff0c;可以按照数据库表结构来理解&#xff0c;也可以理解成二维数组。 矩阵是不能…
阅读更多...
线性代数 —— 矩阵的行列式

线性代数 —— 矩阵的行列式

1.行列式 排成 n 阶方阵形式的 n^2 个数所确定的一个数称为 n 阶方阵 A 的行列式&#xff0c;记为&#xff1a;det(A) 或 |A| 一个 2x2 的矩阵的行列式可表示为&#xff1a; 2.余子式与代数余子式 将 n 阶行列式中元素 的第 i 行和第 j 列划去后&#xff0c;留下的 n-1 阶…
阅读更多...
行列式与矩阵的区别

行列式与矩阵的区别

1、行列式的本质是线性变换的放大率&#xff0c;而矩阵的本质就是个数表。 2、行列式行数列数&#xff0c;矩阵不一定&#xff08;行数列数都等于n的叫n阶方阵&#xff09;&#xff0c;二者的表示方式亦有区别。 3、行列式与矩阵的运算明显不同 &#xff08;1&#xff09; 相…
阅读更多...
怎么求矩阵行列式？工作之后的复习

怎么求矩阵行列式？工作之后的复习

相信很多工作以后的人可能还知道矩阵行列式是什么&#xff0c;但是具体怎么求&#xff0c;可能忘记了&#xff0c;本文则带大家复习下矩阵行列式。深度学习&#xff0c;等等的一些前沿算法&#xff0c;都会用到矩阵额。 一维矩阵的行列式则是本身 二维矩阵的行列式【二阶行列式…
阅读更多...
深度之眼（三）——矩阵的行列式

深度之眼（三）——矩阵的行列式

文章目录 一、行列式的定义1.1 二阶行列式1.2 三阶行列式 二、行列式的计算2.1 全排列和逆序列2.2 计算定义 三、特殊矩阵的行列式与行列式的性质3.1 特殊矩阵的行列式3.2 行列式的性质 四、行列式按行&#xff08;列&#xff09;展开&#xff0c;代数余子式五、行列式在线性方…
阅读更多...
推荐一些国内外文献检索与免费下载的网站

推荐一些国内外文献检索与免费下载的网站

点击即可打开链接&#xff1a; 1.SCI-Hub 2.CiteSeerX 3.arXiv.org 4.FINDARTICLES 5.scinapse&#xff08;用于检索比较好用&#xff0c;下载不了的在SCI-Hub上下载&#xff09; 6.SAGE journals 7.Open Access Libarary 8.CNPLINKER 9.DSpaceMIT&#xff08;可以搜到…
阅读更多...
如何查找下载外文文献，超强外文文献检索网站排名

如何查找下载外文文献，超强外文文献检索网站排名

英文文献哪里找&#xff0c;下面小编给大家推荐几个超强英文文献下载网站&#xff0c;推荐排名如下&#xff1a; 第4名&#xff1a;sci-hub 这个网站很多科研人都知道&#xff0c;优点是可以免费下载英文文献&#xff0c;缺点是网站不太稳定经常换域名&#xff0c;而且需要你明…
阅读更多...
推荐文章

Copyright @ 2022~2023