Material Design in XAML 詳解

Material Design in XAML 是一款基於 WPF 和 WinUI 應用程序框架的開源 UI 庫，該庫旨在為開發人員和設計師提供直觀易用，符合 Google Material Design 標準的控制項、圖標、樣式等資源。

一、自定義控制項

Material Design in XAML 提供了許多常用的控制項，如按鈕、文本框、菜單等，並且還支持自定義控制項。在 WPF/XAML 中，自定義控制項需要定義樣式和模板。樣式用於設置控制項的外觀，而模板用於定義控制項的內部結構。

下面是一個自定義卡片控制項的示例：

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
      Background="{DynamicResource MaterialDesignPaper}">
    <Grid.Resources>
        <Style x:Key="CardBorder" TargetType="{x:Type Border}">
            <Setter Property="Background" Value="White"/>
            <Setter Property="CornerRadius" Value="2"/>
            <Setter Property="Padding" Value="8"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignDivider}"/>
        </Style>

        <Style x:Key="Card" TargetType="{x:Type Grid}">
            <Setter Property="Margin" Value="8"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="Height" Value="160"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Opacity" Value="0.8"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Opacity" Value="1"/>
                </Trigger>
            </Style.Triggers>
            <Border Style="{StaticResource CardBorder}">
                <ContentPresenter/>
            </Border>
        </Style>
    </Grid.Resources>

    <Grid Style="{StaticResource Card}">
        <!-- 卡片內容 -->
    </Grid>
</Grid>

上面的代碼中，通過定義 `Card` 和 `CardBorder` 兩個樣式來實現自定義卡片控制項的效果，並將兩個樣式合併為一個模板。

二、圖標和樣式

Material Design in XAML 還提供了豐富的圖標和樣式資源，可用於美化應用程序的外觀。其中，圖標庫包含近 2000 個 SVG 和 PNG 格式的矢量圖標，而樣式庫則包含了一系列顏色、字體、排版等樣式資源。

下面是一個使用 Material Design in XAML 樣式的文本框控制項示例：

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
      Background="{DynamicResource MaterialDesignPaper}">

    <StackPanel Margin="16">
        <materialDesign:TextBox Hint="請輸入用戶名"/>
        <materialDesign:TextBox Hint="請輸入密碼" Style="{StaticResource MaterialDesignOutlinedTextBox}"/>
        <materialDesign:TextBox Hint="請再次輸入密碼" Style="{StaticResource MaterialDesignOutlinedTextBox}" Margin="0 8 0 0"/>
    </StackPanel>
</Grid>

在上面的代碼中，我們使用了 `MaterialDesignOutlinedTextBox` 樣式，來實現文本框控制項的外觀和樣式。該樣式可通過 `Style` 屬性應用於文本框控制項中。

三、動畫效果

Material Design in XAML 還支持多種動畫效果，如水波紋效果、連續動畫效果等。這些動畫效果可使應用程序更生動、更有趣味性。

下面是一個帶有水波紋效果的按鈕控制項示例：

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
      Background="{DynamicResource MaterialDesignPaper}">

    <materialDesign:FlatButton Content="提交" Padding="16" Width="120" Height="40"
                                Background="{DynamicResource MaterialDesignPrimary}"
                                Click="{Binding SubmitButtonClick}">
        <materialDesign:Interaction.Triggers>
            <materialDesign:RippleEffect/>
        </materialDesign:Interaction.Triggers>
    </materialDesign:FlatButton>
</Grid>

在上面的代碼中，我們使用了 `RippleEffect` 水波紋效果，使得按鈕在點擊時會出現一個類似水波紋的動畫效果。

四、總結

Material Design in XAML 是一款優秀的 UI 庫，它提供了豐富的控制項、圖標、樣式和動畫效果，可以幫助開發人員和設計師快速創建符合 Material Design 標準的應用程序。