Xamarinのための信じられないほどのアプリのテーマ.フォーム

事前定義され、アプリケーションのすべてのアプリケーションのテーマと呼ばれて使用されます.YouTube、Skype、WhatsApp、Instagramなどのような様々な人気のアプリでは、ユーザーに光、暗いモードのようなテーマを提供しています.我々は、暗い色、光、または任意の他の色のような配色の定義済みのセットでテーマを使用してアプリケーションの色を変更することができます.
私たちは、リソースを使用してテーマを作成することができますリソースリソース、およびスタイルをxamarin形式で.リソースは、アプリケーションで一般的に共有された値です.それは非常にスケールの値の再利用性に責任があります.これは、アプリケーション内のハードコードの値を減らすため、我々はリソースの定義されたセットのみを変更する必要があるテーマを変更する必要があります.すべての値を変更する必要はありません.
ResourceDictionaryはリソースのグループです.リソースはResourceDictionaryに格納されます.単一のリソース辞書では、複数のリソースを追加できます.我々は、アプリケーションでResourceDictionaryを見つける.XAMLファイル.
スタイルは、より良いルックアンドフィールのUIコントロールにさまざまなプロパティを割り当てます.我々は、アプリケーションを介して、すべてのアプリケーションに同じ外観を与えるために、これらの定義されたスタイルを使用することができます.私たちは、同じコントロールのためのすべてのページのコードを記述する必要はありません我々は、そのコントロールのスタイルを定義することができますし、それが必要なこれまでのスタイルをバインドするアプリケーションで同じ外観を与えるために.スタイルは、アプリケーションで定義されています.XAMLファイル.それぞれのスタイルにはユニークなキーとターゲットタイプがあります.
我々は、アプリケーション内のスタイルを定義することができます.XAMLファイルを次のようにし、コントロール内のXAMLページに表示します.

ライトモード用コード

<resourcedictionary x:class="ThemingDemo.LightTheme" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<color x:key="PageBackgroundColor"> White </color>
<color x:key="NavigationBarColor"> WhiteSmoke </color>
<color x:key="PrimaryColor"> WhiteSmoke </color>
<color x:key="SecondaryColor"> Black </color>
<color x:key="PrimaryTextColor"> blue </color>
<color x:key="SecondaryTextColor"> White </color>
<color x:key="TertiaryTextColor"> Gray </color>
<color x:key="TransparentColor"> Transparent </color>
</resourcedictionary>

CSファイル

public partial class LightTheme : ResourceDictionary
{
public LightTheme()
{
InitializeComponent();
}
}

続きを読む:Using Eventtocommand Behavior In Mvvm Viewmodel In Xamarin

ダークモード用コード

<resourcedictionary x:class="ThemingDemo.DarkTheme" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<color x:key="PageBackgroundColor"> Black </color>
<color x:key="NavigationBarColor"> Gray </color>
<color x:key="PrimaryColor"> Skyblue </color>
<color x:key="SecondaryColor"> White </color>
<color x:key="PrimaryTextColor"> White </color>
<color x:key="SecondaryTextColor"> White </color>
<color x:key="TertiaryTextColor"> WhiteSmoke </color>
<color x:key="TransparentColor"> Transparent </color>
</resourcedictionary>

CSファイル

public partial class DarkTheme : ResourceDictionary
{
public DarkTheme()
{
InitializeComponent();
}
}

さて、我々はデフォルトとして光モードを設定し、我々のアプリケーションで使用するUIコントロールのスタイルを追加します.

<application.resources>
<resourcedictionary source="Themes/LightTheme.xaml"><style targettype="NavigationPage" type="text/css"><Setter Property="BarBackgroundColor"
Value="{DynamicResource NavigationBarColor}" />
<Setter Property="BarTextColor"
Value="{DynamicResource SecondaryColor}" /></style><style targettype="Button" type="text/css" x:key="ButtonStyle"><Setter Property="BackgroundColor"
Value="{DynamicResource PrimaryColor}" />
<Setter Property="TextColor"
Value="{DynamicResource SecondaryColor}" />
<Setter Property="HeightRequest"
Value="45" />
<Setter Property="WidthRequest"
Value="190" />
<Setter Property="CornerRadius"
Value="18" /></style><style targettype="Label" type="text/css" x:key="LargeLabelStyle"><Setter Property="TextColor"
Value="{DynamicResource SecondaryTextColor}" />
<Setter Property="FontSize"
Value="30" /></style><style targettype="Label" type="text/css" x:key="MediumLabelStyle"><Setter Property="TextColor"
Value="{DynamicResource PrimaryTextColor}" />
<Setter Property="FontSize"
Value="25" /></style><style targettype="Label" type="text/css" x:key="SmallLabelStyle"><Setter Property="TextColor"
Value="{DynamicResource TertiaryTextColor}" />
<Setter Property="FontSize"
Value="15" /></style>
</resourcedictionary></application.resources>

今、我々はテーマと他の2つの表示の詳細と概要を変更するための1つのビューページを作成します.
このコードは、アプリケーションのテーマを変更するために、2番目のコードは、選択したテーマのCSファイルです.

<application.resources>
        <resourcedictionary source="Themes/LightTheme.xaml"><style targettype="NavigationPage" type="text/css"><Setter Property="BarBackgroundColor"
                    Value="{DynamicResource NavigationBarColor}" />
            <Setter Property="BarTextColor"
                    Value="{DynamicResource SecondaryColor}" /></style><style targettype="Button" type="text/css" x:key="ButtonStyle"><Setter Property="BackgroundColor"
                    Value="{DynamicResource PrimaryColor}" />
            <Setter Property="TextColor"
                    Value="{DynamicResource SecondaryColor}" />
            <Setter Property="HeightRequest"
                    Value="45" />
            <Setter Property="WidthRequest"
                    Value="190" />
            <Setter Property="CornerRadius"
                    Value="18" /></style><style targettype="Label" type="text/css" x:key="LargeLabelStyle"><Setter Property="TextColor"
                    Value="{DynamicResource SecondaryTextColor}" />
            <Setter Property="FontSize"
                    Value="30" /></style><style targettype="Label" type="text/css" x:key="MediumLabelStyle"><Setter Property="TextColor"
                    Value="{DynamicResource PrimaryTextColor}" />
            <Setter Property="FontSize"
                    Value="25" /></style><style targettype="Label" type="text/css" x:key="SmallLabelStyle"><Setter Property="TextColor"
                    Value="{DynamicResource TertiaryTextColor}" />
            <Setter Property="FontSize"
                    Value="15" /></style>
</resourcedictionary></application.resources>

要約と詳細ページのためのコード.

<contentpage backgroundcolor="{DynamicResource PageBackgroundColor}" title=" Summary" x:class="ThemingDemo.UserSummaryPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:local="clr-namespace:ThemingDemo" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<contentpage.toolbaritems>
<toolbaritem clicked="OnThemeToolbarItemClicked" text="Choose Theme">
</toolbaritem></contentpage.toolbaritems>
<scrollview>
<grid>
<grid.rowdefinitions>
<rowdefinition height="200">
<rowdefinition height="120">
<rowdefinition height="70">
</rowdefinition></rowdefinition></rowdefinition></grid.rowdefinitions>
<grid backgroundcolor="{DynamicResource PrimaryColor}">
<label margin="15" style="{StaticResource MediumLabelStyle}" text="Xamarin Forms" verticaloptions="Center">
<img grid.column="1" height="100px" src="xamarin.webp" width="100px">
</label></grid>
<stacklayout grid.row="1" margin="10">
<label style="{StaticResource SmallLabelStyle}" text="Xamarin.Forms is Open source framwork to develope Android, iOS and windows Applications.">
<label style="{StaticResource SmallLabelStyle}" text="  • It provides various UI controls">
<label style="{StaticResource SmallLabelStyle}" text="  • We can define various layout provided by xamarin.forms."> 
</label></label></label></stacklayout><button clicked="OnNavigation" grid.row="2" horizontaloptions="Center" style="{StaticResource ButtonStyle}" text="MORE INFORMATION" verticaloptions="Center"></button></grid></scrollview></contentpage>

CSファイル

public partial class UserSummaryPage : ContentPage
{
public UserSummaryPage()
{
InitializeComponent();
}
async void OnNavigation(object sender, EventArgs e)
{
await Navigation.PushAsync(new UserDetailsPage());
}
async void OnThemeToolbarItemClicked(object sender, EventArgs e)
{
await Navigation.PushModalAsync(new NavigationPage(new ThemeSelectionPage()));
}
}

イメージ:要約ページ( light mode )

イメージ:要約(ダークモード)
計画242479152を雇うか?あなたの検索はここで終わります.
Xamarin App Development Company
詳細ページ用コード

<contentpage backgroundcolor="{DynamicResource PageBackgroundColor}" title="Details" x:class="ThemingDemo.UserDetailsPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:local="clr-namespace:ThemingDemo" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<contentpage.toolbaritems>
<toolbaritem clicked="OnThemeToolbarClicked" text="Choose Theme">
</toolbaritem></contentpage.toolbaritems>
<scrollview>
<grid>
<grid.rowdefinitions>
<rowdefinition height="0.6*">
<rowdefinition height="0.1*">
<rowdefinition height="0.1*">
<rowdefinition height="0.2*">
</rowdefinition></rowdefinition></rowdefinition></rowdefinition></grid.rowdefinitions>        
<grid backgroundcolor="{DynamicResource TransparentBackgroundColor}">
<label margin="15" style="{StaticResource MediumLabelStyle}" verticaloptions="End">
<label.formattedtext>
<formattedstring>
<span text="Xamarin">
<span text="
">
<span text="Forms">
</span></span></span></formattedstring>
</label.formattedtext>
</label>
</grid>
<grid grid.row="1">
<grid.columndefinitions>
<columndefinition width="0.5*">
<columndefinition width="0.5*">
</columndefinition></columndefinition></grid.columndefinitions>
<label margin="10" verticaloptions="Start">
<label.formattedtext>
<formattedstring>
<span style="{StaticResource MediumLabelStyle}" text="Use">
<span text="">
<span style="{StaticResource SmallLabelStyle}" text="Framwork for android,iOS and windows app">
</span></span></span></formattedstring>
</label.formattedtext>
</label>
<label grid.column="1" margin="10" verticaloptions="Start">
<label.formattedtext>
<formattedstring>
<span style="{StaticResource MediumLabelStyle}" text="Owner">
<span text="">
<span style="{StaticResource SmallLabelStyle}" text="Microsoft">
</span></span></span></formattedstring>
</label.formattedtext>
</label>
</grid>   
</grid>
</scrollview>
</contentpage>

CSファイル

public partial class UserDetailsPage : ContentPage
{
public UserDetailsPage()
{
InitializeComponent();
}
async void OnThemeToolbarClicked(object sender, EventArgs e)
{
await Navigation.PushModalAsync(new NavigationPage(new ThemeSelectionPage()));
}
}

詳細ページ( light mode )

詳細ページ(ダークモード)

結論

このブログでは、XAmarinフォームのテーマと、アプリケーションに適用できる方法について学びました.ResourceDictionaryとスタイルを使用して作成し、テーマを適用できます.私たちは、主題を明暗モードから動的に変化させた例を見ました.我々は両方のモードとアプリケーションのデフォルトとして光モードを設定する2つのリソース辞書を作成している.XAMLファイル.