【6月日新计划23】WPF入门-阿里巴巴IconFont使用

花果山最Man的男人
198 阅读2分钟

1. IconFont

Offical Website： www.iconfont.cn/

1.把自己想用的圖標加入購物車，然後放入項目中

图片.png

2.將項目下載

图片.png

3.將ttf文件導入項目中，轉為資源

demo_index.html就是教程。

图片.png

4.xaml文件中使用

图片.png

相對路徑和絕對路徑的資源引入

     <UserControl.Resources>
         <FontFamily x:Key="font">pack://application:,,,/BlankApp1;component/Image/IconFont/#iconfont</FontFamily>
     </UserControl.Resources>
     
    <Window.Resources>
        <FontFamily x:Key="font">/Image/IconFont/#iconfont</FontFamily>
    </Window.Resources>

代碼部分，如何使用。

    <Window.Resources>
        <FontFamily x:Key="font">/Image/IconFont/#iconfont</FontFamily>
    </Window.Resources>
    <WrapPanel VerticalAlignment="Top" ItemHeight="50" ItemWidth="50">
        <Button Content="&#xe627;" FontFamily="{StaticResource font}" FontSize="20"></Button>
        <TextBlock Text="&#xe692;" FontFamily="{StaticResource font}" FontSize="20"></TextBlock>
        <TextBlock Text="&#xe627;" FontFamily="{StaticResource font}" FontSize="20"></TextBlock>
    </WrapPanel>

2. Picture

1.圖片下載

放入項目中，也是要轉成資源

图片.png

2.代碼使用

        <Image
            Width="100"
            Height="100"
            Margin="0,30,0,0"
            Source="/Image/Cat.jpg">
            <Image.Clip>
                <EllipseGeometry
                    Center="50,50"
                    RadiusX="50"
                    RadiusY="50" />
            </Image.Clip>
        </Image>

3. Font

字体大小【font-size】：medium：中等字号，larger：大字号，smaller：小字号。

加粗字体【font-weight】：将【font-weight】设置为【bold】，以加粗文字，该属性可继承。

倾斜字体【font-style】：将【font-style】设置为【italic】，以倾斜文字，该属性可继承。

字间距【letter-spacing】：设置【letter-spacing】的值为px或em，可控制文字间的间隙，该属性可继承。

首行缩进【text-indent】：可实现第一个文字向后缩进。

给文字划线【text-decoration】：设置【text-decoration】属性，可以给文字划线。

4. 圓角設定

1.Button

<Button x:Name="but1" Content="软件介绍" HorizontalAlignment="Left" Margin="126,356,0,0" VerticalAlignment="Top" Width="128" Click="Button_Click" FontSize="20" Height="35" >
　　<Button.Template>
　　　　<ControlTemplate TargetType="{x:Type Button}">
　　　　　　<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="10">
　　　　　　　　<Border.Background>#FF8EB4D4</Border.Background>
　　　　　　　　<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
　　　　　　</Border>
　　　　</ControlTemplate>
　　</Button.Template>
</Button>

2.TextBox

<TextBox HorizontalAlignment="Left" Height="24" Margin="43,192,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="98">
                <TextBox.Resources>
                    <Style TargetType="{x:Type Border}">
                        <Setter Property="CornerRadius" Value="8"/>
                        <Setter Property="BorderBrush" Value="#c1d0dc"/>
                    </Style>
                </TextBox.Resources>
</TextBox>

3.PasswordBox

<PasswordBox x:Name="t2" HorizontalAlignment="Left" Margin="183,150,0,0" VerticalAlignment="Top" Width="114" Height="26" BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" FontSize="18" Password="&#xD;&#xA;">
                <PasswordBox.Resources>
                    <Style TargetType="PasswordBox">
                        <Setter Property="PasswordChar" Value="●"/>
                        <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
                        <Setter Property="HorizontalContentAlignment" Value="Left"/>
                        <Setter Property="Padding" Value="1"/>
                        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                        <Setter Property="AllowDrop" Value="true"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="PasswordBox">
                                    <Border CornerRadius="8" x:Name="Bd" Background="White" BorderBrush="#c1d0dc" BorderThickness="1" OpacityMask="{x:Null}">
                                        <ScrollViewer SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="PART_ContentHost" Template="{DynamicResource ScrollViewerControlTemplate1}"/>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </PasswordBox.Resources>
</PasswordBox>

5. 多級目錄

5.1 Introduction

同樣是Iconfon他，在xaml和c#中使用是不一樣的。

图片.png

xaml文件中使用<TextBlock Text="&#xe60e;" VerticalAlignment="Center" FontFamily="{StaticResource font}" FontSize="20" />

C#中使用，也就是wpf後端使用，然後傳給前端則是\xe60e，就是把&#轉換成\，再刪除後面的;

5.2 Code

我的背景是使用Prism

<UserControl x:Class="BlankApp1.Views.Practice.Directory01View"
             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:BlankApp1.Views.Practice"
             xmlns:exe="clr-namespace:BlankApp1.Extensions"
             xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:prism="http://prismlibrary.com/"
             mc:Ignorable="d"
             d:DesignHeight="450"
             d:DesignWidth="800">
    <UserControl.Resources>
        <FontFamily x:Key="font">/Image/IconFont/#iconfont</FontFamily>
    </UserControl.Resources>


    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="4*"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" >
            <Button Content="&#xe60e;"
                    FontFamily="{StaticResource font}"
                    FontSize="20"
                    Margin="5" />
            <TextBlock Text="&#xe618;"
                       VerticalAlignment="Center"
                       FontFamily="{StaticResource font}"
                       FontSize="20"
                       Margin="5" />
            <TextBlock Text="this is demo." VerticalAlignment="Center" Margin="5" FontSize="18"/>
        </StackPanel>

        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>
            <TreeView Background="Transparent"
                      BorderThickness="1"
                      ItemsSource="{Binding MesMenuBar}">
                <TreeView.ItemTemplate>
                    <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding IconCode}"
                                       VerticalAlignment="Center"
                                       FontFamily="{StaticResource font}"
                                       FontSize="18"
                                       Margin="3" />
                            <TextBlock Text="{Binding Header}"
                                       VerticalAlignment="Center"
                                       FontSize="18"
                                       Margin="3" />
                        </StackPanel>
                    </HierarchicalDataTemplate>
                </TreeView.ItemTemplate>

            </TreeView>
            <StackPanel Grid.Column="1"
                        Margin="10">
                <ContentControl prism:RegionManager.RegionName="{x:Static exe:PrismManager.DirectoryWindowRegionName}" />
            </StackPanel>
        </Grid>
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace BlankApp1.Common.Models.Directory
{
    public class MenuItemModel
    {

        public string IconCode { get; set; }

        public string Header { get; set; }

        public List<MenuItemModel> Children { get; set; } = new List<MenuItemModel>();

        public string NameSpaces { get; set; }


    }
}

using BlankApp1.Common.Models.Directory;
using BlankApp1.Extensions;
using Prism.Commands;
using Prism.Mvvm;
using Prism.Regions;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace BlankApp1.ViewModels.Practice
{
    public class Directory01ViewModel : BindableBase
    {
        private readonly IRegionManager _regionManager;
        private List<MenuItemModel> mesMenuBar;

        public List<MenuItemModel> MesMenuBar

        {
            get { return mesMenuBar; }
            set { mesMenuBar = value; RaisePropertyChanged(); }
        }

        public DelegateCommand<MenuItemModel> NavigateCommand { get; set; }

        public Directory01ViewModel(IRegionManager regionManager)
        {
            _regionManager = regionManager;
            MesMenuBar = new List<MenuItemModel>();
            CreateMesListBar();

            NavigateCommand = new DelegateCommand<MenuItemModel>(Navigate);
        }

        public void Navigate(MenuItemModel menuItemModel)
        {
            if (menuItemModel == null || string.IsNullOrEmpty(menuItemModel.NameSpaces))
            {
                return;
            }

            _regionManager.Regions[PrismManager.DirectoryWindowRegionName].RequestNavigate(menuItemModel.NameSpaces);

        }

        public void CreateMesListBar()
        {
            MenuItemModel menu01 = new MenuItemModel();
            menu01.IconCode = "\xe618";
            menu01.Header = "Home01";

            MenuItemModel menu02 = new MenuItemModel();
            menu02.IconCode = "\xe60f";
            menu02.Header = "Dictionary";
            menu01.Children.Add(menu02);

            MenuItemModel menu03 = new MenuItemModel();
            menu03.IconCode = "\xe617";
            menu03.Header = "Catalog";
            menu01.Children.Add(menu03);


            MenuItemModel menu04 = new MenuItemModel();
            menu04.IconCode = "\xe616";
            menu04.Header = "Catalog01";
            menu03.Children.Add(menu04);

            MenuItemModel menu05 = new MenuItemModel();
            menu05.IconCode = "\xe61e";
            menu05.Header = "Catalog02";
            menu03.Children.Add(menu05);

            MenuItemModel menu07 = new MenuItemModel();
            menu07.IconCode = "\xe620";
            menu07.Header = "Catalog03";
            menu05.Children.Add(menu07);

            MenuItemModel menu08 = new MenuItemModel();
            menu08.IconCode = "\xe60d";
            menu08.Header = "Catalog04";
            menu05.Children.Add(menu08);

            MenuItemModel menu06 = new MenuItemModel();
            menu06.IconCode = "\xe605";
            menu06.Header = "Home02";

            MesMenuBar.Add(menu01);
            MesMenuBar.Add(menu06);

        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace BlankApp1.Extensions
{
    public static class PrismManager
    {

        public static readonly string DirectoryWindowRegionName = "DirectoryWindowRegion";
    }
}
avatar
文章
阅读
粉丝