Skip to content

Home

Jump to bottom
deamon-XiaoMi edited this page Oct 1, 2023 · 4 revisions

First Draft是面向 Windows Presentation Foundation (WPF)的一套自定义样式库，包含基础控件的样式以及部分自定义控件的样式。

控件概览

  • 新样式控件
    • 按钮（Button）
    • 切换按钮（ToggleButton）
    • 单选按钮（RadioButton）
    • 复选框（CheckBox）
    • 文本框（TextBox）
    • 下拉选项框（ComboBox）
    • 滑动条（Slider）
    • 密码框（PasswordBox）
  • 自定义控件
    • 图标按钮（IconButton）
    • 图标切换按钮（IconToggleButton）
    • 图标单选按钮（IconRadioButton）
    • 图标文本框（IconTextBox）
    • Fd窗口（FdWindow）

引入项目

项目加载

方式1：NuGet包引用

  1. 选择“项目”>“管理 NuGet 包” 。
  2. 在“NuGet 包管理器”窗口中，选择“nuget.org”作为包源。
  3. 在 “浏览 ”选项卡中，搜索 WeDraft.Toolkit.FirstDraft，在列表中选择 WeDraft.Toolkit.FirstDraft ，然后选择“ 安装”。

方式2：Github源代码添加

  1. 打开github，搜索**Owner avatar**[Toolkit-WeDraft](https://github.com/mefdeamon/Toolkit-WeDraft)
  2. 下载源代码或者Clone到本地（如果安装了git）
  3. 解压并打开源代码，找到FirstDraft，直接拷贝到目标项目同级目录下
  4. 选择“解决方案”>“添加”>“现有项”，找到刚刚拷贝的FirstDraft文件夹，选择 FirstDraft.csproj文件。
  5. 打开“项目（自己创建的项目）”，找到“依赖项” 。
  6. 右键打开，选择“添加项目引用”，并找到FirstDraft，点击确定。

资源加载

打开App.xaml文件，并在添加以下内容

    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/FirstDraft;component/Themes/Ui.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>

完整代码

<Application x:Class="FirstDraft.ApplyDemo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:FirstDraft.ApplyDemo"
             xmlns:data="clr-namespace:FirstDraft.ApplyDemo.Data"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/FirstDraft;component/Themes/Ui.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

控件使用

FdWindow 窗口

FdWindow是基于WPF的默认Window控件派生的自定义窗口控件，它基于WindowResizer实现的，样式定义中使用到WindowChrome来实现窗口行为动作的交互。默认的窗口的样式为NoTitleIconFdWindow，样式简单，只保留了窗口的基本控制（拖拽、缩放、最大化、最小化、菜单栏和关闭）。

如果需要使用FdWindow作为用户的窗口，其使用步骤如下，前提是你已经按照引入项目添加了项目的相关引用加载。

我们在已创建好的窗口Window1.xaml上使用。默认代码如下：

  1. Window1.xaml

    <Window x:Class="FirstDraft.ApplyDemo.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:FirstDraft.ApplyDemo"
        mc:Ignorable="d"
        Title="Window1" Height="450" Width="800">
    <Grid>
        <TextBlock Text="using FdWindow" Background="AliceBlue"/>
    </Grid>
</Window>

  2. Window1.xaml.cs

    using System.Windows;

namespace FirstDraft.ApplyDemo
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
    }
}

修改xaml.cs文件中Window1继承的基类为FdWindow

using FirstDraft;
using System.Windows;

namespace FirstDraft.ApplyDemo
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : FdWindow
    {
        public Window1()
        {
            InitializeComponent();
        }
    }
}

在xaml文件中添加FdWindow的命名空间fd，并修改根阶段为fd:FdWindow

<fd:FdWindow x:Class="FirstDraft.ApplyDemo.Window1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:FirstDraft.ApplyDemo"
             xmlns:fd="clr-namespace:FirstDraft;assembly=FirstDraft"
             mc:Ignorable="d"
             Title="Window1" Height="450" Width="800">
    <Grid>
        <TextBlock Text="using FdWindow" Background="AliceBlue"/>
    </Grid>
</fd:FdWindow>

说明文档

图标按钮

命名空间：FirstDraft.Controls

程序集：FirstDraft.dll

图标按钮（IconButton）是基于按钮的自定义按钮控件，提供图标和文本同时显示的按钮控件。

public class IconButton : System.Windows.Controls.Button

继承 DispatcherObject → DependencyObject → Visual → UIElement → FrameworkElement → Control → ContentControl → ButtonBase → Button → IconButton

属性

属性名 类型 描述
Icon Geometry 获取或设置图标数据，支持StreamGeometry字符串的方式赋值
IconSize Double 获取或设置图标的大小，默认12像素，大小必须是正数

示例

分别显示默认大小的纯图标按钮、18像素的纯图标按钮、默认大小的图文按钮。

<UserControl x:Class="FirstDraft.ApplyDemo.Views.ApplyIconButtonView"
             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:FirstDraft.ApplyDemo.Views"
             xmlns:controls="clr-namespace:FirstDraft.Controls;assembly=FirstDraft"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
          <Grid>
        <DockPanel>
            <WrapPanel  Margin="5">
                 <controls:IconButton Margin="5" Icon="{Binding home_line, Source={StaticResource IconSet}}"/>
                 <controls:IconButton Margin="5" IconSize="18" Icon="{Binding home_fill, Source={StaticResource IconSet}}" />
                 <controls:IconButton Margin="5" Icon="{Binding record_on, Source={StaticResource IconSet}}" Content="录制"/>
             </WrapPanel>
        </DockPanel>
    </Grid>       
 </UserControl>

图标切换按钮

IconToggleButton

命名空间：FirstDraft.Controls

程序集：FirstDraft.dll

图标切换按钮（IconToggleButton）是基于切换按钮的自定义按钮控件，提供图标和文本同时显示的按钮控件。

public class IconToggleButton : System.Windows.Controls.ToggleButton

继承 DispatcherObject → DependencyObject → Visual → UIElement → FrameworkElement → Control → ContentControl → ButtonBase → ToggleButton → IconToggleButton

属性

属性名 类型 描述
Icon Geometry 获取或设置图标数据，支持StreamGeometry字符串的方式赋值
IconSize Double 获取或设置图标的大小，默认12像素，大小必须是正数

示例

分别显示默认大小的纯图标、18像素的纯图标图标状态切换按钮，默认大小的图文状态切换按钮。

<UserControl x:Class="FirstDraft.ApplyDemo.Views.ApplyIconToggleButtonView"
             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:FirstDraft.ApplyDemo.Views"
             xmlns:controls="clr-namespace:FirstDraft.Controls;assembly=FirstDraft"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
          <Grid>
        <DockPanel>
            <WrapPanel  Margin="5">
                <controls:IconToggleButton Margin="5" Icon="{Binding tag_line, Source={StaticResource IconSet}}" Content="使能" />
                <controls:IconToggleButton Margin="5" Icon="{Binding tag_line, Source={StaticResource IconSet}}" />
                <controls:IconToggleButton Margin="5" Icon="{Binding tag_line, Source={StaticResource IconSet}}" IconSize="18"/>
             </WrapPanel>
        </DockPanel>
    </Grid>       
 </UserControl>

图标单选按钮

IconRadioButton

命名空间：FirstDraft.Controls

程序集：FirstDraft.dll

图标单选按钮（IconRadioButton）是基于单选按钮的自定义按钮控件，提供图标和文本同时显示的按钮控件。

public class IconRadioButton : System.Windows.Controls.RadioButton

继承 DispatcherObject → DependencyObject → Visual → UIElement → FrameworkElement → Control → ContentControl → ButtonBase → ToggleButton → RadioButton → IconRadioButton

属性

属性名 类型 描述
Icon Geometry 获取或设置图标数据，支持StreamGeometry字符串的方式赋值
IconSize Double 获取或设置图标的大小，默认12像素，大小必须是正数

示例

默认样式效果

<UserControl x:Class="FirstDraft.ApplyDemo.Views.ApplyIconRadioButtonView"
             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:FirstDraft.ApplyDemo.Views"
             xmlns:controls="clr-namespace:FirstDraft.Controls;assembly=FirstDraft"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
          <Grid>
        <DockPanel>
            <WrapPanel  Margin="5">
                 <controls:IconRadioButton Margin="5" Icon="{Binding tags_line, Source={StaticResource IconSet}}" Content="使能" />
                 <controls:IconRadioButton Margin="5" Icon="{Binding tags_line, Source={StaticResource IconSet}}" IsChecked="True" Content="选中" />
             </WrapPanel>
        </DockPanel>
    </Grid>       
 </UserControl>

预定义样式LeftNaviIconRaioButton，常用于导航按钮

<UserControl x:Class="FirstDraft.ApplyDemo.Views.ApplyIconRadioButtonView"
             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:FirstDraft.ApplyDemo.Views"
             xmlns:controls="clr-namespace:FirstDraft.Controls;assembly=FirstDraft"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
          <Grid>
        <DockPanel>
            <WrapPanel  Margin="5">
                 <StackPanel Orientation="Vertical">
                     <controls:IconRadioButton Icon="{Binding tags_line, Source={StaticResource IconSet}}" Content="图标库" Style="{StaticResource LeftNaviIconRaioButton}"/>
                     <controls:IconRadioButton  Icon="{Binding settings_line, Source={StaticResource IconSet}}" Content="设置" Style="{StaticResource LeftNaviIconRaioButton}" IsChecked="True"/> 
                </StackPanel>
             </WrapPanel>
        </DockPanel>
    </Grid>       
</UserControl>

预定义样式BottomNaviIconRaioButton，常用于导航按钮

<UserControl x:Class="FirstDraft.ApplyDemo.Views.ApplyIconRadioButtonView"
             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:FirstDraft.ApplyDemo.Views"
             xmlns:controls="clr-namespace:FirstDraft.Controls;assembly=FirstDraft"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
          <Grid>
        <DockPanel>
            <WrapPanel  Margin="5">
                <StackPanel Orientation="Horizontal">
                    <controls:IconRadioButton Icon="{Binding user_line, Source={StaticResource IconSet}}" Content="用户" Style="{StaticResource BottomNaviIconRaioButton}" />
                    <controls:IconRadioButton  Icon="{Binding infomation_line, Source={StaticResource IconSet}}" Content="关于" Style="{StaticResource BottomNaviIconRaioButton}" IsChecked="True" />
                </StackPanel>
             </WrapPanel>
        </DockPanel>
    </Grid>       
</UserControl>

图标文本框

IconTextBox

命名空间：FirstDraft.Controls

程序集：FirstDraft.dll

图标文本框（IconTextBox）是基于文本框的自定义控件，提供图标和文本同时显示的文本框控件。

public class IconTextBox : System.Windows.Controls.TextBox

继承 DispatcherObject → DependencyObject → Visual → UIElement → FrameworkElement → Control → TextBoxBase → TextBox → IconTextBox

属性

属性名 类型 描述
Icon Geometry 获取或设置图标数据，支持StreamGeometry字符串的方式赋值
IconSize Double 获取或设置图标的大小，默认12像素，大小必须是正数
Tag String 获取或设置文本提示内容
(继承自 FrameworkElement)

示例

表单提交时，文本框中包含图标提示和文本提示。

<UserControl x:Class="FirstDraft.ApplyDemo.Views.ApplyIconToggleButtonView"
             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:FirstDraft.ApplyDemo.Views"
             xmlns:controls="clr-namespace:FirstDraft.Controls;assembly=FirstDraft"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
          <Grid>
        <DockPanel>
            <WrapPanel  Margin="5">
                <StackPanel>
                    <fdcontrol:IconTextBox Icon="{Binding user_fill, Source={StaticResource IconSet}}" Text="" Tag="姓名" Width="200" Margin="5"/>
                    <fdcontrol:IconTextBox Icon="{Binding phone_fill, Source={StaticResource IconSet}}" Text="" Tag="电话" Width="200" Margin="5"/>
                    <fdcontrol:IconTextBox Icon="{Binding email_fill, Source={StaticResource IconSet}}" Text="" Tag="电子邮件" Width="200" Margin="5"/>                   
                </StackPanel>
             </WrapPanel>
        </DockPanel>
    </Grid>       
 </UserControl>

Fd窗口

FdWindow

命名空间：FirstDraft

程序集：FirstDraft.dll

Fd窗口（FdWindow）是基于窗口的自定义控件，提供只保留窗口操作（最小化、最大化、窗口化、关闭...）的窗口控件。

public class FdWindow : System.Windows.Window

继承 DispatcherObject → DependencyObject → Visual → UIElement → FrameworkElement → Control → ContentControl → Window → FdWindow

字段

属性名 类型 描述
mWindowResizer WindowResizer 窗口大小调整器辅助对象，用于在各种状态下保持窗口大小正确
mDockPosition WindowDockPosition 记录上一次窗口停靠状态
normalWindowCornerRadius CornerRadius 记录窗口圆角半径大小，默认无圆角
normalMarginSize Thickness 记录窗口外边框的大小，默认10像素

属性

属性名 类型 描述
BeingMoved Boolean 获取窗口是否在拖拽移动
Borderless Boolean 获取窗口是否为无边框
窗口停靠或者最大化时无边框
ResizeBorder Int32 获取窗口周围调整大小边框的大小
ResizeBorderThickness Thickness 获取窗口周围调整大小边框的大小，考虑外部边距
WindowChrome中ResizeBorderThickness的默认绑定值
InnerContentPadding Thickness 获取窗口内部内容的填充内边距大小
OuterMarginSize Thickness 获取窗口周围允许放置阴影的边距
FlatBorderThickness Int32 获取停靠时窗口周围的矩形边框
WindowCornerRadius CornerRadius 获取窗口边缘圆角的半径
CaptionHeight Int32 获取或设置窗口捕获区域的高度
WindowChrome中CaptionHeight的默认绑定值
CaptionHeightGridLength GridLength 获取窗口捕获区域的高度
用于绑定窗口操作按钮的高度
OuterMarginBlurRadius Int32 获取窗口周围允许放置阴影的BlurRadius

示例

空的Fd窗口样式。

<fd:FdWindow x:Class="FirstDraft.ApplyDemo.MainWindow"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:FirstDraft.ApplyDemo"
             xmlns:fd="clr-namespace:FirstDraft;assembly=FirstDraft"
             mc:Ignorable="d" 
             WindowStartupLocation="CenterScreen"
             Title="{Binding WindowsTitle}" Height="600" Width="1100">
    <fd:FdWindow.Resources>
        <Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource BaseTextBlock}"/>
    </fd:FdWindow.Resources>
    <Grid>
        
    </Grid>
</fd:FdWindow>

Clone this wiki locally