evExpress WinForm擁有180+組件和UI庫，能為Windows Forms平臺(tái)創(chuàng)建具有影響力的業(yè)務(wù)解決方案。DevExpress WinForms能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序，無論是Office風(fēng)格的界面，還是分析處理大批量的業(yè)務(wù)數(shù)據(jù)，它都能輕松勝任！

DevExpress Universal Subscription官方最新版免費(fèi)下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網(wǎng)

官方產(chǎn)品團(tuán)隊(duì)即將發(fā)布最新的WinForm相關(guān)產(chǎn)品的早期訪問預(yù)覽版 (EAP)（目前，它僅適用于擁有宇宙版授權(quán)的用戶，戳這里獲取>>），本文介紹的UI模板旨在通過完善即用型的模板（專為Windows Forms平臺(tái)構(gòu)建）快速啟動(dòng)表單設(shè)計(jì)/開發(fā)過程。

從上面的截圖可以看到，WinForms UI模板設(shè)計(jì)的目的是為了現(xiàn)實(shí)生活中的業(yè)務(wù)線 (LOB) 應(yīng)用程序創(chuàng)建/交付即用型 UI 解決方案（當(dāng)使用DevExpress WinForm控件時(shí)，消除對(duì)常規(guī)UI自定義的需要）。

早期訪問預(yù)覽版本（適用于激活的宇宙版用戶）

在文章開始之前，我們先談?wù)勥@個(gè)早期訪問預(yù)覽 (EAP)。官方給出的第一個(gè)EAP將提供給激活的Universal用戶，并且僅用于早期測(cè)試目的（僅限 C#），此 EAP 的目標(biāo)是衡量需求、了解支持需求并了解有關(guān)特定使用場(chǎng)景的更多信息。

如果您是激活的Universal用戶并希望使用此EAP，則需要在您的系統(tǒng)上安裝最新版本的WinForms產(chǎn)品線 (v22.1.5)。

所有WinForms UI模板都作為VSIX擴(kuò)展提供。

包含什么？

EAP的第一次迭代僅限于20個(gè)模板，包括UI表單、按鈕、組控件和獨(dú)立數(shù)據(jù)編輯器（僅限 C#），官方技術(shù)團(tuán)隊(duì)預(yù)計(jì)將在明年使用新的UI模板擴(kuò)展圖庫。

表單

• 地址表單
• 添加支付卡表單
• 卡支付表單
• 登錄表單
• 密碼表單
• 密碼恢復(fù)表單

數(shù)據(jù)編輯器 & 控件

• 聯(lián)系人列表
• 國家選擇器
• 編輯框
• 電子郵件編輯器
• 密碼編輯器
• 支付卡編輯器
• 電話號(hào)碼編輯器

按鈕 & 組

• 按鈕
• 芯片和切換按鈕
• 芯片組
• 多選芯片組
• 無線電組
• 切換按鈕組

背景

所有 WinForms UI 模板都利用現(xiàn)有的DevExpress WinForm控件，完全支持 WinForms MVVM、DirectX硬件加速和DevExpress應(yīng)用程序皮膚。 您無需直接修改即可使用這些UI模板，并將它們無縫集成到現(xiàn)有的WinForms項(xiàng)目中。

當(dāng)然您不受“開箱即用”的限制，所有WinForms UI模板都是可配置的，并且可以根據(jù)需要進(jìn)行擴(kuò)展。

由HTML & CSS提供支持

DevExpress WinForms UI 模板依賴于最新的桌面開發(fā)創(chuàng)新——HTML & CSS支持，HTML & CSS為任何由 DevExpress UI 控件和模板提供支持的 WinForms 項(xiàng)目打開了一系列用戶界面自定義選項(xiàng)。

使用HTML 、模板編輯器（已將其集成到Visual Studio IDE）可在設(shè)計(jì)表面上輕松處理外觀自定義，這個(gè)新的編輯器使用帶有自動(dòng)完成、標(biāo)簽導(dǎo)航和預(yù)覽的嵌入式語法編輯器。

UI模板的設(shè)計(jì)目的

官方技術(shù)團(tuán)隊(duì)這些年來在盡最大的努力提供具有各種設(shè)計(jì)時(shí)和運(yùn)行時(shí)自定義選項(xiàng)的 UI 控件，雖然這些選項(xiàng)提供了設(shè)計(jì)/布局的靈活性，但它們可能會(huì)影響那些剛接觸我們產(chǎn)品的人的工作效率（從表單上的控件布局和相關(guān)的屬性修改，到外觀自定義設(shè)置和事件處理）。

WinForms UI 模板旨在提高新老開發(fā)人員的工作效率，使用模板，您可以在幾分鐘內(nèi)將優(yōu)雅的 UI 表單（例如登錄、注冊(cè)、卡支付和地址表單）添加到 WinForms 項(xiàng)目中。

戶太久沒跟進(jìn)，又不知道寫啥內(nèi)容好？ 漂亮的html郵件會(huì)是一個(gè)很好的選擇！

這篇文章將介紹，如何運(yùn)用html的方式，編寫出漂亮的郵件。

1. 登錄進(jìn)以下網(wǎng)站，尋找你喜歡的html郵件模板。

https://stripo.email/templates/

2. 從模板庫中查找喜歡的模板，點(diǎn)擊進(jìn)入模板

3. 點(diǎn)擊 USE IN EDITOR FOR FREE

4. 選擇“sign in to save”

5. 在saved template中出現(xiàn)剛才的模板

6. 點(diǎn)擊模板開始編輯

需要更改模板的logo，圖片，文案等，自己嘗試設(shè)計(jì)好看的html郵件。

設(shè)計(jì)頁面的主要功能如下。

如果需要替換圖片，注意原圖片的尺寸比例，然后將要替換的圖片，裁剪成相應(yīng)的比例和大小。可使用PS或者畫圖工具。

為了使使用的圖片尺寸最小，將圖片用壓縮工具壓縮。壓縮的方式是：

進(jìn)入網(wǎng)站：https://tinypng.com/

將圖片拽入選框內(nèi)。

下面是設(shè)計(jì)好的郵件樣式參考

7. 設(shè)計(jì)好后，選擇export，選擇gmail （或者其他方式，看你喜歡什么了）

然后選擇相應(yīng)的gmail賬號(hào)登錄，按流程操作完成后，進(jìn)入Gmail賬戶。

進(jìn)去Gmail賬戶中的Draft，剛才的制作好的html模板就在里面。

8. 點(diǎn)擊Draft郵件，選擇底部的html郵件編輯工具 （工具為Free Gmail Html Editor）

9. 以下為html編輯工具頁面

切換進(jìn)入Design模式

需要特別注意：原先的導(dǎo)出的模板中，會(huì)存在很多原網(wǎng)站鏈接，這些鏈接需要找出來并挨個(gè)刪除。目的是保證郵件中鏈接數(shù)量少，進(jìn)垃圾郵箱概率小。

查找方式為：選中相應(yīng)元素，鼠標(biāo)右鍵，選擇link

如果出現(xiàn)有不必要的鏈接，則刪除。

選中相應(yīng)的模塊后，可以使用下面的工具進(jìn)行增加欄，刪除等操作。

如果操作失誤，可以使用返回按鈕。

現(xiàn)有的模板中，由于引用的圖片鏈接過長，那么使用以下方法將圖片替換掉。

a. 要替換鏈接的圖片，點(diǎn)擊下方最右側(cè)的按鈕

b. 點(diǎn)擊鏈接右側(cè)的符號(hào)

c. 上傳替換的圖片。然后點(diǎn)擊OK

(注意dimension部分需要根據(jù)布局去調(diào)整尺寸）

用上述方法，把郵件中所有的圖片替換掉。

10. 查看電腦端和手機(jī)端的樣式是否合適。

11. 制作好之后，復(fù)制html的source界面的代碼，并保存為文檔格式。

然后點(diǎn)擊save and close

12. 制作完成后，html郵件群發(fā)。

OES海外云郵件(t.smartsousou.com/q/0DB490)，能夠群發(fā)郵件并進(jìn)行統(tǒng)計(jì)。

和一般的第三方平臺(tái)群發(fā)郵件相比，好處多多。主要有：

a. 第三方發(fā)信時(shí)，客戶在收到郵箱時(shí)，發(fā)件人顯示的是第三方平臺(tái)的郵箱。大多數(shù)郵箱過濾系統(tǒng)會(huì)默認(rèn)這種郵件不安全，非常容易進(jìn)垃圾郵箱。

b. 第三方平臺(tái)的規(guī)則太復(fù)雜，郵件的表單聯(lián)系人來源被識(shí)別為不正常的話，特別容易被封賬號(hào)。

c. 第三方平臺(tái)現(xiàn)在付費(fèi)的版本都不便宜。

d. 集成的功能較多，可以根據(jù)每個(gè)客戶定制不同的附件。

備注：檢測(cè)郵件格式是否正確，是否有忘記刪除的奇怪鏈接，可以用制作完成的郵件給自己發(fā)一封。然后到收件箱中查看格式是否正確，是否有能點(diǎn)進(jìn)去奇怪的鏈接部分。然后在手機(jī)端也查看一下格式是否正確。

信公眾號(hào)：Dotnet9，網(wǎng)站：Dotnet9，問題或建議：請(qǐng)網(wǎng)站留言， 如果對(duì)您有所幫助：歡迎贊賞。

閱讀導(dǎo)航

1. 本文背景
2. 代碼實(shí)現(xiàn)
3. 本文參考

1.本文背景

聊天軟件大家用的比較多，用WPF做個(gè)聯(lián)系人列表試試。

本文效果如下：

聯(lián)系人列表

2.代碼實(shí)現(xiàn)

使用 .Net CORE 3.1 創(chuàng)建名為 “Chat” 的WPF項(xiàng)目，添加 MaterialDesignThemes(3.0.1)、MaterialDesignColors(1.2.2)兩個(gè)Nuget庫，文中部分圖片可在文末視頻配套源碼中下載。

2.1 引入MD控件樣式文件

使用MD控件的常規(guī)操作，需要在App.xaml中引入4個(gè)樣式文件

<Application x:Class="Chat.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Green.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

2.2 界面布局

純粹的布局代碼：

<Window x:Class="Chat.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Height="600" Width="1080" ResizeMode="NoResize" MouseLeftButtonDown="Window_MouseLeftButtonDown"
        WindowStartupLocation="CenterScreen" WindowStyle="None">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="270"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="270"/>
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="1" Background="#FFE4E4E4"/>

        <StackPanel Grid.Column="0" Background="{StaticResource PrimaryHueDarkBrush}">
            <StackPanel Orientation="Horizontal" Background="White">
                <Image Width="210" Height="80" Source="Assets/logo.png"/>
                <Button Style="{StaticResource MaterialDesignFlatButton}">
                    <materialDesign:PackIcon Kind="PlusCircle" Width="24" Height="24"/>
                </Button>
            </StackPanel>
            <TextBox Margin="20 10" Style="{StaticResource MaterialDesignFloatingHintTextBox}" materialDesign:HintAssist.Hint="搜索" Foreground="White"/>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Button Style="{StaticResource MaterialDesignFlatButton}" Grid.Column="0">
                    <materialDesign:PackIcon Kind="History" Foreground="White"/>
                </Button>
                <Button Style="{StaticResource MaterialDesignFlatButton}" Grid.Column="1">
                    <materialDesign:PackIcon Kind="People" Foreground="White"/>
                </Button>
                <Button Style="{StaticResource MaterialDesignFlatButton}" Grid.Column="2">
                    <materialDesign:PackIcon Kind="Contacts" Foreground="White"/>
                </Button>
                <Button Style="{StaticResource MaterialDesignFlatButton}" Grid.Column="3">
                    <materialDesign:PackIcon Kind="Archive" Foreground="White"/>
                </Button>
            </Grid>
            <ListView>
                <ListViewItem HorizontalAlignment="Stretch">
                    <Grid HorizontalAlignment="Center" Margin="5">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50"/>
                            <ColumnDefinition Width="150"/>
                            <ColumnDefinition Width="50*"/>
                        </Grid.ColumnDefinitions>

                        <Border Width="40" Height="40" CornerRadius="25" BorderBrush="White" BorderThickness="0.6">
                            <Border.Background>
                                <ImageBrush ImageSource="https://img.dotnet9.com/logo.png"/>
                            </Border.Background>
                        </Border>
                        <Border Width="10" Height="10" VerticalAlignment="Bottom" Margin="5" HorizontalAlignment="Right" CornerRadius="15" Background="LightGreen"/>

                        <StackPanel Grid.Column="1">
                            <TextBlock Text="Dotnet9.com" Margin="10 0"/>
                            <TextBlock Text="一個(gè)熱衷于互聯(lián)網(wǎng)分享精神的程序員的網(wǎng)站!" Margin="10 0" TextTrimming="CharacterEllipsis" Opacity="0.6" FontSize="11"/>
                        </StackPanel>

                        <Border Grid.Column="2" Width="20" Height="20" CornerRadius="15" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">
                            <TextBlock FontSize="11" Text="9" Foreground="{StaticResource PrimaryHueDarkBrush}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </Grid>
                </ListViewItem>
            </ListView>
        </StackPanel>

    </Grid>
</Window>

2.2.3 窗體拖動(dòng)

后臺(tái)代碼

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    DragMove();
}

本文略短，原作者視頻也有22分鐘，看視頻學(xué)習(xí)吧。

3.參考

1. 學(xué)習(xí)視頻：C# WPF Design UI – 1/3 – Contact List
2. 視頻配套源碼：Chat

除非注明，文章均由 Dotnet9 整理發(fā)布，歡迎轉(zhuǎn)載。

轉(zhuǎn)載請(qǐng)注明本文地址：https://dotnet9.com/6941.html