Mgen Spa工程 2 教程（第14部分）：自訂錯誤封裝控制項和組控制項樣式

返回教程目錄

目錄

• 1. 自訂錯誤封裝控制項樣式
• 2. 自訂群組控制項樣式

 

 

返回目錄

1. 自訂錯誤封裝控制項樣式

如，當一個控制項發生驗證錯誤後，控制項會被紅色的邊框包圍，然後下方有錯誤訊息。事實上，控制項在顯示後是包含在另一個Spa工程內部控制項中，它就是錯誤封裝控制項，該控制項和WPF中的HeaderedContentControl很像，名稱是SpaHeaderedContentControl，定義在Mgen.Spa.UI.Controls命名空間內。

 

下面是SpaHeaderedContentControl的類型視圖：

（注意上方紅線表明的地方，在WPF中SpaHeaderedContentControl是直接繼承自System.Windows.Controls.HeaderedContentControl的，但是在WP和WinRT環境下，系統沒有定義HeaderedContentControl，SpaHeaderedContentControl繼承自Spa工程內Mgen.Spa.UI.Controls.Core.HeaderedContentControl類型。）

 

這個類型很簡單，顯示的控制項本身和控制項上方的文字分別對應HeaderedContentControl的Content屬性和Header屬性。SpaHeaderedContentControl在其基礎上添加和錯誤資訊：Error屬性。其他屬性都是輔助屬性。

 

那麼使用者可以自訂一個針對SpaHeaderedContentControl的樣式來改變錯誤封裝控制項的樣式，在預設樣式下，錯誤文字的顏色等於邊框顏色。

 

那麼可以定義一個樣式把錯誤顏色改成藍色，然後只顯示左右兩側的邊框：

首先加入SpaHeaderedContentControl的命名空間：

xmlns:spacon="clr-namespace:Mgen.Spa.UI.Controls;assembly=Mgen.Spa.FX"

接著定義樣式：

<Style TargetType="spacon:SpaHeaderedContentControl">

    <Setter Property="BorderThickness" Value="4 0"/>

    <Setter Property="BorderBrush" Value="Navy"/>

</Style>

 

運行結果：

 

如果想設定上方文字的樣式，可以通過SpaHeaderedContentControl的HeaderTemplate屬性，如下Style定義：

<Style TargetType="spacon:SpaHeaderedContentControl">

    <Setter Property="HeaderTemplate">

        <Setter.Value>

            <DataTemplate>

                <Border Background="YellowGreen" Padding="5">

                    <TextBlock Text="{Binding}" Foreground="White" FontSize="18"/>

                </Border>

            </DataTemplate>

        </Setter.Value>

    </Setter>

</Style>

 

運行結果：

WPF下：

WinRT下：

WP下：

當然使用者最後也可以直接設定SpaHeaderedContentControl的Template屬性來為其定義一個全新的控制項範本。

 

 

返回目錄

2. 自訂群組控制項樣式

組控制項樣式對應Mgen.Spa.UI.Controls.SpaExpander控制項，同樣，在WPF中SpaExpander直接繼承自WPF的Expander類型，而在WinRT和WP中繼承自Spa工程定義的Expander類型。讀者可以參考WPF的Expander控制項的模板來自訂SpaExpander的控制項範本。如果只是想改一下基礎樣式，可以直接設定SpaExpander的HeaderStyle和HeaderErrorStyle。實際上這兩個Style會應用在Expander的Header內部的CheckBox控制項上。兩個樣式分別代表沒有驗證錯誤和有驗證錯誤的SpaExpander上。

 

樣本樣式：

<!-- spacon命名空間指向Mgen.Spa.UI.Controls -->

<Style TargetType="spacon:SpaExpander">

    <Setter Property="HeaderStyle">

        <Setter.Value>

            <Style TargetType="Control">

                <Setter Property="Background" Value="Gray"/>

                <Setter Property="BorderThickness" Value="3"/>

                <Setter Property="BorderBrush" Value="Black"/>

            </Style>

        </Setter.Value>

    </Setter>

    <Setter Property="HeaderErrorStyle">

        <Setter.Value>

            <Style TargetType="Control">

                <Setter Property="Foreground" Value="Red"/>

                <Setter Property="Background" Value="Transparent"/>

                <Setter Property="BorderThickness" Value="3"/>

                <Setter Property="FontSize" Value="29"/>

                <Setter Property="BorderBrush" Value="Pink"/>

            </Style>

        </Setter.Value>

    </Setter>

</Style>

 

運行結果，當組沒有錯誤時：

有驗證錯誤時：

 

WinRT下：

WP下：