/// 按钮类型 /// public enum _wpf ui框架">
devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

WPF UI框架界面开发教程（十一）

作者：运维做开发 | 2024-07-05 18:13:30

赞

踩

wpf ui框架

在项目开发中，按钮有多种形态，UI样式文件比较散乱，不方便维护和扩展，比如按钮有文本、图标+文本、动画、链接等几种类型。每种类型写一个样式，所以在按钮中增加枚举类型，判断是哪种类型按钮，加载相对应用控件模板，假如是链接按钮，设置local:ButtonFrameHelper.Type ="Link"就完成样式切换。

WPF UI框架界面开发教程

  1. /// <summary>
  2.     /// 按钮类型
  3.     /// </summary>
  4.     public enum ButtonType
  5.     {
  6.         /// <summary>
  7.         /// 文本
  8.         /// </summary>
  9.         [Description("文本")]
  10.         Text = 0,
  11.  
  12.         /// <summary>
  13.         /// 图标和文本
  14.         /// </summary>
  15.         [Description("图标和文本")]
  16.         IconText = 1,
  17.  
  18.         /// <summary>
  19.         /// 动画
  20.         /// </summary>
  21.         [Description("动画")]
  22.         Animation = 2,
  23.  
  24.         /// <summary>
  25.         /// 链接
  26.         /// </summary>
  27.         [Description("链接")]
  28.         Link = 3,
  29.     }

１：首先添加button类型枚举参数。
 

  1. public class ButtonFrameHelper : DependencyObject
  2.     {
  3.         /// <summary>
  4.         /// 按钮类型
  5.         /// </summary>
  6.         public static readonly DependencyProperty TypeProperty = DependencyProperty.Register(
  7.            "Type", typeof(ButtonType), typeof(ButtonFrameHelper), new PropertyMetadata(default(ButtonType)));
  8.  
  9.         public static ButtonType GetType(DependencyObject property)
  10.         {
  11.             return (ButtonType)property.GetValue(TypeProperty);
  12.         }
  13.  
  14.         public static void SetType(DependencyObject property, ButtonType value)
  15.         {
  16.             property.SetValue(TypeProperty, value);
  17.         }
  18.  
  19.         /// <summary>
  20.         /// 按钮图标
  21.         /// </summary>
  22.         public Geometry Icon
  23.         {
  24.             get { return (Geometry)GetValue(IconProperty); }
  25.             set { SetValue(IconProperty, value); }
  26.         }
  27.  
  28.         public static readonly DependencyProperty IconProperty =
  29.             DependencyProperty.Register("Icon", typeof(Geometry), typeof(ButtonFrameHelper));
  30.  
  31.     }

2：添加Button类依赖属性，Type是Button枚举类型，通过设置此参数来切换，Icon是图标+文本按钮需要此属性。

下面把说明样式代码：

  1. <Style TargetType="{x:Type Button}">        
  2.         <Setter Property="Foreground" Value="{StaticResource ForegroundLightBrush}"/>
  3.         <Setter Property="BorderThickness" Value="0"/>
  4.         <Setter Property="Template" Value="{DynamicResource TextButton}"/>
  5.         <Style.Triggers>
  6.             <Trigger Property="local:ButtonFrameHelper.Type" Value="Text">
  7.                 <Setter Property="Margin" Value="0,10,0,0"/>
  8.                 <Setter Property="Padding" Value="50,10"/>
  9.                 <Setter Property="Background" Value="{StaticResource WordOrangeBrush}"/>
  10.                 <Setter Property="FontSize" Value="{StaticResource Nb.FontSize.30}"/>
  11.                 <Setter Property="local:BusyFrameAnimation.IsBusy" Value="False"/>
  12.                 <Setter Property="Template" Value="{DynamicResource TextButton}"/>
  13.             </Trigger>
  14.             <Trigger Property="local:ButtonFrameHelper.Type" Value="IconText">
  15.                 <Setter Property="Width" Value="150"/>
  16.                 <Setter Property="Height" Value="60"/>
  17.                 <Setter Property="Background" Value="{StaticResource WordOrangeBrush}"/>
  18.                 <Setter Property="FontSize" Value="{StaticResource Nb.FontSize.30}"/>
  19.                 <Setter Property="HorizontalContentAlignment" Value="Center" />
  20.                 <Setter Property="VerticalContentAlignment" Value="Center" />
  21.                 <Setter Property="local:ButtonFrameHelper.Icon" Value="{DynamicResource Icon-Checked}"/>
  22.                 <Setter Property="local:BusyFrameAnimation.IsBusy" Value="False"/>
  23.                 <Setter Property="Template" Value="{DynamicResource IconTextButton}"/>
  24.             </Trigger>
  25.  
  26.             <Trigger Property="local:ButtonFrameHelper.Type" Value="Animation">
  27.                 <Setter Property="Margin" Value="0,10,0,0"/>
  28.                 <Setter Property="Padding" Value="50,10"/>
  29.                 <Setter Property="Background" Value="{StaticResource WordOrangeBrush}"/>
  30.                 <Setter Property="FontSize" Value="{StaticResource Nb.FontSize.30}"/>
  31.                 <Setter Property="local:BusyFrameAnimation.IsBusy" Value="False"/>
  32.                 <Setter Property="Template" Value="{DynamicResource AnimationButton}"/>
  33.             </Trigger>
  34.             <Trigger Property="local:ButtonFrameHelper.Type" Value="Link">
  35.                 <Setter Property="Background" Value="Transparent"/>
  36.                 <Setter Property="BorderThickness" Value="0"/>
  37.                 <Setter Property="FontSize" Value="{StaticResource Nb.FontSize.20}"/>
  38.                 <Setter Property="Margin" Value="0,10"/>
  39.                 <Setter Property="Padding" Value="50,10"/>
  40.                 <Setter Property="Cursor" Value="Hand"/>
  41.                 <Setter Property="Template" Value="{DynamicResource LinkButton}"/>
  42.             </Trigger>
  43.         </Style.Triggers>
  44.     </Style>
  45.  
  46.     <!--链接类型按钮-->
  47.     <ControlTemplate x:Key="LinkButton" TargetType="{x:Type Button}">
  48.         <Border x:Name="border"
  49.             CornerRadius="10"
  50.             BorderBrush="{TemplateBinding BorderBrush}" 
  51.             BorderThickness="{TemplateBinding BorderThickness}" 
  52.             Background="{TemplateBinding Background}" 
  53.             SnapsToDevicePixels="True">
  54.             <TextBlock Text="{TemplateBinding Content}" 
  55.                 Focusable="False"
  56.                 FontFamily="{TemplateBinding FontFamily}"
  57.                 FontSize="{TemplateBinding FontSize}"
  58.                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
  59.                 Margin="{TemplateBinding Padding}" 
  60.                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
  61.                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
  62.         </Border>
  63.         <ControlTemplate.Triggers>          
  64.             <Trigger Property="IsMouseOver" Value="True">
  65.                 <Setter Property="Foreground" Value="{StaticResource WordOrangeBrush}"/>
  66.             </Trigger>
  67.             <Trigger Property="IsEnabled" Value="False">
  68.                 <Setter Property="Foreground" Value="{StaticResource ForegroundDarkBrush}"/>
  69.             </Trigger>
  70.         </ControlTemplate.Triggers>
  71.     </ControlTemplate>
  72.  
  73.     <!--文本类型按钮-->
  74.     <ControlTemplate x:Key="TextButton" TargetType="{x:Type Button}">
  75.         <Border x:Name="border"
  76.             CornerRadius="10"
  77.             BorderBrush="{TemplateBinding BorderBrush}" 
  78.             BorderThickness="{TemplateBinding BorderThickness}" 
  79.             Background="{TemplateBinding Background}" 
  80.             SnapsToDevicePixels="True">
  81.             <Grid>
  82.                 <TextBlock Text="{TemplateBinding Content}"
  83.                     Visibility="{TemplateBinding local:BusyFrameAnimation.IsBusy, Converter={cv:BoolenToVisiblityConverter}}"
  84.                     Focusable="False"
  85.                     FontFamily="{TemplateBinding FontFamily}"
  86.                     FontSize="{TemplateBinding FontSize}"
  87.                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
  88.                     Margin="{TemplateBinding Padding}" 
  89.                     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
  90.                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
  91.             </Grid>
  92.         </Border>
  93.         <ControlTemplate.Triggers>
  94.             <EventTrigger RoutedEvent="MouseEnter">
  95.                 <BeginStoryboard>
  96.                     <Storyboard>
  97.                         <ColorAnimation To="{StaticResource WordBlue}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
  98.                     </Storyboard>
  99.                 </BeginStoryboard>
  100.             </EventTrigger>
  101.             <EventTrigger RoutedEvent="MouseLeave">
  102.                 <BeginStoryboard>
  103.                     <Storyboard>
  104.                         <ColorAnimation From="{StaticResource WordBlue}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
  105.                     </Storyboard>
  106.                 </BeginStoryboard>
  107.             </EventTrigger>
  108.             <Trigger Property="IsEnabled" Value="False">
  109.                 <Setter Property="Background" TargetName="border" Value="{StaticResource ForegroundDarkBrush}"/>
  110.             </Trigger>
  111.         </ControlTemplate.Triggers>
  112.     </ControlTemplate>
  113.  
  114.     <!--图标和文本类型按钮-->
  115.     <ControlTemplate x:Key="IconTextButton" TargetType="{x:Type Button}">
  116.         <Border x:Name="border"
  117.             CornerRadius="10"
  118.             BorderBrush="{TemplateBinding BorderBrush}" 
  119.             BorderThickness="{TemplateBinding BorderThickness}" 
  120.             Background="{TemplateBinding Background}"
  121.             SnapsToDevicePixels="True">
  122.             <Grid>
  123.                 <StackPanel Orientation="Horizontal" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
  124.                     <Viewbox x:Name="IconBox" Width="{TemplateBinding FontSize}" Height="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
  125.                         <Path Data="{TemplateBinding local:ButtonFrameHelper.Icon}" Fill="{TemplateBinding Foreground}" Stretch="Fill"></Path>
  126.                     </Viewbox>
  127.                     <Grid x:Name="IconSplit" Width="5"></Grid>
  128.                     <TextBlock Text="{TemplateBinding Content}"                                    
  129.                         Focusable="False"
  130.                         FontFamily="{TemplateBinding FontFamily}"
  131.                         FontSize="{TemplateBinding FontSize}"
  132.                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
  133.                         Margin="{TemplateBinding Padding}" 
  134.                         SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
  135.                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
  136.                 </StackPanel>
  137.             </Grid>
  138.         </Border>
  139.         <ControlTemplate.Triggers>
  140.             <EventTrigger RoutedEvent="MouseEnter">
  141.                 <BeginStoryboard>
  142.                     <Storyboard>
  143.                         <ColorAnimation To="{StaticResource WordBlue}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
  144.                     </Storyboard>
  145.                 </BeginStoryboard>
  146.             </EventTrigger>
  147.             <EventTrigger RoutedEvent="MouseLeave">
  148.                 <BeginStoryboard>
  149.                     <Storyboard>
  150.                         <ColorAnimation From="{StaticResource WordBlue}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
  151.                     </Storyboard>
  152.                 </BeginStoryboard>
  153.             </EventTrigger>
  154.             <Trigger Property="IsEnabled" Value="False">
  155.                 <Setter Property="Background" TargetName="border" Value="{StaticResource ForegroundDarkBrush}"/>
  156.             </Trigger>
  157.             <Trigger Property="local:ButtonFrameHelper.Icon" Value="{x:Null}">
  158.                 <Setter TargetName="IconBox" Property="Visibility" Value="Collapsed" />
  159.                 <Setter TargetName="IconSplit" Property="Visibility" Value="Collapsed" />
  160.             </Trigger>
  161.         </ControlTemplate.Triggers>
  162.     </ControlTemplate>
  163.  
  164.     <!--动画类型按钮-->
  165.     <ControlTemplate x:Key="AnimationButton" TargetType="{x:Type Button}">
  166.         <Border x:Name="border"
  167.             CornerRadius="10"
  168.             BorderBrush="{TemplateBinding BorderBrush}" 
  169.             BorderThickness="{TemplateBinding BorderThickness}" 
  170.             Background="{TemplateBinding Background}" 
  171.             SnapsToDevicePixels="True">
  172.             <Grid>
  173.                 <TextBlock Text="{TemplateBinding Content}"
  174.                         Visibility="{TemplateBinding local:BusyFrameAnimation.IsBusy, Converter={cv:BoolenToVisiblityConverter}}"
  175.                         Focusable="False"
  176.                         FontFamily="{TemplateBinding FontFamily}"
  177.                         FontSize="{TemplateBinding FontSize}"
  178.                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
  179.                         Margin="{TemplateBinding Padding}" 
  180.                         SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
  181.                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
  182.  
  183.                 <Label Style="{DynamicResource SpinningLabel}"
  184.                         FontSize="{TemplateBinding FontSize}"
  185.                         Foreground="{TemplateBinding Foreground}"
  186.                         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
  187.                         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
  188.                         Visibility="{TemplateBinding local:BusyFrameAnimation.IsBusy, Converter={cv:BoolenToVisiblityConverter}, ConverterParameter=True}"/>
  189.             </Grid>
  190.         </Border>
  191.         <ControlTemplate.Triggers>
  192.             <EventTrigger RoutedEvent="MouseEnter">
  193.                 <BeginStoryboard>
  194.                     <Storyboard>
  195.                         <ColorAnimation To="{StaticResource WordBlue}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
  196.                     </Storyboard>
  197.                 </BeginStoryboard>
  198.             </EventTrigger>
  199.             <EventTrigger RoutedEvent="MouseLeave">
  200.                 <BeginStoryboard>
  201.                     <Storyboard>
  202.                         <ColorAnimation From="{StaticResource WordBlue}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
  203.                     </Storyboard>
  204.                 </BeginStoryboard>
  205.             </EventTrigger>
  206.             <Trigger Property="IsEnabled" Value="False">
  207.                 <Setter Property="Background" TargetName="border" Value="{StaticResource ForegroundDarkBrush}"/>
  208.             </Trigger>
  209.         </ControlTemplate.Triggers>
  210.     </ControlTemplate>

TriggerProperty="local:ButtonFrameHelper.Type"Value="Text" 设置是文本类型，<SetterProperty="Template"Value="{DynamicResource TextButton}"/> 设置模板动态加载资源 TextButton，其它类型以此类推。

最后添加page页测试这几种按钮类型

  1. <Page x:Class="Fashion.Word.Pages.ControlPage"
  2.       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  5.       xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  6.       xmlns:local="clr-namespace:Fashion.Word"
  7.       mc:Ignorable="d" 
  8.       d:DesignHeight="450" d:DesignWidth="600"
  9.       Title="ControlPage">
  10.  
  11.     <Border>
  12.         <Grid>
  13.             <StackPanel
  14.                 VerticalAlignment="Center"
  15.                 HorizontalAlignment="Center"
  16.                 TextBlock.TextAlignment="Center">
  17.                 <Border Background="{StaticResource ForegroundLightBrush}"
  18.                     CornerRadius="10"
  19.                     Padding="15,50,15,15"
  20.                     Width="330"
  21.                     Margin="50,50,50,0">
  22.                     <StackPanel >
  23.                         <Button local:ButtonFrameHelper.Type ="Text"  
  24.                             Content="文本" 
  25.                             HorizontalAlignment="Center"/>
  26.                         <Button Grid.Row="2" Margin="0,10,0,0" 
  27.                             local:ButtonFrameHelper.Type ="IconText"  
  28.                             Content="图标"
  29.                             HorizontalAlignment="Center"/>
  30.                         <Button Grid.Row="2" Margin="0,10,0,0" 
  31.                             local:ButtonFrameHelper.Type ="Animation"  
  32.                             Content="动画"
  33.                             HorizontalAlignment="Center"/>
  34.                     </StackPanel>
  35.                 </Border>
  36.                 <Button local:ButtonFrameHelper.Type ="Link"
  37.                         Command="{Binding RegisterCommand}"
  38.                         Content="免费注册新帐户." 
  39.                         HorizontalAlignment="Center">
  40.                 </Button>
  41.             </StackPanel>
  42.         </Grid>
  43.     </Border>
  44. </Page>

这样就不需要找有哪些样式button。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/790695?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号