Xamarin.Forms 樣式類別

下載範例

Xamarin.Forms style 類別可讓多個樣式套用至控件，而不需採用樣式繼承。

建立樣式類別

您可以將上的 Style 屬性設定Class為 ，以表示類別名稱的 ，string來建立樣式類別。 透過使用 x:Key 屬性來定義明確樣式，這項功能的優點是可將多個樣式類別套用至 VisualElement。

重要

如果樣式以不同的類型為目標，則多個樣式可以共用相同的類別名稱。 這可讓多個樣式類別，其名稱相同，以不同類型為目標。

下列範例顯示三 BoxView 個樣式類別，以及一個 VisualElement 樣式類別：

<ContentPage ...>
    <ContentPage.Resources>
        <Style TargetType="BoxView"
               Class="Separator">
            <Setter Property="BackgroundColor"
                    Value="#CCCCCC" />
            <Setter Property="HeightRequest"
                    Value="1" />
        </Style>

        <Style TargetType="BoxView"
               Class="Rounded">
            <Setter Property="BackgroundColor"
                    Value="#1FAECE" />
            <Setter Property="HorizontalOptions"
                    Value="Start" />
            <Setter Property="CornerRadius"
                    Value="10" />
        </Style>    

        <Style TargetType="BoxView"
               Class="Circle">
            <Setter Property="BackgroundColor"
                    Value="#1FAECE" />
            <Setter Property="WidthRequest"
                    Value="100" />
            <Setter Property="HeightRequest"
                    Value="100" />
            <Setter Property="HorizontalOptions"
                    Value="Start" />
            <Setter Property="CornerRadius"
                    Value="50" />
        </Style>

        <Style TargetType="VisualElement"
               Class="Rotated"
               ApplyToDerivedTypes="true">
            <Setter Property="Rotation"
                    Value="45" />
        </Style>        
    </ContentPage.Resources>
</ContentPage>

Separator、 Rounded和 Circle 樣式類別會將每個屬性設定BoxView為特定值。

樣式 Rotated 類別具有 TargetType 的 VisualElement，這表示它只能套用至 VisualElement 實例。 不過，其 ApplyToDerivedTypes 屬性會設定為 true，以確保它可以套用至衍生自 VisualElement的任何控制件，例如 BoxView。 如需將樣式套用至衍生類型的詳細資訊，請參閱 將樣式套用至衍生類型。

對等的 C# 程式碼為：

var separatorBoxViewStyle = new Style(typeof(BoxView))
{
    Class = "Separator",
    Setters =
    {
        new Setter
        {
            Property = VisualElement.BackgroundColorProperty,
            Value = Color.FromHex("#CCCCCC")
        },
        new Setter
        {
            Property = VisualElement.HeightRequestProperty,
            Value = 1
        }
    }
};

var roundedBoxViewStyle = new Style(typeof(BoxView))
{
    Class = "Rounded",
    Setters =
    {
        new Setter
        {
            Property = VisualElement.BackgroundColorProperty,
            Value = Color.FromHex("#1FAECE")
        },
        new Setter
        {
            Property = View.HorizontalOptionsProperty,
            Value = LayoutOptions.Start
        },
        new Setter
        {
            Property = BoxView.CornerRadiusProperty,
            Value = 10
        }
    }
};

var circleBoxViewStyle = new Style(typeof(BoxView))
{
    Class = "Circle",
    Setters =
    {
        new Setter
        {
            Property = VisualElement.BackgroundColorProperty,
            Value = Color.FromHex("#1FAECE")
        },
        new Setter
        {
            Property = VisualElement.WidthRequestProperty,
            Value = 100
        },
        new Setter
        {
            Property = VisualElement.HeightRequestProperty,
            Value = 100
        },
        new Setter
        {
            Property = View.HorizontalOptionsProperty,
            Value = LayoutOptions.Start
        },
        new Setter
        {
            Property = BoxView.CornerRadiusProperty,
            Value = 50
        }
    }
};

var rotatedVisualElementStyle = new Style(typeof(VisualElement))
{
    Class = "Rotated",
    ApplyToDerivedTypes = true,
    Setters =
    {
        new Setter
        {
            Property = VisualElement.RotationProperty,
            Value = 45
        }
    }
};

Resources = new ResourceDictionary
{
    separatorBoxViewStyle,
    roundedBoxViewStyle,
    circleBoxViewStyle,
    rotatedVisualElementStyle
};

取用樣式類別

將類型為IList<string>的控件屬性設定StyleClass為樣式類別名稱清單，即可取用樣式類別。 如果控件的類型符合 TargetType 樣式類別的 ，則會套用樣式類別。

下列範例顯示三 BoxView 個實例，每個實例都設定為不同的樣式類別：

<ContentPage ...>
    <ContentPage.Resources>
        ...
    </ContentPage.Resources>
    <StackLayout Margin="20">
        <BoxView StyleClass="Separator" />       
        <BoxView WidthRequest="100"
                 HeightRequest="100"
                 HorizontalOptions="Center"
                 StyleClass="Rounded, Rotated" />
        <BoxView HorizontalOptions="Center"
                 StyleClass="Circle" />
    </StackLayout>
</ContentPage>    

在此範例中，第一個 BoxView 樣式為線條分隔符，而第三 BoxView 個則為圓形。 第二 BoxView 個樣式類別已套用兩個樣式類別，可提供圓角並旋轉 45 度：

重要

多個樣式類別可以套用至控制元件，因為 StyleClass 屬性的類型為 IList<string>。 發生這種情況時，樣式類別會以遞增清單順序套用。 因此，當多個樣式類別設定相同的屬性時，位於最高清單位置的樣式類別中的 屬性會優先。

對等的 C# 程式碼為：

...
Content = new StackLayout
{
    Children =
    {
        new BoxView { StyleClass = new [] { "Separator" } },
        new BoxView { WidthRequest = 100, HeightRequest = 100, HorizontalOptions = LayoutOptions.Center, StyleClass = new [] { "Rounded", "Rotated" } },
        new BoxView { HorizontalOptions = LayoutOptions.Center, StyleClass = new [] { "Circle" } }
    }
};

相關連結

• 基本樣式（範例）