网站开发 顺德,做新闻微网站有哪些,天元建设集团有限公司七公司,什么是大型门户网站要搞点小软件#xff0c;又不想使用图标和图标类库#xff0c;突然想起FontAwesome,试了一下#xff0c;还挺方便的#xff0c;先弄了几个最常用的图标试一下#xff0c;弄了几个按钮的样式#xff0c;看一下效果#xff1a;看一下fontAwesome使用方法#xff1a;首先从… 要搞点小软件又不想使用图标和图标类库突然想起FontAwesome,试了一下还挺方便的先弄了几个最常用的图标试一下弄了几个按钮的样式看一下效果看一下fontAwesome使用方法首先从官网下载字体地址http://www.fontawesome.com.cn/下载后把其中的 fontawesome-webfont.ttf 复制到软件目录添加一个几个资源字典Base.xaml : ResourceDictionary xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:sysclr-namespace:System;assemblymscorlibResourceDictionary.MergedDictionariesResourceDictionary SourceColors.xaml//ResourceDictionary.MergedDictionariessys:Double x:KeyFontSizeMini 12/sys:Doublesys:Double x:KeyFontSizeNormal 14/sys:Doublesys:Double x:KeyFontSizeLarge 16/sys:DoubleFontFamily x:KeyFontAwesomepack://application;,,,/Fonts/#FontAwesome/FontFamily!--FontAwesome Icons Strings--sys:String x:KeySettingIcon#xf013;/sys:Stringsys:String x:KeyMinsizeIcon#xf2d1;/sys:Stringsys:String x:KeyMaxsizeIcon#xf2d0;/sys:Stringsys:String x:KeyCloseIcon#xf00d;/sys:StringStyle x:KeyBaseStyle TargetType{x:Type Control}Setter PropertyFontFamily Value微软雅黑/Setter PropertyFontSize Value{StaticResource FontSizeNormal}/Setter PropertyBorderThickness Value0/
/StyleStyle x:KeyIconButtonBaseStyle TargetTypeButtonSetter PropertyFontFamily Value{StaticResource FontAwesome}/Setter PropertyBorderThickness Value0/
/Style
/ResourceDictionary
Colors.xamlResourceDictionary xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlColor x:KeyBlack#000000/ColorSolidColorBrush x:KeyBlackBrush Color{StaticResource Black}/Color x:KeyWhite#FFFFFF/ColorSolidColorBrush x:KeyWhiteBrush Color{StaticResource White}/Color x:KeyTransWhite#33dddddd/ColorSolidColorBrush x:KeyTransWhiteBrush Color{StaticResource TransWhite}/Color x:KeyGray#B8BABC/ColorSolidColorBrush x:KeyGrayBrush Color{StaticResource Gray}/Color x:KeyVeryDarkGray#C0C0C0/ColorSolidColorBrush x:KeyVeryDarkGrayBrush Color{StaticResource VeryDarkGray}/Color x:KeyDarkGray#C3C0C3/ColorSolidColorBrush x:KeyDarkGrayBrush Color{StaticResource DarkGray}/Color x:KeyLightGray#ECECEC/ColorSolidColorBrush x:KeyLightGrayBrush Color{StaticResource LightGray}/Color x:KeyVeryLightGray#F3F3F3/ColorSolidColorBrush x:KeyVeryLightGrayBrush Color{StaticResource VeryLightGray}/Color x:KeyButtonBack#07BDFD/ColorSolidColorBrush x:KeyButtonBackBrush Color{StaticResource ButtonBack}/Color x:KeyButtonHoverBack#1FC7FD/ColorSolidColorBrush x:KeyButtonHoverBackBrush Color{StaticResource ButtonHoverBack}/
/ResourceDictionary
ButtonStyles.xaml (重点)ResourceDictionary xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:localclr-namespace:GQResourceDictionary.MergedDictionariesResourceDictionary SourceBase.xaml//ResourceDictionary.MergedDictionariesStyle TargetType{x:Type Button} x:KeyIgnoreHoverSetter PropertyBackground ValueTransparent/Setter PropertyBorderThickness Value0/Setter PropertyTemplateSetter.ValueControlTemplate TargetType{x:Type Button}Border Padding{TemplateBinding Padding} Background{TemplateBinding Background}ContentPresenter VerticalAlignmentCenter HorizontalAlignmentCenter//Border/ControlTemplate/Setter.Value/Setter
/StyleStyle TargetType{x:Type Button} BasedOn{StaticResource BaseStyle}Setter PropertyBackground Value{StaticResource ButtonBackBrush}/Setter PropertyForeground Value{StaticResource WhiteBrush}/Setter PropertyFocusVisualStyle Value{x:Null}/Setter PropertyPadding Value20 10/Setter PropertyMargin Value10/Setter PropertyTemplateSetter.ValueControlTemplate TargetType{x:Type ButtonBase}Border x:NameborderCornerRadius6BorderBrush{TemplateBinding BorderBrush}BorderThickness{TemplateBinding BorderThickness}Background{TemplateBinding Background} SnapsToDevicePixelsTrueGridTextBlock Text{TemplateBinding Content} FocusableFalse FontFamily{TemplateBinding FontFamily}FontSize{TemplateBinding FontSize}HorizontalAlignment{TemplateBinding HorizontalContentAlignment} Margin{TemplateBinding Padding} SnapsToDevicePixels{TemplateBinding SnapsToDevicePixels} VerticalAlignment{TemplateBinding VerticalContentAlignment}//Grid/BorderControlTemplate.TriggersEventTrigger RoutedEventMouseEnterBeginStoryboardStoryboardColorAnimation To{StaticResource ButtonHoverBack} Duration0:0:0.3 Storyboard.TargetNameborder Storyboard.TargetPropertyBackground.Color//Storyboard/BeginStoryboard/EventTriggerEventTrigger RoutedEventMouseLeaveBeginStoryboardStoryboardColorAnimation From{StaticResource ButtonHoverBack} Duration0:0:0.3 Storyboard.TargetNameborder Storyboard.TargetPropertyBackground.Color//Storyboard/BeginStoryboard/EventTriggerTrigger PropertyIsEnabled ValueFalseSetter PropertyBackground TargetNameborder Value{StaticResource VeryDarkGrayBrush}//Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter
/StyleStyle x:KeyIconButton TargetTypeButton BasedOn{StaticResource IconButtonBaseStyle}Setter PropertyBackground ValueTransparent/Setter PropertyForeground Value{StaticResource WhiteBrush}/Setter PropertyMargin Value0/Setter PropertyHeight Value32/Setter PropertyPadding Value5/Setter PropertyWidth Value{Binding ActualHeight,RelativeSource{RelativeSource Self}}/Setter PropertyTemplateSetter.ValueControlTemplate TargetType{x:Type ButtonBase}Border x:NameborderBorderBrush{TemplateBinding BorderBrush}BorderThickness{TemplateBinding BorderThickness}Background{TemplateBinding Background} SnapsToDevicePixelsTrueViewboxTextBlock Text{TemplateBinding Content} FocusableFalse FontFamily{TemplateBinding FontFamily}HorizontalAlignment{TemplateBinding HorizontalContentAlignment} Margin{TemplateBinding Padding} FontSize{TemplateBinding FontSize}SnapsToDevicePixels{TemplateBinding SnapsToDevicePixels} VerticalAlignment{TemplateBinding VerticalContentAlignment}//Viewbox/BorderControlTemplate.TriggersEventTrigger RoutedEventMouseEnterBeginStoryboardStoryboardColorAnimation To{StaticResource TransWhite} Duration0:0:0.2 Storyboard.TargetNameborder Storyboard.TargetPropertyBackground.Color//Storyboard/BeginStoryboard/EventTriggerEventTrigger RoutedEventMouseLeaveBeginStoryboardStoryboardColorAnimation From{StaticResource TransWhite} Duration0:0:0.2 Storyboard.TargetNameborder Storyboard.TargetPropertyBackground.Color//Storyboard/BeginStoryboard/EventTriggerTrigger PropertyIsEnabled ValueFalseSetter PropertyBackground TargetNameborder Value{StaticResource VeryDarkGrayBrush}//Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter
/StyleStyle x:KeyIconGrowButton TargetType{x:Type Button} BasedOn{StaticResource IconButtonBaseStyle}Setter PropertyBackground ValueTransparent/Setter PropertyForeground Value{StaticResource WhiteBrush}/Setter PropertyMargin Value0/Setter PropertyHeight Value32/Setter PropertyPadding Value5/Setter PropertyWidth Value{Binding ActualHeight,RelativeSource{RelativeSource Self}}/Setter PropertyTemplateSetter.ValueControlTemplate TargetType{x:Type ButtonBase}Border x:NameborderBorderBrush{TemplateBinding BorderBrush}BorderThickness{TemplateBinding BorderThickness}Background{TemplateBinding Background} SnapsToDevicePixelsTrueRenderTransformOrigin0.5,0.5Border.RenderTransformScaleTransform//Border.RenderTransformViewboxTextBlock Text{TemplateBinding Content} FocusableFalse FontFamily{TemplateBinding FontFamily}HorizontalAlignment{TemplateBinding HorizontalContentAlignment} Margin{TemplateBinding Padding} FontSize{TemplateBinding FontSize}SnapsToDevicePixels{TemplateBinding SnapsToDevicePixels} VerticalAlignment{TemplateBinding VerticalContentAlignment}//Viewbox/BorderControlTemplate.TriggersEventTrigger RoutedEventMouseEnterBeginStoryboardStoryboardDoubleAnimation To1.3 Duration0:0:0.2 Storyboard.TargetNameborder Storyboard.TargetProperty(RenderTransform).(ScaleTransform.ScaleX)/DoubleAnimation To1.3 Duration0:0:0.2 Storyboard.TargetNameborder Storyboard.TargetProperty(RenderTransform).(ScaleTransform.ScaleY)//Storyboard/BeginStoryboard/EventTriggerEventTrigger RoutedEventMouseLeaveBeginStoryboardStoryboardDoubleAnimation To1 Duration0:0:0.2 Storyboard.TargetNameborder Storyboard.TargetProperty(RenderTransform).(ScaleTransform.ScaleX)/DoubleAnimation To1 Duration0:0:0.2 Storyboard.TargetNameborder Storyboard.TargetProperty(RenderTransform).(ScaleTransform.ScaleY)//Storyboard/BeginStoryboard/EventTriggerTrigger PropertyIsEnabled ValueFalseSetter PropertyBackground TargetNameborder Value{StaticResource VeryDarkGrayBrush}//Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter
/StyleStyle x:KeyTextButton TargetType{x:Type Button} BasedOn{StaticResource BaseStyle}Setter PropertyBackground ValueTransparent/Setter PropertyForeground Value{StaticResource WhiteBrush}/Setter PropertyBorderThickness Value0/Setter PropertyPadding Value20 10/Setter PropertyMargin Value0 10/Setter PropertyTemplateSetter.ValueControlTemplate TargetType{x:Type ButtonBase}Border x:NameborderCornerRadius6BorderBrush{TemplateBinding BorderBrush}BorderThickness{TemplateBinding BorderThickness}Background{TemplateBinding Background} SnapsToDevicePixelsTrueTextBlock Text{TemplateBinding Content} FocusableFalse FontFamily{TemplateBinding FontFamily}FontSize{TemplateBinding FontSize}HorizontalAlignment{TemplateBinding HorizontalContentAlignment} Margin{TemplateBinding Padding} SnapsToDevicePixels{TemplateBinding SnapsToDevicePixels} VerticalAlignment{TemplateBinding VerticalContentAlignment}//BorderControlTemplate.TriggersTrigger PropertyIsMouseOver ValueTrueSetter PropertyForeground Value{StaticResource DarkGrayBrush}//TriggerTrigger PropertyIsEnabled ValueFalseSetter PropertyForeground Value{StaticResource VeryDarkGrayBrush}//Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter
/Style !--上述5个样式 参考自 https://www.youtube.com/playlist?listPLrW43fNmjaQVYF4zgsD0oL9Iv6u23PI6M有改动不完全一样你可以根据需要自行修改--
/ResourceDictionary
然后在App.xaml内添加所有资源字典Application x:ClassGQ.Appxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:localclr-namespace:GQStartupUri/Windows/LoginWindow.xamlxmlns:sysclr-namespace:System;assemblymscorlibxmlns:arrclr-namespace:System.Collections.Generic;assemblymscorlibApplication.ResourcesResourceDictionaryResourceDictionary.MergedDictionariesResourceDictionary Source/Styles/Base.xaml/ResourceDictionary Source/Styles/Panel3DStyle.xaml/ResourceDictionary Source/Styles/ButtonStyles.xaml//ResourceDictionary.MergedDictionaries/ResourceDictionary/Application.Resources
/Application
最后创建一个LoginWindow.xaml测试这几个样式并使用FontAwesomeWindow x:ClassGQ.LoginWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:localclr-namespace:GQmc:IgnorabledAllowsTransparencyTrueWindowStyleNoneBackgroundGrayWindowStartupLocationCenterScreenTitleMainWindow Height470 Width497GridStackPanel HorizontalAlignmentCenter VerticalAlignmentCenterStackPanel OrientationHorizontal HorizontalAlignmentCenterButton FontFamily{StaticResource FontAwesome} Content{StaticResource SettingIcon}/Button FontFamily{StaticResource FontAwesome} Content{StaticResource MinsizeIcon}/Button FontFamily{StaticResource FontAwesome} Content{StaticResource MaxsizeIcon}/Button FontFamily{StaticResource FontAwesome} Content{StaticResource CloseIcon}//StackPanelStackPanel OrientationHorizontal HorizontalAlignmentCenterButton Style{StaticResource IconGrowButton} Content{StaticResource SettingIcon}/Button Style{StaticResource IconGrowButton} Content{StaticResource MinsizeIcon}/Button Style{StaticResource IconGrowButton} Content{StaticResource MaxsizeIcon}/Button Style{StaticResource IconGrowButton} Content{StaticResource CloseIcon}//StackPanelStackPanel OrientationHorizontal HorizontalAlignmentCenterButton Style{StaticResource IconButton} Content{StaticResource SettingIcon}/Button Style{StaticResource IconButton} Content{StaticResource MinsizeIcon}/Button Style{StaticResource IconButton} Content{StaticResource MaxsizeIcon}/Button Style{StaticResource IconButton} Content{StaticResource CloseIcon}//StackPanelStackPanel OrientationHorizontal HorizontalAlignmentCenterButton Style{StaticResource TextButton} FontFamily{StaticResource FontAwesome} Content{StaticResource SettingIcon}/Button Style{StaticResource TextButton} FontFamily{StaticResource FontAwesome} Content{StaticResource MinsizeIcon}/Button Style{StaticResource TextButton} FontFamily{StaticResource FontAwesome} Content{StaticResource MaxsizeIcon}/Button Style{StaticResource TextButton} FontFamily{StaticResource FontAwesome} Content{StaticResource CloseIcon}//StackPanel/StackPanel/Grid
/Window
这样控件就能使用完成了虽然看起来很麻烦但收益还是不小的以后再添加别的图标就很方便了。效果图当然喽做正经的软件图标肯定是由设计给的不是用这些网上的这些图标只能自己玩玩嘿嘿如果喜欢点个赞呗~
