[Xamarin] 툴킷 사용하기 - toolkit

자마린에서 사용할수있는 스타일 속성들은 css와 비교하면 훨씬 적다.

예를 들면 모서리를 둥글게 만드는 CornerRadius(border-radius)의 경우 TargetType(태그)에 따라 사용가능한게 있고 사용 불가능한게 있다. CheckBox나 Label같은 경우도 CornerRadius를 사용할 수 없다.

하지만 필요함.

이때, 사용할 수 있는게 툴킷인데 

 

xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
xmlns:tool="http://xamarin.com/schemas/2020/toolkit"

 

위의 코드를 컨텐츠 페이지 상단에 삽입하면 사용할수 있는 스타일 속성이 늘어난다.

나같은 경우는 CornerRadius, Shadow를 가장 많이 사용했다.

 

사용방법은 간단하다.

1. 아래처럼 코드를 삽입하고

 

2. 아래처럼 사용하면 된다. xct나 tool 을 입력하면 자동으로 툴킷종류가 뜬다. 원하는걸 사용하면됨.

 

<Frame xct:ShadowEffect.Color="#ff000000" xct:ShadowEffect.OffsetX="0" xct:ShadowEffect.OffsetY="0" xct:ShadowEffect.Opacity="0.2" xct:ShadowEffect.Radius="5"></Frame>

 

리소스 딕셔너리(ResourceDictionary)에서도 사용할 수 있다.

 

<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">

<Style TargetType="Button" x:Key="btn_on_white">
    <Setter Property="BackgroundColor" Value="{StaticResource White}" />
    <Setter Property="TextColor" Value="{StaticResource Text}" />
    <Setter Property="FontFamily" Value="NotoSansMedium" />
    <Setter Property="BorderColor" Value="{StaticResource MidiumGray}" />
    <Setter Property="BorderWidth" Value="1" />
    <Setter Property="CornerRadius" Value="6" />
    <Setter Property="xct:ShadowEffect.Color" Value="{StaticResource Black}" />
    <Setter Property="xct:ShadowEffect.OffsetX" Value="0" />
    <Setter Property="xct:ShadowEffect.OffsetY" Value="0" />
    <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="xct:ShadowEffect.Radius" Value="5" />
</Style>

</ResourceDictionary>