精华内容
下载资源
问答
  • WPF如何自定义图标 引言 在人机交互的开发中,图标是非常重要的一个交互元素。WPF的开发中图标的使用有很多中方式: 加载字体图标资源,这方面的资源有: Iconfont(阿里图标) Awesome … 使用...

    WPF 如何自定义图标

    引言

    在人机交互的开发中,图标是非常重要的一个交互元素。WPF的开发中图标的使用有很多中方式:

    • 加载字体图标资源,这方面的资源有:

      • Iconfont(阿里图标)
      • Awesome
    • 使用前端框架提供的资源,例如MaterialDesign的PackIcon控件里面。

    • 使用Path自定义设计图标。

    应用

    使用Path自制控件时,一些比较简单的图形可以直接通过几行实现,但是比较复杂的图形就很难了。幸好微软推出了一种图形标记格式——mini-languages。在WPF中可以使用这种标记语言的有StreamGeometryPathFigureCollection。本次使用StreamGeometry来实现我们自定义图标的设计。

    在资源文件中定义图标资源。

     		<StreamGeometry x:Key="Icon">
                M 10,100 C 10,300 300,-200 300,100
            </StreamGeometry>
    

    这种图标标记是以字符串的形式存在,因此可以按照官网的Path Markup Syntax说明去自制图标编辑器(如果有兴趣)。更简单的方式图标标记获取方式:使用制图工具(例如AI(Adobe Illustrator))制作图标,然后导出XAML文件格式。注意,输出的路径要为单路径。制图工具很多V S Blend也是可以的。

    在视图使用该资源。

    		<WrapPanel>
                <Viewbox Width="30" Height="30">
                    <Path Data="{StaticResource Icon}" Fill="Red"/>
                </Viewbox>
    		</WrapPanel>
    

    效果
    在这里插入图片描述

    扩展

    通过以上,我们至少知道了如何自定义制作图标。因此我们可以将图标制作成一个独立的控件,在我们的项目中使用。具体操作可以参考MaterialDesignInXamlToolkit的实现。

    展开全文
  • WPF 如何自定义图标——应用篇——自定义控件 引言 结合前面我们已经能够较为灵活的在CS和XAML中使用我们自定义的图标。接下来,我们结合一些框架元素(FrameElement)的特点实现我们自己自定义控件的定义与使用。...

    WPF 如何自定义图标——应用篇——自定义控件

    引言

    结合前面我们已经能够较为灵活的在CS和XAML中使用我们自定义的图标。接下来,我们结合一些框架元素(FrameElement)的特点实现我们自己自定义控件的定义与使用。自定义控件的特点:灵活,重构能力强。

    图标类控件给人非常醒目的感觉,我们通过自定义Control、Button和CheckBox控件来实现自定义控件的定义与使用。

    编码环境:Win10 Visual Studio 2019 .NET Framework 4.7.2 / .NET Core 3.1

    应用

    1.IconControl的定义与使用

    IconControl是一个用于呈现IconData的图标控件,只用于图标呈现,别无他用。

    (1)新建–自定义控件–命名为“IconControl”,此时系统会为我们自动生成一个Theme文件夹以及Generic.xaml文件和在新建的路径下生成IconControl.cs文件。

    (2)打开IconControl.cs,将内容替换为下面的代码:

    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media;
    
    namespace Deamon.UiCore
    {
        /// <summary>
        /// 按照步骤 1a 或 1b 操作,然后执行步骤 2 以在 XAML 文件中使用此自定义控件。
        ///
        /// 步骤 1a) 在当前项目中存在的 XAML 文件中使用该自定义控件。
        /// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根
        /// 元素中:
        ///
        ///     xmlns:MyNamespace="clr-namespace:Deamon.UiCore"
        ///
        ///
        /// 步骤 1b) 在其他项目中存在的 XAML 文件中使用该自定义控件。
        /// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根
        /// 元素中:
        ///
        ///     xmlns:MyNamespace="clr-namespace:Deamon.UiCore;assembly=Deamon.UiCore"
        ///
        /// 您还需要添加一个从 XAML 文件所在的项目到此项目的项目引用,
        /// 并重新生成以避免编译错误:
        ///
        ///     在解决方案资源管理器中右击目标项目,然后依次单击
        ///     “添加引用”->“项目”->[浏览查找并选择此项目]
        ///
        ///
        /// 步骤 2)
        /// 继续操作并在 XAML 文件中使用控件。
        ///
        ///     <MyNamespace:IconControl/>
        ///
        /// </summary>
        public class IconControl : Control
        {
            public IconControl()
            {
                DefaultStyleKey = typeof(IconControl);
            }
    
            public static readonly DependencyProperty IconDataProperty = DependencyProperty.Register(nameof(IconData), typeof(Geometry), typeof(IconControl));
    
            public Geometry IconData
            {
                get => (Geometry)GetValue(IconDataProperty);
                set => SetValue(IconDataProperty, value);
            }
    
        }
    }
    
    

    上面注释中也简单的介绍了如何使用自定义控件。

    (3)打开Generic.xaml,将IconData属性绑定到控件模板上。

    <ResourceDictionary
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Deamon"
        xmlns:uicore="clr-namespace:Deamon.UiCore"
        >
    
        <Style TargetType="{x:Type uicore:IconControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type uicore:IconControl}">
    
                        <ContentControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                                <Viewbox>
                                    <Path Data="{TemplateBinding IconData}" Fill="Black" Stroke="Gray" StrokeThickness="1"/>
                                </Viewbox>
                            </Border>
                        </ContentControl>
    
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
    </ResourceDictionary>
    
    

    说明:Generic.xaml资源文件定义了该自定义控件的默认样式,如果没有默认样式,系统会出错,也可以自己在其他资源文件定义样式,但是一定要在App.xaml中加载资源以确保程序在使用时存在默认样式。

    (4)使用IconControl。IconUsageView.xaml

    <UserControl x:Class="Deamon.View.PERSONALIZATION.IconUsage.IconUsageView"
                 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:Deamon.View.PERSONALIZATION.IconUsage"
                 xmlns:uicore="clr-namespace:Deamon.UiCore"
                 mc:Ignorable="d" 
                 d:DesignHeight="450" d:DesignWidth="800">
        <Grid>
            <StackPanel>
                <uicore:IconControl Width="100" Height="100" IconData="{Binding IconSource.Forward,Source={StaticResource ServiceLocator},UpdateSourceTrigger=PropertyChanged}" />
                <uicore:IconControl Width="100" Height="100" IconData="{Binding IconSource.Back,Source={StaticResource ServiceLocator},UpdateSourceTrigger=PropertyChanged}" />
                <uicore:IconControl Width="100" Height="100" IconData="{Binding IconSource.DoubleDown,Source={StaticResource ServiceLocator},UpdateSourceTrigger=PropertyChanged}" />
            </StackPanel>
        </Grid>
    </UserControl>
    
    

    2.IconButton的定义与使用

    IconButton是纯图标按钮。基类是Button。

    (1)新建(自定义控件)IconButton.cs

    (2)打开IconButton.cs,将内容替换为下面的代码:

     public class IconButton : Button
        {
            static IconButton()
            {
                DefaultStyleKeyProperty.OverrideMetadata(typeof(IconButton), new FrameworkPropertyMetadata(typeof(IconButton)));
            }
    
            public static readonly DependencyProperty IconDataProperty = DependencyProperty.Register(nameof(IconData), typeof(Geometry), typeof(IconButton));
    
            public IconButton() { DefaultStyleKey = typeof(IconButton); }
    
            public Geometry IconData
            {
                get => (Geometry)GetValue(IconDataProperty);
                set => SetValue(IconDataProperty, value);
            }
        }
    

    (3)打开Generic.xaml,将IconData属性绑定到控件模板上。直接将下面的样式复制到该文件中。

     	<SolidColorBrush x:Key="Accent" Color="#FF0B7AFF" />
        <SolidColorBrush x:Key="ModernButtonText" Color="#333333"/>
        <SolidColorBrush x:Key="ModernButtonTextHover" Color="#333333" />
        <SolidColorBrush x:Key="ButtonBackgroundHover" Color="#dddddd" />
        <SolidColorBrush x:Key="ButtonTextDisabled" Color="#a1a1a1" />
        <SolidColorBrush x:Key="ModernButtonTextPressed" Color="#333333" />
        <SolidColorBrush x:Key="ModernButtonTextDisabled" Color="#a1a1a1" />
        
        <Style TargetType="uicore:IconButton">
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Foreground" Value="{DynamicResource ModernButtonText}" />
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="uicore:IconButton">
                        <Grid x:Name="grid"
                              Background="{TemplateBinding Background}"
                              MinHeight="36"
                              MinWidth="36">
                            <Path x:Name="icon"
                                  Data="{TemplateBinding IconData}" 
                                  Width="15"
                                  Height="15"
                                  Fill="{TemplateBinding Foreground}"
                                  Stretch="Uniform"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"
                                  Opacity="0.8">
                                <Path.LayoutTransform>
                                    <ScaleTransform x:Name="IconScale"/>
                                </Path.LayoutTransform>
                            </Path>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="{DynamicResource ModernButtonTextHover}" />
                                <Setter Property="Opacity" TargetName="icon" Value="1"/>
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="IconScale"
                                                             Storyboard.TargetProperty="ScaleX"
                                                             To="1.2"
                                                             Duration="0:0:0.15" />
                                            <DoubleAnimation Storyboard.TargetName="IconScale"
                                                             Storyboard.TargetProperty="ScaleY"
                                                             To="1.2"
                                                             Duration="0:0:0.15" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="IconScale"
                                                             Storyboard.TargetProperty="ScaleX"
                                                             To="1"
                                                             Duration="0:0:0.15" />
                                            <DoubleAnimation Storyboard.TargetName="IconScale"
                                                             Storyboard.TargetProperty="ScaleY"
                                                             To="1"
                                                             Duration="0:0:0.15" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Foreground" Value="{DynamicResource Accent}" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Foreground" Value="{DynamicResource ButtonTextDisabled}" />
                                <Setter TargetName="icon" Property="Opacity" Value="0.3" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
    

    从定义的样式来看,原来用于显示的Content属性没有在模板中体现,因此在使用时即使设置了也没有任何作用。

    (4)使用

    <UserControl x:Class="Deamon.View.PERSONALIZATION.IconButtonView"
                 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:Deamon.View.PERSONALIZATION"
                 xmlns:uicore="clr-namespace:Deamon.UiCore"
                 mc:Ignorable="d" 
                 d:DesignHeight="450" d:DesignWidth="800">
        <Grid>
            <WrapPanel>
                <uicore:IconButton IconData="{Binding IconSource.Add,Source={StaticResource ServiceLocator}}"/>
                <uicore:IconButton IconData="{Binding IconSource.Video,Source={StaticResource ServiceLocator}}"/>
                <uicore:IconButton IconData="{Binding IconSource.NewFile,Source={StaticResource ServiceLocator}}"/>
            </WrapPanel>
        </Grid>
    </UserControl>
    
    

    纯按钮的图标搞定了。

    3.IconCheckBox的定义与使用

    IconCheckBox是一个CheckBox,本例中只存在两种状态(选中、未选中)。

    (1)新建自定义控件并命名为IconCheckBox.cs。

    (2)打开IconCheckBox.cs,将内容替换为下面的代码:

        public class IconCheckBox : CheckBox
        {
            public static readonly DependencyProperty IconDataProperty = DependencyProperty.Register(nameof(IconData), typeof(Geometry), typeof(IconCheckBox));
    
            public IconCheckBox() { DefaultStyleKey = typeof(IconCheckBox); }
    
            public Geometry IconData
            {
                get => (Geometry)GetValue(IconDataProperty);
                set => SetValue(IconDataProperty, value);
            }
        }
    

    (3)打开Generic.xaml,将IconData属性绑定到控件模板上。直接将下面的样式复制到该文件中。

    	<Style TargetType="{x:Type uicore:IconCheckBox}">
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Foreground" Value="{DynamicResource ModernButtonText}" />
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type uicore:IconCheckBox}">
                        <Grid x:Name="grid"
                              Background="{TemplateBinding Background}"
                              MinHeight="36"
                              MinWidth="36">
                            <Ellipse Width="30"
                                     Height="30"
                                     Name="bg"/>
                            <Path x:Name="icon"
                                  Data="{TemplateBinding IconData}" 
                                  Width="14"
                                  Height="14"
                                  Fill="{TemplateBinding Foreground}"
                                  Stretch="Uniform"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"
                                  Opacity="0.7"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="{DynamicResource ModernButtonTextHover}" />
                                <Setter Property="Opacity" TargetName="icon" Value="1"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="icon" Property="Fill" Value="{DynamicResource Accent}" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Foreground" Value="{DynamicResource ModernButtonTextDisabled}" />
                                <Setter TargetName="icon" Property="Opacity" Value="0.3" />
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Fill" Value="{DynamicResource Accent}" TargetName="icon"/>
                                <Setter Property="Stroke" Value="{DynamicResource Accent}" TargetName="bg"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    

    (4)使用

    <UserControl x:Class="Deamon.View.PERSONALIZATION.IconCheckBoxView"
                 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:Deamon.View.PERSONALIZATION"
                 xmlns:uicore="clr-namespace:Deamon.UiCore"
                 mc:Ignorable="d" 
                 d:DesignHeight="450" d:DesignWidth="800">
        <Grid>
            <StackPanel >
                <uicore:IconCheckBox IconData="{Binding Path=IconSource.Camera,Source={StaticResource ServiceLocator}}"/>
                <uicore:IconCheckBox IconData="{Binding Path=IconSource.Close,Source={StaticResource ServiceLocator}}"/>
                <uicore:IconCheckBox IconData="{Binding Path=IconSource.Speaker,Source={StaticResource ServiceLocator}}"/>
                <uicore:IconCheckBox IconData="{Binding Path=IconSource.Mic,Source={StaticResource ServiceLocator}}"/>
                <uicore:IconCheckBox IconData="{Binding Path=IconSource.Cursor,Source={StaticResource ServiceLocator}}"/>
            </StackPanel>  
        </Grid>
    </UserControl>
    
    

    总结

    OK,到这里就差不多结束了。自定义控件是个非常好的东西,能够设计出很多我们喜欢的控件,同时他对WPF的一些特性支持相比于用户控件要宽得多。

    展开全文
  • WPF 如何自定义图标-续篇 引言 前面我们讲过,使用StreamGeometry在XAML文件中进行包括,将图标的数据以字符串的形式传递给StreamGeometry,然后再将StreamGeometry作为静态资源在我们的项目中使用。虽然上面可以...

    WPF 如何自定义图标-续篇

    引言

    前面WPF 如何自定义图标-前言我们讲过,使用StreamGeometry在XAML文件中进行包括,将图标的数据以字符串的形式传递给StreamGeometry,然后再将StreamGeometry作为静态资源在我们的项目中使用。虽然上面可以满足我们的一般要求,但是当我们后台使用相同的资源时,比较麻烦:通过资源名找到对应的资源。当资源较多时,理论上会增加检索负担。因此我想通过某种方式,同时方便XAML和CS使用图标资源,同时也不额外增加性能开销,最好能统一使用方式。

    应用

    通过学习别人的项目和总结。发下可以通过属性来解决以上问题。具体就是将不同的图标资源定义成一个string类型的属性,在XAML中将该属性的类以资源的形式引入(得到单个实例),在CS中直接New一个实例来使用。为了节省开销,图标资源类定义时,使用只读属性。

    1.图标资源的定义 MaterialIconSource.cs

    public class MaterialIconSource
    {
            public string Add { get; } = "M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z";
     		public string Arrow { get; } = "M5,17.59L15.59,7H9V5H19V15H17V8.41L6.41,19L5,17.59Z";
    
            public string Back { get; } = "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z";
    
            public string Border { get; } = "M3,21V3H21V21H3M5,5V19H19V5H5Z";
     }
    

    这里只是列举了部分,在我们的项目中,这一块的资源应该和实际项目的需求相匹配。

    2.定义本地服务ServiceLocator.cs

    namespace Deamon.View.PERSONALIZATION.IconUsage
    {
         public class ServiceLocator
        {
            public MaterialIconSource IconSource { get; } = new MaterialIconSource();
        }
    }
    

    这里也可以将IconSource定义成静态属性。

    3.在xaml文件中使用

    3.1在App.XAML.cs中定义静态资源

    <Application x:Class="Deamon.App"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:local="clr-namespace:Deamon"
                 xmlns:iconBase="clr-namespace:Deamon.View.PERSONALIZATION.IconUsage"
                 StartupUri="MainWindow.xaml">
        <Application.Resources>
            <ResourceDictionary>
                <iconBase:ServiceLocator x:Key="ServiceLocator"/>
            </ResourceDictionary>
        </Application.Resources>
    </Application>
    
    

    3.2在其他View中使用图标资源

    <UserControl x:Class="Deamon.View.PERSONALIZATION.IconUsage.IconUsageView"
                 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:Deamon.View.PERSONALIZATION.IconUsage"
                 mc:Ignorable="d" 
                 d:DesignHeight="450" d:DesignWidth="800">
        <Grid>
            <StackPanel>
                <Path Data="{Binding IconSource.Arrow,Source={StaticResource ServiceLocator}}"
                      Fill="Red"/>
                <Path Data="{Binding IconSource.Add,Source={StaticResource ServiceLocator}}"
                      Fill="Red"/>
            </StackPanel>
        </Grid>
    </UserControl>
    
    

    3.3效果

    在这里插入图片描述

    右边红色图标

    4.在CS文件中使用

     public partial class PersonalizationHomeViewModel : ViewModelBase
        {
        	// 定义本地服务实例(里面包含必要的资源)
            private readonly IconUsage.ServiceLocator mServiceLocator = new IconUsage.ServiceLocator();
            public PersonalizationHomeViewModel()
            {
                SelectedCommand = new RelayCommand<ItemModel>(p =>
                {
                    switch (p.ItemViewText)
                    {
                        case "Background":
                            ViewContent = new BackgroundView();
                            break;
                        case "DataGridUsage":
                            ViewContent = new DataGridUsage.DataGridView();
                            break;
                        case "IconUsage":
                            ViewContent = new IconUsage.IconUsageView();
                            break;
    
                        default:
                            break;
                    }
                });
    
                ViewItems = new List<ItemModel>()
                {
                    new ItemModel() { ItemViewText = "Background", ItemViewGlyph= mServiceLocator.IconSource.Back},
                    new ItemModel() { ItemViewText = "DataGridUsage", ItemViewGlyph= mServiceLocator.IconSource.Trim },
                    new ItemModel() { ItemViewText = "IconUsage", ItemViewGlyph= mServiceLocator.IconSource.Ellipse },
                    new ItemModel() { ItemViewText = "...", ItemViewGlyph= mServiceLocator.IconSource.More },
                };
    
                SelectedViewItem = ViewItems.FirstOrDefault();
            }
     }
    

    上图中对ViewItemsItemViewGlyph属性赋值的就是图形的字符串。

    在这里插入图片描述

    左边黑色图标

    总结

    通过以上的操作,我们可以简单的实现自身项目自定义图标资源的定义和使用了。这样就可以在我们的项目中运用了。并在实际开发中总结,让项目结构变得更加便利好用。

    展开全文
  • U盘如何自定义图标

    2020-04-29 18:22:55
    ps:下次想要换图标时,直接删除原来的favicon.ico文件,然后重新创建favicon.ico文件即可。 三、查看效果 1.此时已经设置完毕,弹出U盘并重新插入后即可看到新图标 2.想给U盘改个名字的话,右键属性,常规选项卡中...

    效果图

    在这里插入图片描述

    具体步骤

    一、创建autorun.inf文件

    1.在u盘根目录创建个txt文件

    在这里插入图片描述

    2.在创建的文件中写入以下内容并保存

    [autorun]
    icon=favicon.ico
    

    在这里插入图片描述

    3.将文件改名为autorun.inf

    在这里插入图片描述

    4.将此文件隐藏(可选项)

    右键点击属性,然后勾选隐藏即可。
    在这里插入图片描述

    二、创建favicon.ico文件

    1.找一张你喜欢的图片

    2.将此图片转换为ico格式

    找一个ico在线转换网站,例如此网址http://ico.duduxuexi.com/,选择文件后,尺寸选择64*64,然后点击生成,保存转换后的文件。
    在这里插入图片描述

    3.把转换后的图片移动到U盘根目录并改名为favicon.ico

    在这里插入图片描述

    4.将此文件隐藏(可选项)

    右键点击属性,然后勾选隐藏即可。
    在这里插入图片描述
    ps:下次想要换图标时,直接删除原来的favicon.ico文件,然后重新创建favicon.ico文件即可。

    三、查看效果

    1.此时已经设置完毕,弹出U盘并重新插入后即可看到新图标

    在这里插入图片描述

    2.想给U盘改个名字的话,右键属性,常规选项卡中的空白框中直接修改即可

    在这里插入图片描述

    3.最终效果

    在这里插入图片描述

    展开全文
  • 图标、图例
  • mui 如何自定义图标

    2018-09-05 16:16:02
    打开阿里巴巴矢量图--登录--想要的图标加入购物车--下载代码 将iconfont.css放在你的css文件下面 iconfont.ttf放在fonts文件夹下面 打开iconfont.css,修改成: 然后在html页面调用iconfont.css: &...
  • 在之前我们讲解了如何在WPF中自定义控件,需要了解可以走下面的链接。 应用篇 续篇 前言 我们作为开发人员,毕竟自己的画画和图标设计功底不是很好。因此如何获取立意明显、表达准确的图标?似乎是亟需解决的...
  • 需求:修改弹框的小图标为自己想要的,如下是element自带 首先,复制一段element的官方代码作为演示 <template> <el-button type="text" @click="open">点击打开 Message Box</el-button> </...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,436
精华内容 974
关键字:

如何自定义图标