の動的スタイル Xamarin.Forms
スタイルはプロパティの変更に応答せず、アプリケーションの期間中は変更されません。 たとえば、Style をビジュアル要素に割り当てた後、Setter インスタンスの 1 つが変更、削除、または追加された新しい Setter インスタンスの場合、変更はビジュアル要素に適用されません。 ただし、アプリケーションは、動的リソースを使用して実行時に動的にスタイルの変更に応答できます。
マークアップ拡張機能は DynamicResource
、両方ともディクショナリ キーを StaticResource
使用して から値をフェッチするという点で、マークアップ拡張機能に ResourceDictionary
似ています。 ただし、 は StaticResource
1 つのディクショナリ検索を実行しますが、 DynamicResource
はディクショナリ キーへのリンクを保持します。 したがって、キーに関連付けられているディクショナリ エントリが置き換えられると、変更がビジュアル要素に適用されます。 これにより、ランタイム スタイルの変更をアプリケーションで行えます。
次のコード例は、XAML ページの 動的スタイル を示しています。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.DynamicStylesPage" Title="Dynamic" IconImageSource="xaml.png">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="baseStyle" TargetType="View">
...
</Style>
<Style x:Key="blueSearchBarStyle"
TargetType="SearchBar"
BasedOn="{StaticResource baseStyle}">
...
</Style>
<Style x:Key="greenSearchBarStyle"
TargetType="SearchBar">
...
</Style>
...
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<SearchBar Placeholder="These SearchBar controls"
Style="{DynamicResource searchBarStyle}" />
...
</StackLayout>
</ContentPage.Content>
</ContentPage>
インスタンスはSearchBar
マークアップ拡張機能をDynamicResource
使用して、 という名前searchBarStyle
の Style
を参照します。これは XAML で定義されていません。 ただし、インスタンスのStyle
SearchBar
プロパティは を使用してDynamicResource
設定されるため、ディクショナリ キーが見つからない場合、例外はスローされません。
代わりに、分離コード ファイルでは、次のコード例に示すように、コンストラクターは キー searchBarStyle
を使用してエントリを作成ResourceDictionary
します。
public partial class DynamicStylesPage : ContentPage
{
bool originalStyle = true;
public DynamicStylesPage ()
{
InitializeComponent ();
Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
}
void OnButtonClicked (object sender, EventArgs e)
{
if (originalStyle) {
Resources ["searchBarStyle"] = Resources ["greenSearchBarStyle"];
originalStyle = false;
} else {
Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
originalStyle = true;
}
}
}
イベント ハンドラーがOnButtonClicked
実行されると、 searchBarStyle
と を切り替えますgreenSearchBarStyle
blueSearchBarStyle
。 この結果、次のスクリーンショットに示すような外観が表示されます。
次のコード例は、C# の同等のページを示しています。
public class DynamicStylesPageCS : ContentPage
{
bool originalStyle = true;
public DynamicStylesPageCS ()
{
...
var baseStyle = new Style (typeof(View)) {
...
};
var blueSearchBarStyle = new Style (typeof(SearchBar)) {
...
};
var greenSearchBarStyle = new Style (typeof(SearchBar)) {
...
};
...
var searchBar1 = new SearchBar { Placeholder = "These SearchBar controls" };
searchBar1.SetDynamicResource (VisualElement.StyleProperty, "searchBarStyle");
...
Resources = new ResourceDictionary ();
Resources.Add ("blueSearchBarStyle", blueSearchBarStyle);
Resources.Add ("greenSearchBarStyle", greenSearchBarStyle);
Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
Content = new StackLayout {
Children = { searchBar1, searchBar2, searchBar3, searchBar4, button }
};
}
...
}
C# では、インスタンスは SearchBar
メソッドを SetDynamicResource
使用して を参照 searchBarStyle
します。 OnButtonClicked
イベント ハンドラー コードは XAML の例と同じであり、実行時に searchBarStyle
と greenSearchBarStyle
をblueSearchBarStyle
切り替えます。
動的スタイルの継承
動的スタイルからスタイルを派生するには、 プロパティを Style.BasedOn
使用します。 代わりに、 クラスに Style
プロパティが BaseResourceKey
含まれています。このプロパティは、値が動的に変更される可能性があるディクショナリ キーに設定できます。
次のコード例は、XAML ページでの 動的 スタイルの継承を示しています。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.DynamicStylesInheritancePage" Title="Dynamic Inheritance" IconImageSource="xaml.png">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="baseStyle" TargetType="View">
...
</Style>
<Style x:Key="blueSearchBarStyle" TargetType="SearchBar" BasedOn="{StaticResource baseStyle}">
...
</Style>
<Style x:Key="greenSearchBarStyle" TargetType="SearchBar">
...
</Style>
<Style x:Key="tealSearchBarStyle" TargetType="SearchBar" BaseResourceKey="searchBarStyle">
...
</Style>
...
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<SearchBar Text="These SearchBar controls" Style="{StaticResource tealSearchBarStyle}" />
...
</StackLayout>
</ContentPage.Content>
</ContentPage>
インスタンスはSearchBar
、マークアップ拡張機能をStaticResource
使用して、 という名前tealSearchBarStyle
の をStyle
参照します。 これにより Style
、いくつかの追加のプロパティが設定され、 プロパティを BaseResourceKey
使用して を参照します searchBarStyle
。 マークアップ拡張はDynamicResource
、派生元を除いてStyle
変更されないため、必須tealSearchBarStyle
ではありません。 したがって、 は へのリンクをsearchBarStyle
保持し、tealSearchBarStyle
基本スタイルが変更されると変更されます。
分離コード ファイルでは、コンストラクターは、動的スタイルを ResourceDictionary
示した前の例に従って、 キー searchBarStyle
を使用してエントリを作成します。 イベント ハンドラーがOnButtonClicked
実行されると、 searchBarStyle
と を切り替えますgreenSearchBarStyle
blueSearchBarStyle
。 この結果、次のスクリーンショットに示すような外観が表示されます。
次のコード例は、C# の同等のページを示しています。
public class DynamicStylesInheritancePageCS : ContentPage
{
bool originalStyle = true;
public DynamicStylesInheritancePageCS ()
{
...
var baseStyle = new Style (typeof(View)) {
...
};
var blueSearchBarStyle = new Style (typeof(SearchBar)) {
...
};
var greenSearchBarStyle = new Style (typeof(SearchBar)) {
...
};
var tealSearchBarStyle = new Style (typeof(SearchBar)) {
BaseResourceKey = "searchBarStyle",
...
};
...
Resources = new ResourceDictionary ();
Resources.Add ("blueSearchBarStyle", blueSearchBarStyle);
Resources.Add ("greenSearchBarStyle", greenSearchBarStyle);
Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
Content = new StackLayout {
Children = {
new SearchBar { Text = "These SearchBar controls", Style = tealSearchBarStyle },
...
}
};
}
...
}
tealSearchBarStyle
は、インスタンスの SearchBar
プロパティにStyle
直接割り当てられます。 これにより Style
、いくつかの追加のプロパティが設定され、 プロパティを BaseResourceKey
使用して を参照 searchBarStyle
します。 メソッドはSetDynamicResource
、派生元を除いてStyle
変更されないためtealSearchBarStyle
、ここでは必要ありません。 したがって、 は へのリンクをsearchBarStyle
保持し、tealSearchBarStyle
基本スタイルが変更されると変更されます。