[WeUiSharp] 基於WPF實現的仿Windows桌面版微信UI介面庫

阿新 • • 發佈：2021-08-30

WeUiSharp

基於 WPF 實現的仿 Windows 桌面版微信 UI 介面庫

專案主頁：https://github.com/IUpdatable/WeUiSharp 歡迎Star

1. 特點

.NET Framework >= 4.7.2
多語言動態切換
主題動態切換（TODO：深色主題）
MIT 協議，開源可商用

2. 概覽

仿微信主介面

仿微信登入介面

高仿桌面版微信的區域網聊天工具正在開發中，後續會開源釋出，敬請期待。

3. 開始

建立一個基於.NET Framework 4.7.2+ 的WPF專案（推薦使用：Prism 框架，直接使用 Prism模板

建立專案）；
NuGet 安裝 WeUiSharp
修改檔案 App.xaml，新增以下資源：

<Application.Resources>
    <!-- 下面部分為新增內容 -->
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/WeUiSharp;component/ControlsResources.xaml"/>
            <weui:ThemeResources RequestedTheme="Light">
                <weui:ThemeResources.ThemeDictionaries>
                    <ResourceDictionary x:Key="Light">
                        <ResourceDictionary.MergedDictionaries>
                            <ResourceDictionary Source="/WeUiSharp;component/ThemeResources/Light.xaml" />
                        </ResourceDictionary.MergedDictionaries>
                    </ResourceDictionary>
                    <ResourceDictionary x:Key="Dark">
                        <ResourceDictionary.MergedDictionaries>
                            <ResourceDictionary Source="/WeUiSharp;component/ThemeResources/Dark.xaml" />
                        </ResourceDictionary.MergedDictionaries>
                    </ResourceDictionary>
                </weui:ThemeResources.ThemeDictionaries>
            </weui:ThemeResources>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

修改檔案 MainWindow.xaml，將 Window 改為 weui:Window，並新增 weui 的引用：

<weui:Window xmlns:weui="https://github.com/IUpdatable/WeUiSharp" Title="Hello WeUiSharp"
        ...
        >
    <Grid>
        
    </Grid>

</weui:Window>

修改 MainWindow.xaml.cs，取消從 Window 的繼承關係

public partial class MainWindow
{
    public MainWindow()
    {
        InitializeComponent();
    }
}

編譯執行，應該就可以看到下面效果的介面：

完整程式碼：WeUiSharp.HelloWorld

基於 Prism 框架的 Hello Wrorld 專案完整程式碼： WeUiSharp.HelloWorldWithPrism

4. 反饋

PS: 最近在找工作，有工作推薦的也可以聯絡我。

郵箱：[email protected]
微信公眾號：

5. 元件

以下所有例項的完整程式碼：WeUiSharp.Demo

Window
Button
ToggleButton
PathButton
IconButton
Field
CheckBox
ComboBox
MessageBox
ContextMenu
Toast
Alert

5.1 Window

頂部系統按鈕及預設使能情況：

設定按鈕（SettingsButton）：IsSettingsBtnEnable=False
置頂按鈕（TopmostButton）：IsTopmostBtnEnable=False
最小化按鈕（MinimizeButton）：IsMinBtnEnable=True
最大化按鈕（Maximize Button）：IsMaxBtnEnable=True
關閉按鈕（Close Button）：IsCloseBtnEnable=True

Title相關設定:

TitleAlign: Left | Center(default)
TitleColor
TitleFontSize
TitleMargin

5.2 Button

<Button>Default Button</Button>
<!-- xmlns:weui="https://github.com/IUpdatable/WeUiSharp" -->
<!-- default: GreenType=None -->
<weui:Button>Button</weui:Button>
<weui:Button GreenType="All">Full Green Button</weui:Button>
<weui:Button GreenType="Foreground">Foreground Green Button</weui:Button>
<weui:Button GreenType="Hover">Hover Green Button</weui:Button>

5.3 ToggleButton

<ToggleButton IsChecked="True" />

5.4 PathButton

<!-- xmlns:weui="https://github.com/IUpdatable/WeUiSharp" -->
<weui:PathButton ToolTip="This is PathButton" Width="25" Height="25" Background="Transparent" 
                MouseOverForeground="{StaticResource WeUiGreen}">
    <weui:PathButton.Path>
        <Path Data="{StaticResource WeUiGeometry_AddFriend}"/>
    </weui:PathButton.Path>
</weui:PathButton>

（1）Background和Foreground都分別有三種狀態的顏色屬性：

Background: DefaultBackground MouseOverBackground PressedBackground
Foreground: DefaultForeground MouseOverForeground PressedForeground

（2）DefaultBackground 和 Background的關係說明: 如果你只想要一種背景顏色，那麼直接使用Background，無需再設定MouseOverBackground和PressedBackground。如果希望保留三種狀態下的顏色，那麼請使用DefaultBackground。DefaultForeground和DefaultForeground與之同理。

5.5 IconButton

<!-- xmlns:weui="https://github.com/IUpdatable/WeUiSharp" -->
<weui:IconButton ToolTip="This is IconButton" Width="25" Height="25" StaticIcon="../Resources/Chat.png" 
    MouseOverIcon="../Resources/Chat_MouseOver.png" PressedIcon="../Resources/Chat_Pressed.png"/>

5.6 Field

<!-- xmlns:weui="https://github.com/IUpdatable/WeUiSharp" -->
<weui:Field Width="150">Default Field</weui:Field>
<weui:Field PlaceHolder="This is Placeholder" Width="150"></weui:Field>
<weui:Field IsPassword="True" PlaceHolder="Enter password" Width="150"></weui:Field>
<weui:Field IsPassword="True" Password="123456" Width="150"></weui:Field>

5.7 CheckBox

<CheckBox>Option0</CheckBox>
<CheckBox IsChecked="True">Option1</CheckBox>
<CheckBox>Option2</CheckBox>

5.8 ComboBox

<ComboBox Height="30" Width="120" >
    <ComboBoxItem>Option1</ComboBoxItem>
    <ComboBoxItem  IsSelected="True">Option2</ComboBoxItem>
    <ComboBoxItem>Option3</ComboBoxItem>
</ComboBox>

5.9 MessageBox

MessageBoxResult dialogResult = MessageBox.Show("This is a MessageBox!", "Title", MessageBoxButton.YesNo);
if (dialogResult == MessageBoxResult.Yes)
{
    MessageBox.Show("You clicked Yes");
}
else if (dialogResult == MessageBoxResult.No)
{
    MessageBox.Show("You clicked No");
}

因為WeUiSharp是支援多語言動態切換的，所有MessageBox中按鈕的文字是跟隨系統設定的。

MessageBoxResult MessageBox.Show(string messageBoxText);
MessageBoxResult MessageBox.Show(string messageBoxText, string caption);
MessageBoxResult MessageBox.Show(string messageBoxText, string caption, MessageBoxButton button);

MessageBoxButton:

OK (default)
OKCancel
YesNoCancel
YesNo
GotIt

MessageBoxResult:

None
OK
Cancel
Yes
No
GotIt

5.10 ContextMenu

xaml

<XXX.ContextMenu>
    <ContextMenu ItemsSource="{Binding MenuItems}"/>
</XXX.ContextMenu>

code

public class OverviewViewModel : BindableBase
{
    private List<MenuItem> _MenuItems;
    private ICommand _MenuItemCommand;

    public List<MenuItem> MenuItems { get => _MenuItems; }


    public OverviewViewModel()
    {
        InitContextMenu();
    }

    private void OnClickMenuItem(object obj)
    {
        if (obj is MenuItem menuItem)
        {
            MessageBox.Show("You clicked " + menuItem.Header, "ContextMenu");
        }
    }

    private void InitContextMenu()
    {
        _MenuItemCommand = new DelegateCommand<object>(OnClickMenuItem);
        _MenuItems = new List<MenuItem>();
        var menuItem1 = new MenuItem()
        {
            Header = "Item1",
            Command = _MenuItemCommand
        };
        menuItem1.CommandParameter = menuItem1;
        var menuItem2 = new MenuItem()
        {
            Header = "Item2",
            Command = _MenuItemCommand
        };
        menuItem2.CommandParameter = menuItem2;
        var menuItem3 = new MenuItem()
        {
            Header = "Item3",
            Command = _MenuItemCommand
        };
        menuItem3.CommandParameter = menuItem3;
        var menuItem4 = new MenuItem()
        {
            Header = "Item4",
            IsEnabled = false,
            Command = _MenuItemCommand
        };
        menuItem4.CommandParameter = menuItem4;
        _MenuItems.Add(menuItem1);
        _MenuItems.Add(menuItem2);
        _MenuItems.Add(null); // 分割線 MenuItemSeparator
        _MenuItems.Add(menuItem3);
        _MenuItems.Add(menuItem4);
    }
}

5.11 Toast

// Toast.Show(string message, double durationSec = 3.5)
// Toast.Show(Window owner, string message, double durationSec = 3.5)
Toast.Show("Tis is a Toast!", 1);

5.12 Alert

使用Alert的前提是Window下的根元素必須為Grid。
報警提示資訊會一直位於窗體頂部居中位置。

// 觸發一個報警
(System.Windows.Application.Current.MainWindow as WeUiSharp.Windows.Window).TriggerAlertCommand.Execute("Your alert message!");

// 取消報警
var window = System.Windows.Application.Current.MainWindow as WeUiSharp.Windows.Window;
if (window.IsAlertTriggered)
{
    window.CancelAlertCommand.Execute(null);
}

6. 本地化

WeUiSharp目前支援三種語言：

English（en）
簡體中文（zh-CN）
繁體中文（zh-Hant）

6.1 切換語言：

// using WeUiSharp.Localization;
TranslationSource.Instance.Language = "en"; // "zh-CN" "zh-Hant"

6.2 自己的專案中實現多語言支援

Step 1: 建立如下圖的resx資原始檔，新增自己的多語言文字，這裡推薦使用 ResXManager

Step 2: XAML

<weui:Window xmlns:weui="https://github.com/IUpdatable/WeUiSharp" 
             xmlns:props="clr-namespace:YourProjectName.Properties"
             xmlns:markup="clr-namespace:WeUiSharp.Markup;assembly=WeUiSharp"
             xmlns:localization="clr-namespace:WeUiSharp.Localization;assembly=WeUiSharp"
             localization:Translation.ResourceManager="{x:Static props:Strings.ResourceManager}"
             ...>
    <Grid>
        <!-- TestText is a demo key  -->
        <TextBlock Text="{markup:Loc TestText}" Width="100" Height="30"></TextBlock>
    </Grid>
</weui:Window>

Step 3: code

// using YourProjectName.Properties;
string text = Strings.ResourceManager.GetString(nameof(Strings.TestText), Thread.CurrentThread.CurrentUICulture);

如果希望監聽語言切換事件

// using WeUiSharp.Localization;
TranslationSource.Instance.PropertyChanged += TranslationInstance_PropertyChanged;

private void TranslationInstance_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    // your code here
}