[Xamarin] 자마린에서 css대신 사용하는 ResourceDictionary

HTML에서는 CSS를 사용한다.

class를 지정하면 해당 class의 스타일값을 어디서든 공통으로 사용할 수 있으니 여러번 코드를 작성하지않아도된다.

 

그럼 자마린에서는 뭐를 쓰냐?

바로 ResourceDictionary.

class 대신 Key값을 지정하여 여기저기서 사용할수있다.

 

일단 셋팅부터 하는 방법이다.

 

1. 컨텐츠 페이지를 만든다.

 

2. 컨텐츠 페이지의 코드를 변경한다. 아래처럼

 

ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
                   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                   xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
                   xmlns:tool="http://xamarin.com/schemas/2020/toolkit">
</ResourceDictionary>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace App6
{
	public partial class MyResource : ResourceDictionary
    {
	}
}

 

3. 프로젝트 내의 모든 컨텐츠페이지에서 사용하기위해 App.xaml에 넣는다.

 

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:cutomr="clr-namespace:App6"
             xmlns:local ="clr-namespace:App6"
             x:Class="App6.App">
    <Application.Resources>
        <ResourceDictionary Source="MyResource.xaml" />
    </Application.Resources>
</Application>

 

셋팅 끝-

 

셋팅이 끝났으니 작성해보자.

컨텐츠 페이지는 <ContentPage> 안에  <ContentPage.Content> 에 내용을 작성하는데

리소스 딕셔너리는 그냥 <ResourceDictionary> 안에 작성하면됨.

 

아래처럼 공통으로 사용할 컬러값도 지정해놓고 사용할 수 있

 

<!--Color-->
<Color x:Key="Error">#EE3124</Color>
<Color x:Key="Point">#347EED</Color>
<Color x:Key="Text">#222222</Color>
<Color x:Key="SubText">#555555</Color>
<Color x:Key="Line01">#DDDDDD</Color>
<Color x:Key="Line02">#EEEEEE</Color>
<Color x:Key="Disable">#EBEBEF</Color>
<Color x:Key="Background">#F5F5F5</Color>

<Label Text="오류" BackgroundColor="{StaticResource Error}"></Label>

 

공통으로 사용할 레이아웃도 작성해놓고 사용하고

 

<!--Layout-->
<Style TargetType="StackLayout" Class="wrap">
    <Setter Property="BackgroundColor" Value="#ffffff" />
</Style>
<Style TargetType="StackLayout" Class="header_wrap">
    <Setter Property="BackgroundColor" Value="#ffffff" />
    <Setter Property="Padding" Value="24,0,24,0" />
</Style>
<Style TargetType="ScrollView" Class="contents_wrap">
    <Setter Property="BackgroundColor" Value="#ffffff" />
    <Setter Property="Padding" Value="24,16,24,0" />
    <Setter Property="VerticalOptions" Value="FillAndExpand" />
</Style>
<Style TargetType="StackLayout" Class="footer_wrap">
    <Setter Property="BackgroundColor" Value="#ffffff" />
    <Setter Property="Padding" Value="24,32,24,10" />
</Style>
<Style TargetType="StackLayout" Class="popup_wrap">
    <Setter Property="BackgroundColor" Value="#ffffff" />
    <Setter Property="WidthRequest" Value="280" />
    <Setter Property="xct:CornerRadiusEffect.CornerRadius" Value="16" />
</Style>

<!-- header -->
<Frame>
    <StackLayout StyleClass="header_wrap">
        <FlexLayout HeightRequest="60" AlignItems="Center" JustifyContent="Center" >
            <Label Text="보류 상품 복원" FontFamily="NotoSansBold" FontSize="18" FontAttributes="Bold" TextColor="#FF222222"></Label>
        </FlexLayout>
    </StackLayout>
</Frame>


 <!-- footer -->
<StackLayout StyleClass="footer_wrap">
    <Grid Margin="0,0,0,4">
        <Grid.RowDefinitions>
            <RowDefinition Height="52" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Text="취소" Style="{StaticResource btn_on_black}" HeightRequest="52" FontSize="16"></Button>
        <Button Grid.Row="0" Grid.Column="1" Text="상품복원(상품 재입력)" Style="{StaticResource btn_on_yellow}" HeightRequest="52" FontSize="16" ></Button>
    </Grid>
</StackLayout>

 

버튼도

 

<!--Button-->
<Style TargetType="Button" x:Key="btn_on_black">
    <Setter Property="BackgroundColor" Value="{StaticResource BlueGray}" />
    <Setter Property="TextColor" Value="{StaticResource White}" />
    <Setter Property="FontFamily" Value="NotoSansBold" />
    <Setter Property="CharacterSpacing" Value="-0.5" />
    <Setter Property="CornerRadius" Value="8" />
</Style>
<Style TargetType="Button" x:Key="btn_off_black">
    <Setter Property="BackgroundColor" Value="{StaticResource LightGray}" />
    <Setter Property="TextColor" Value="{StaticResource White}" />
    <Setter Property="FontFamily" Value="NotoSansBold" />
    <Setter Property="CharacterSpacing" Value="-0.5" />
    <Setter Property="CornerRadius" Value="8" />
</Style>
<Style TargetType="Button" x:Key="btn_on_yellow">
    <Setter Property="BackgroundColor" Value="{StaticResource Yellow}" />
    <Setter Property="TextColor" Value="{StaticResource Text}" />
    <Setter Property="FontFamily" Value="NotoSansBold" />
    <Setter Property="CharacterSpacing" Value="-0.5" />
    <Setter Property="CornerRadius" Value="8" />
</Style>
<Style TargetType="Button" x:Key="btn_off_yellow">
    <Setter Property="BackgroundColor" Value="#FFFADDA4" />
    <Setter Property="TextColor" Value="{StaticResource White}" />
    <Setter Property="FontFamily" Value="NotoSansBold" />
    <Setter Property="CharacterSpacing" Value="-0.5" />
    <Setter Property="CornerRadius" Value="8" />
</Style>

 

ios와 Android를 분리하여 스타일을 지정할수도있다. 아래처럼

 

<Style TargetType="Button">
    <Setter Property="Padding">
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0,-1,0,0" />
            <On Platform="Android, UWP" Value="0,0,0,0" />
        </OnPlatform>
    </Setter>
    <Setter Property="xct:ShadowEffect.Opacity">
        <OnPlatform x:TypeArguments="x:Double">
            <On Platform="iOS" Value="0.1" />
            <On Platform="Android, UWP" Value="0.3" />
        </OnPlatform>
    </Setter>
    <Setter Property="BackgroundColor">
        <OnPlatform x:TypeArguments="Color">
            <On Platform="iOS" Value="{StaticResource White}" />
            <On Platform="Android, UWP" Value="{StaticResource Background}" />
        </OnPlatform>
    </Setter>
</Style>

 

 

또는 속성값에 따라 분리하여 스타일 지정도 가능하다.

 

<!--CheckBox-->
<Style TargetType="CheckBox">
    <Setter Property="xct:CornerRadiusEffect.CornerRadius" Value="4"/>
    <Setter Property="Color" Value="#FFDCDDE3"/>
    <Style.Triggers>
        <Trigger TargetType="CheckBox" Property="IsChecked" Value="True">
            <Setter Property="Color" Value="#FF4E5059"/>
        </Trigger>
        <Trigger TargetType="CheckBox" Property="IsEnabled" Value="False">
            <Setter Property="Color" Value="#FFF5F5F5"/>
        </Trigger>
    </Style.Triggers>
</Style>

 

참고

* https://learn.microsoft.com/ko-kr/xamarin/xamarin-forms/xaml/resource-dictionaries

Xamarin.Forms 리소스 사전 - Xamarin

** https://www.youtube.com/watch?v=5CIt28f06l8