연습: 스타일 만들기 및 적용

6분

이 연습에서는 팁 계산기 애플리케이션에서 페이지 수준 스타일을 정의하고 적용합니다.

이 연습은 이전 연습의 연속입니다. 기존 솔루션을 이러한 단계의 시작점으로 사용하거나 첫 번째 연습에서 복제한 리포지토리의 exercise3/TipCalculator 폴더에서 TipCalculator 프로젝트를 엽니다.

스타일 정의

레이블에 사용할 "크기 22 굵게" 글꼴 스타일을 구현하는 것부터 시작해 보겠습니다. 페이지 수준 사전에 스타일을 저장합니다.

TipCalculator 프로젝트에서 StandardTipPage.xaml 파일을 엽니다.

기존 리소스 다음, 페이지의 리소스 사전에 Style을 추가합니다. infoLabelStyle의 x:Key 값 및 Label의 TargetType 값을 사용합니다.

<ContentPage.Resources>
    <ResourceDictionary>
        ...
        <Style x:Key="infoLabelStyle" TargetType="Label">
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

스타일의 FontSize 속성을 fontSize 리소스의 값으로 설정하는 Setter 인스턴스를 추가합니다.

FontAttributes 속성을 Bold로 설정하는 다른 Setter를 추가합니다.

<Style x:Key="infoLabelStyle" TargetType="Label">
    <Setter Property="FontSize" Value="{StaticResource fontSize}" />
    <Setter Property="FontAttributes" Value="Bold" />
</Style>

스타일 적용

{StaticResource fontSize}의 FontSize 값 및 Bold의 FontAttributes 값을 사용하는 3개의 Label 컨트롤을 찾습니다. 레이블에서 이러한 속성 할당을 제거합니다.

StaticResource 태그 확장을 사용하여 이러한 3개 레이블에 infoLabelStyle 스타일을 할당합니다.

<!-- Left column = static labels -->
<Label x:Name="billLabel"  Text="Bill"  ... Style="{StaticResource infoLabelStyle}" ... />
<Label x:Name="tipLabel"   Text="Tip"   ... Style="{StaticResource infoLabelStyle}" ... />
<Label x:Name="totalLabel" Text="Total" ... Style="{StaticResource infoLabelStyle}" ... />

앱을 실행합니다. 앱이 이전과 똑같이 표시됩니다. 하지만 레이블의 글꼴 특성이 이제 스타일을 사용하여 설정됩니다.

글꼴 스타일 변경

스타일을 업데이트하는 것이 어떻게 쉬운지 살펴보겠습니다.

리소스 사전의 스타일로 돌아가서 fontSize 리소스를 32로 변경합니다.
앱을 다시 실행하여 변경 내용을 확인합니다. Bill, Tip 및 Total의 3개 레이블은 더 커야 합니다.
fontSize 리소스를 다시 22로 변경합니다.

기본 스타일 만들기

기본 스타일을 추가하여 StandardTipPage 페이지 구현을 확장합니다. 이전 단계에서 만든 Style과 겹치는 새 Style을 정의합니다. 그런 다음 이 연습의 다음 부분에서 이 새로운 스타일을 리팩터링합니다.

StandardTipPage.xaml 파일을 엽니다.
페이지의 리소스 사전에 다른 Style을 추가합니다. baseLabelStyle의 x:Key 값 및 Label의 TargetType 값을 사용합니다.

중요

infoLabelStyle 스타일 위에 이 스타일을 정의합니다. 이 위치는 나중에 이 스타일에서 상속할 때 중요합니다. 스타일은 이미 범위 내에 있는 다른 스타일에서만 상속할 수 있습니다.

FontSize 속성을 설정하는 Setter를 추가합니다. 이 setter는 이전 infoLabelStyle의 setter를 반복한 것입니다.

<ContentPage.Resources>
    <ResourceDictionary>
        ...
        <Style x:Key="baseLabelStyle" TargetType="Label">
            <Setter Property="FontSize" Value="{StaticResource fontSize}" />
        </Style>
        ...
    <ResourceDictionary>
</ContentPage.Resources>

팁과 총 금액에 대해 계산된 금액을 표시하는 페이지의 두 레이블에 새 baseLabelStyle을 적용합니다. 이러한 레이블에서 명시적 FontSize 설정을 제거합니다. 다음은 예를 보여 주는 코드입니다.

<!-- Right column = user input and calculated-value output -->
...
<Label x:Name="tipOutput"   Text="0.00" TextColor="Navy" Style="{StaticResource baseLabelStyle}" Grid.Row="1" Grid.Column="1" />
<Label x:Name="totalOutput" Text="0.00" TextColor="Navy" Style="{StaticResource baseLabelStyle}" Grid.Row="2" Grid.Column="1" />

애플리케이션을 실행합니다. 계산된 팁 및 총 금액의 값(값 0.00 포함) 스타일이 계속 올바른지 확인합니다.

스타일 상속 사용

이제 상속을 사용하여 스타일을 리팩터링할 준비가 되었습니다. 리팩터링을 사용하면 setter를 반복적으로 사용하지 않아도 됩니다.

StandardTipPage.xaml 파일을 엽니다.
페이지의 리소스 사전에서 infoLabelStyle 스타일을 찾습니다. 리소스 사전에서 baseLabelStyle 아래로 이 스타일을 이동합니다.
infoLabelStyle 스타일의 BasedOn 속성을 baseLabelStyle로 설정합니다. FontSize에 대해 Setter를 제거합니다. 이제 이 스타일이 기본 스타일에서 FontSize 설정을 상속하므로 더 이상 필요하지 않습니다.
```
<ContentPage.Resources>
    <ResourceDictionary>
        ...
        <Style x:Key="baseLabelStyle" TargetType="Label">
            <Setter Property="FontSize" Value="{StaticResource fontSize}" />
        </Style>
        <Style x:Key="infoLabelStyle" BasedOn="{StaticResource baseLabelStyle}" TargetType="Label">
            <Setter Property="FontAttributes" Value="Bold" />
        </Style>
    <ResourceDictionary>
</ContentPage.Resources>
```
참고

리소스 사전의 리소스 순서가 중요합니다. baseLabelStyle 스타일은 이를 참조하는 다른 스타일 앞에 정의해야 합니다. 그렇지 않으면 상속이 작동하지 않습니다.
앱을 실행하고 레이블의 스타일 및 계산된 수량이 여전히 올바르게 지정되었는지 확인합니다.

계속

스타일 정의

스타일 적용

글꼴 스타일 변경

기본 스타일 만들기

스타일 상속 사용

피드백