놀라운 Xamarin.Forms용 앱 테마

14698 단어 appwritehack xamarinforms xamarin

애플리케이션 전체에서 미리 정의되어 사용되는 것을 애플리케이션 테마라고 합니다. YouTube, Skype, WhatsApp, Instagram 등과 같은 다양한 인기 앱에서 사용자에게 Light, Dark 모드와 같은 테마를 제공하고 있습니다. 어두움, 밝음 또는 기타 색상과 같은 사전 정의된 색 구성표 세트로 테마를 사용하여 애플리케이션의 색상을 변경할 수 있습니다.

Xamarin Forms의 리소스, ResourceDictionary 및 스타일을 사용하여 테마를 만들 수 있습니다. 리소스는 애플리케이션에서 일반적으로 공유되는 값입니다. 고도로 확장되는 값의 재사용성을 담당합니다. 이는 애플리케이션의 하드 코드 값을 줄여주므로 테마를 변경해야 할 때 정의된 리소스 세트만 변경하면 됩니다. 모든 값을 변경할 필요는 없습니다.

ResourceDictionary는 리소스 그룹입니다. 리소스는 ResourceDictionary에 저장됩니다. 단일 ResourceDictionary에서 여러 리소스를 추가할 수 있습니다. App.XAML 파일에서 ResourceDictionary를 찾을 것입니다.

스타일은 더 나은 모양과 느낌을 위해 UI 컨트롤에 다양한 속성을 할당하는 것을 의미합니다. 애플리케이션 전체에서 이러한 정의된 스타일을 사용하여 애플리케이션에 동일한 모양을 제공할 수 있습니다. 앱에서 동일한 모양을 제공하기 위해 동일한 컨트롤에 대해 모든 페이지에 코드를 작성할 필요가 없습니다. 해당 컨트롤에 대한 스타일을 정의하고 필요할 때마다 스타일을 바인딩할 수 있습니다. 스타일은 앱에서 정의됩니다. XAML 파일. 각 스타일에는 고유한 키와 대상 유형이 있습니다.

다음과 같은 방식으로 App.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>

이제 테마를 변경하기 위한 보기 페이지와 세부 정보 및 요약을 표시하는 다른 두 페이지인 보기 페이지를 만듭니다.

이 코드는 앱의 테마를 변경하기 위한 코드이고, 두 번째 코드는 테마 선택을 위한 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()));
}
}

이미지: 요약 페이지(밝기 모드)

이미지: 요약(어두운 모드)

고용 계획 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()));
}
}

이미지: 상세 페이지(라이트 모드)

이미지: 상세 페이지(다크 모드)

결론

이 블로그에서는 Xamarin 양식의 테마가 무엇이며 애플리케이션에 적용하는 방법에 대해 배웠습니다. ResourceDictionary 및 Styles를 사용하여 테마를 만들고 적용할 수 있습니다. 테마를 밝은 모드에서 어두운 모드로 동적으로 변경한 예를 보았습니다. 두 모드에 대해 두 개의 ResourceDictionary를 만들고 app.xaml 파일에서 Light 모드를 기본값으로 설정했습니다.

Reference

이 문제에 관하여(놀라운 Xamarin.Forms용 앱 테마), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/tarungurang/incredible-app-themes-for-xamarinforms-11c9

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

React와 함께 Axios 사용

보이스 체인저 기능을 구현하는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다