![cover](https://img-blog.csdnimg.cn/6bb337e5e24e45cab993e9bd08c5b6f8.jpeg)
WPF界面设计工具---Blend学习(一)
最近在空闲时间学习WPF界面设计工具Blend,之前写WPF的界面都是完全依靠手敲代码的方式,这种方式往往很低效率而且很难做到一些复杂的效果。比如动画,手敲代码实现动画的话,往往要写很多代码;而用Blend的话,只需两三分钟就可以实现一个效果很不错的动画,方便快捷,因此开始记录Blend工具学习之路,一边摸索一边记录。这是花了半个小时用Blend工具设计出的一个简单界面,效果如下:这是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中的触发器视图:
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)