의 디바이스 스타일 Xamarin.Forms

Download Sample 샘플 다운로드

Xamarin.Forms 에는 Device.Styles 클래스에 디바이스 스타일이라고 하는 6가지 동적 스타일이 포함되어 있습니다.

디바이스 스타일은 다음과 같습니다.

6가지 스타일은 모두 인스턴스에만 적용할 Label 수 있습니다. 예를 들어 Label 단락의 본문을 표시하는 경우 해당 Style 속성이 .로 설정될 BodyStyle수 있습니다.

다음 코드 예제에서는 XAML 페이지에서 디바이스 스타일을 사용하는 방법을 보여 줍니다.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.DeviceStylesPage" Title="Device" IconImageSource="xaml.png">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="myBodyStyle" TargetType="Label"
              BaseResourceKey="BodyStyle">
                <Setter Property="TextColor" Value="Accent" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Label Text="Title style"
              Style="{DynamicResource TitleStyle}" />
            <Label Text="Subtitle text style"
              Style="{DynamicResource SubtitleStyle}" />
            <Label Text="Body style"
              Style="{DynamicResource BodyStyle}" />
            <Label Text="Caption style"
              Style="{DynamicResource CaptionStyle}" />
            <Label Text="List item detail text style"
              Style="{DynamicResource ListItemDetailTextStyle}" />
            <Label Text="List item text style"
              Style="{DynamicResource ListItemTextStyle}" />
            <Label Text="No style" />
            <Label Text="My body style"
              Style="{StaticResource myBodyStyle}" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

디바이스 스타일은 태그 확장을 사용하여 DynamicResource 바인딩됩니다. 텍스트 크기에 대한 접근성 설정을 변경하여 iOS에서 스타일의 동적 특성을 볼 수 있습니다. 다음 스크린샷과 같이 디바이스 스타일의 모양은 각 플랫폼에서 다릅니다.

Device Styles on Each Platform

디바이스 스타일은 디바이스 스타일의 키 이름으로 속성을 설정 BaseResourceKey 하여 파생될 수도 있습니다. 위의 myBodyStyle 코드 예제에서 악센트가 있는 텍스트 색을 BodyStyle 상속하고 설정합니다. 동적 스타일 상속에 대한 자세한 내용은 동적 스타일 상속을 참조 하세요.

다음 코드 예제에서는 C#의 해당 페이지를 보여 줍니다.

public class DeviceStylesPageCS : ContentPage
{
    public DeviceStylesPageCS ()
    {
        var myBodyStyle = new Style (typeof(Label)) {
            BaseResourceKey = Device.Styles.BodyStyleKey,
            Setters = {
                new Setter {
                    Property = Label.TextColorProperty,
                    Value = Color.Accent
                }
            }
        };

        Title = "Device";
        IconImageSource = "csharp.png";
        Padding = new Thickness (0, 20, 0, 0);

        Content = new StackLayout {
            Children = {
                new Label { Text = "Title style", Style = Device.Styles.TitleStyle },
                new Label { Text = "Subtitle style", Style = Device.Styles.SubtitleStyle },
                new Label { Text = "Body style", Style = Device.Styles.BodyStyle },
                new Label { Text = "Caption style", Style = Device.Styles.CaptionStyle },
                new Label { Text = "List item detail text style",
                  Style = Device.Styles.ListItemDetailTextStyle },
                new Label { Text = "List item text style", Style = Device.Styles.ListItemTextStyle },
                new Label { Text = "No style" },
                new Label { Text = "My body style", Style = myBodyStyle }
            }
        };
    }
}

StyleLabel 인스턴스의 속성은 클래스에서 적절한 속성으로 설정됩니다Device.Styles.

액세스 가능성

디바이스 스타일은 접근성 기본 설정을 준수하므로 각 플랫폼에서 접근성 기본 설정이 변경되면 글꼴 크기가 변경됩니다. 따라서 액세스 가능한 텍스트를 지원하려면 디바이스 스타일이 애플리케이션 내의 모든 텍스트 스타일에 대한 기초로 사용되는지 확인합니다.

다음 스크린샷은 접근성이 가장 작은 글꼴 크기를 사용하여 각 플랫폼의 디바이스 스타일을 보여 줍니다.

Accessible Small Device Styles on Each Platform

다음 스크린샷은 액세스 가능한 글꼴 크기가 가장 큰 각 플랫폼의 디바이스 스타일을 보여 줍니다.

Accessible Large Device Styles on Each Platform