4.WPF样式使用规范

  • 4.WPF样式使用规范已关闭评论
  • 77 次浏览
  • A+
所属分类:.NET技术
摘要

在Web开发的时候,编写css样式的时候通常是统一写在.css样式文件中。在WPF中也可以使用这样的思想。

在Web开发的时候,编写css样式的时候通常是统一写在.css样式文件中。在WPF中也可以使用这样的思想。

样式引用:

1.新建一个项目用于统一存放样式WPF.UI

添加一个资源字典Button.xaml或者CheckBox.xaml等等....

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">      <!--图标按钮样式-->     <Style x:Key="IconButtonStyle" TargetType="Button">         <!--<Setter Property="FontFamily" Value="{StaticResource FontAwesome}"/>-->         <Setter Property="HorizontalAlignment" Value="Center"/>         <Setter Property="VerticalAlignment" Value="Center"/>         <Setter Property="FontSize" Value="24"/>         <Setter Property="Margin" Value="5 5 10 5"/>         <Setter Property="Foreground">             <Setter.Value>                 <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">                     <GradientStop Offset="0" Color="#7B2ED9"/>                     <GradientStop Offset="1" Color="#5485FF"/>                 </LinearGradientBrush>             </Setter.Value>         </Setter>         <Setter Property="Template">             <Setter.Value>                 <ControlTemplate TargetType="Button">                     <ContentPresenter/>                 </ControlTemplate>             </Setter.Value>         </Setter>         <Style.Triggers>             <Trigger Property="IsMouseOver" Value="True">                 <Setter Property="Opacity" Value="0.5"/>             </Trigger>             <Trigger Property="IsMouseOver" Value="False">                 <Setter Property="Opacity" Value="1"/>             </Trigger>         </Style.Triggers>     </Style>  </ResourceDictionary>

 

2.添加Generic.xaml用于统一管理所有文件

ResourceDictionary.MergedDictionaries是一个属性,它允许您将多个ResourceDictionary合并到一个ResourceDictionary中。这使得在应用程序中共享资源变得更加方便。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">     <ResourceDictionary.MergedDictionaries>         <ResourceDictionary Source="pack://application:,,,/WPF.UI;component/Style/Button.xaml"/>         <ResourceDictionary Source="pack://application:,,,/WPF.UI;component/Style/CheckBox.xaml"/>           <!--引入图标-->         <ResourceDictionary Source="pack://application:,,,/WPF.UI;component/Style/Converter.xaml"/>         <ResourceDictionary Source="pack://application:,,,/WPF.UI;component/Style/Icon.xaml"/>       </ResourceDictionary.MergedDictionaries> </ResourceDictionary>

 

3.在主项目中App.xaml添加引用

<prism:PrismApplication x:Class="WPFClient.App"              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"              xmlns:local="clr-namespace:WPFClient"              xmlns:prism="http://prismlibrary.com/">     <Application.Resources>         <ResourceDictionary>             <ResourceDictionary.MergedDictionaries>                 <ResourceDictionary Source="pack://application:,,,/WPF.UI;component/Language/CN.xaml"/>                 <ResourceDictionary Source="pack://application:,,,/WPF.UI;component/Style/Generic.xaml"/>             </ResourceDictionary.MergedDictionaries>         </ResourceDictionary>     </Application.Resources> </prism:PrismApplication>

 

4.使用

<StackPanel Orientation="Horizontal" Grid.Row="1">                 <Button Content="&#xf047;" Style="{StaticResource IconButtonStyle}"/>              </StackPanel>

 

图标引用:

1.创建一个文件夹用于存放图片,图片属性设置为资源

4.WPF样式使用规范

 2.添加一个资源文件Icon.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">     <BitmapImage x:Key="Icon_Test" UriSource="/WPF.UI;Component/Icon/010_出差申请.png"/>     <BitmapImage x:Key="Icon_Sobel" UriSource="/WPF.UI;Component/Icon/010_打卡签到.png"/>     <BitmapImage x:Key="Icon_MedianBlur" UriSource="/WPF.UI;Component/Icon/010_发现更多.png"/>     <BitmapImage x:Key="Icon_GaussianBlur" UriSource="/WPF.UI;Component/Icon/010_费用报销.png"/> </ResourceDictionary>

BitmapImage 表示可以在WPF应用程序中使用的图像源。它用于在各种WPF控件中显示图像,如Image、ImageBrush和MediaElement。BitmapImage可以从各种来源创建,例如文件路径、流或URI。它提供了在WPF应用程序中加载、解码和操作图像的属性和方法。

3.在Generic.xaml文件里添加引用,如上。

<ResourceDictionary Source="pack://application:,,,/WPF.UI;component/Style/Icon.xaml"/>

4.添加一个转化器

/// <summary>     /// 根据ICON的字符串名称转换为BitmapImage对象     /// </summary>     internal class IconToImageConverter : IValueConverter     {         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)         {             return (BitmapImage)System.Windows.Application.Current.Resources[(string)value];         }          public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)         {             throw new NotImplementedException();         }     }

5使用

//.cs代码  public override string Icon => "Icon_Test";  //.xaml代码   <StackPanel Height="25" Orientation="Horizontal" Margin="8">                         <Image Source="{Binding Icon, Converter={StaticResource IconToImageConverter}}"/>                         <TextBlock Text="{Binding Name}" Margin="3" FontSize="16"/>                     </StackPanel>