WPF UI框架界面开发教程(十一)

92 篇文章 18 订阅
92 篇文章 9 订阅

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

WPF UI框架界面开发教程

/// <summary>
    /// 按钮类型
    /// </summary>
    public enum ButtonType
    {
        /// <summary>
        /// 文本
        /// </summary>
        [Description("文本")]
        Text = 0,

        /// <summary>
        /// 图标和文本
        /// </summary>
        [Description("图标和文本")]
        IconText = 1,

        /// <summary>
        /// 动画
        /// </summary>
        [Description("动画")]
        Animation = 2,

        /// <summary>
        /// 链接
        /// </summary>
        [Description("链接")]
        Link = 3,
    }

1:首先添加button类型枚举参数。
 

public class ButtonFrameHelper : DependencyObject
    {
        /// <summary>
        /// 按钮类型
        /// </summary>
        public static readonly DependencyProperty TypeProperty = DependencyProperty.Register(
           "Type", typeof(ButtonType), typeof(ButtonFrameHelper), new PropertyMetadata(default(ButtonType)));

        public static ButtonType GetType(DependencyObject property)
        {
            return (ButtonType)property.GetValue(TypeProperty);
        }

        public static void SetType(DependencyObject property, ButtonType value)
        {
            property.SetValue(TypeProperty, value);
        }

        /// <summary>
        /// 按钮图标
        /// </summary>
        public Geometry Icon
        {
            get { return (Geometry)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }

        public static readonly DependencyProperty IconProperty =
            DependencyProperty.Register("Icon", typeof(Geometry), typeof(ButtonFrameHelper));

    }

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

下面把说明样式代码:

<Style TargetType="{x:Type Button}">        
        <Setter Property="Foreground" Value="{StaticResource ForegroundLightBrush}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Template" Value="{DynamicResource TextButton}"/>
        <Style.Triggers>
            <Trigger Property="local:ButtonFrameHelper.Type" Value="Text">
                <Setter Property="Margin" Value="0,10,0,0"/>
                <Setter Property="Padding" Value="50,10"/>
                <Setter Property="Background" Value="{StaticResource WordOrangeBrush}"/>
                <Setter Property="FontSize" Value="{StaticResource Nb.FontSize.30}"/>
                <Setter Property="local:BusyFrameAnimation.IsBusy" Value="False"/>
                <Setter Property="Template" Value="{DynamicResource TextButton}"/>
            </Trigger>
            <Trigger Property="local:ButtonFrameHelper.Type" Value="IconText">
                <Setter Property="Width" Value="150"/>
                <Setter Property="Height" Value="60"/>
                <Setter Property="Background" Value="{StaticResource WordOrangeBrush}"/>
                <Setter Property="FontSize" Value="{StaticResource Nb.FontSize.30}"/>
                <Setter Property="HorizontalContentAlignment" Value="Center" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="local:ButtonFrameHelper.Icon" Value="{DynamicResource Icon-Checked}"/>
                <Setter Property="local:BusyFrameAnimation.IsBusy" Value="False"/>
                <Setter Property="Template" Value="{DynamicResource IconTextButton}"/>
            </Trigger>

            <Trigger Property="local:ButtonFrameHelper.Type" Value="Animation">
                <Setter Property="Margin" Value="0,10,0,0"/>
                <Setter Property="Padding" Value="50,10"/>
                <Setter Property="Background" Value="{StaticResource WordOrangeBrush}"/>
                <Setter Property="FontSize" Value="{StaticResource Nb.FontSize.30}"/>
                <Setter Property="local:BusyFrameAnimation.IsBusy" Value="False"/>
                <Setter Property="Template" Value="{DynamicResource AnimationButton}"/>
            </Trigger>
            <Trigger Property="local:ButtonFrameHelper.Type" Value="Link">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="FontSize" Value="{StaticResource Nb.FontSize.20}"/>
                <Setter Property="Margin" Value="0,10"/>
                <Setter Property="Padding" Value="50,10"/>
                <Setter Property="Cursor" Value="Hand"/>
                <Setter Property="Template" Value="{DynamicResource LinkButton}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <!--链接类型按钮-->
    <ControlTemplate x:Key="LinkButton" TargetType="{x:Type Button}">
        <Border x:Name="border"
            CornerRadius="10"
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}" 
            Background="{TemplateBinding Background}" 
            SnapsToDevicePixels="True">
            <TextBlock Text="{TemplateBinding Content}" 
                Focusable="False"
                FontFamily="{TemplateBinding FontFamily}"
                FontSize="{TemplateBinding FontSize}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                Margin="{TemplateBinding Padding}" 
                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Border>
        <ControlTemplate.Triggers>          
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="{StaticResource WordOrangeBrush}"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="{StaticResource ForegroundDarkBrush}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!--文本类型按钮-->
    <ControlTemplate x:Key="TextButton" TargetType="{x:Type Button}">
        <Border x:Name="border"
            CornerRadius="10"
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}" 
            Background="{TemplateBinding Background}" 
            SnapsToDevicePixels="True">
            <Grid>
                <TextBlock Text="{TemplateBinding Content}"
                    Visibility="{TemplateBinding local:BusyFrameAnimation.IsBusy, Converter={cv:BoolenToVisiblityConverter}}"
                    Focusable="False"
                    FontFamily="{TemplateBinding FontFamily}"
                    FontSize="{TemplateBinding FontSize}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" 
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation To="{StaticResource WordBlue}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation From="{StaticResource WordBlue}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" TargetName="border" Value="{StaticResource ForegroundDarkBrush}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!--图标和文本类型按钮-->
    <ControlTemplate x:Key="IconTextButton" TargetType="{x:Type Button}">
        <Border x:Name="border"
            CornerRadius="10"
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}" 
            Background="{TemplateBinding Background}"
            SnapsToDevicePixels="True">
            <Grid>
                <StackPanel Orientation="Horizontal" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
                    <Viewbox x:Name="IconBox" Width="{TemplateBinding FontSize}" Height="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <Path Data="{TemplateBinding local:ButtonFrameHelper.Icon}" Fill="{TemplateBinding Foreground}" Stretch="Fill"></Path>
                    </Viewbox>
                    <Grid x:Name="IconSplit" Width="5"></Grid>
                    <TextBlock Text="{TemplateBinding Content}"                                    
                        Focusable="False"
                        FontFamily="{TemplateBinding FontFamily}"
                        FontSize="{TemplateBinding FontSize}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        Margin="{TemplateBinding Padding}" 
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </StackPanel>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation To="{StaticResource WordBlue}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation From="{StaticResource WordBlue}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" TargetName="border" Value="{StaticResource ForegroundDarkBrush}"/>
            </Trigger>
            <Trigger Property="local:ButtonFrameHelper.Icon" Value="{x:Null}">
                <Setter TargetName="IconBox" Property="Visibility" Value="Collapsed" />
                <Setter TargetName="IconSplit" Property="Visibility" Value="Collapsed" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!--动画类型按钮-->
    <ControlTemplate x:Key="AnimationButton" TargetType="{x:Type Button}">
        <Border x:Name="border"
            CornerRadius="10"
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}" 
            Background="{TemplateBinding Background}" 
            SnapsToDevicePixels="True">
            <Grid>
                <TextBlock Text="{TemplateBinding Content}"
                        Visibility="{TemplateBinding local:BusyFrameAnimation.IsBusy, Converter={cv:BoolenToVisiblityConverter}}"
                        Focusable="False"
                        FontFamily="{TemplateBinding FontFamily}"
                        FontSize="{TemplateBinding FontSize}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        Margin="{TemplateBinding Padding}" 
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                <Label Style="{DynamicResource SpinningLabel}"
                        FontSize="{TemplateBinding FontSize}"
                        Foreground="{TemplateBinding Foreground}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        Visibility="{TemplateBinding local:BusyFrameAnimation.IsBusy, Converter={cv:BoolenToVisiblityConverter}, ConverterParameter=True}"/>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation To="{StaticResource WordBlue}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation From="{StaticResource WordBlue}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" TargetName="border" Value="{StaticResource ForegroundDarkBrush}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

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

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

<Page x:Class="Fashion.Word.Pages.ControlPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:Fashion.Word"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="600"
      Title="ControlPage">

    <Border>
        <Grid>
            <StackPanel
                VerticalAlignment="Center"
                HorizontalAlignment="Center"
                TextBlock.TextAlignment="Center">
                <Border Background="{StaticResource ForegroundLightBrush}"
                    CornerRadius="10"
                    Padding="15,50,15,15"
                    Width="330"
                    Margin="50,50,50,0">
                    <StackPanel >
                        <Button local:ButtonFrameHelper.Type ="Text"  
                            Content="文本" 
                            HorizontalAlignment="Center"/>
                        <Button Grid.Row="2" Margin="0,10,0,0" 
                            local:ButtonFrameHelper.Type ="IconText"  
                            Content="图标"
                            HorizontalAlignment="Center"/>
                        <Button Grid.Row="2" Margin="0,10,0,0" 
                            local:ButtonFrameHelper.Type ="Animation"  
                            Content="动画"
                            HorizontalAlignment="Center"/>
                    </StackPanel>
                </Border>
                <Button local:ButtonFrameHelper.Type ="Link"
                        Command="{Binding RegisterCommand}"
                        Content="免费注册新帐户." 
                        HorizontalAlignment="Center">
                </Button>
            </StackPanel>
        </Grid>
    </Border>
</Page>

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值