연습: 동적 리소스를 사용하여 요소 업데이트

5분

이 연습에서는 리소스 값이 변경되면 DynamicResource 태그 확장을 사용하여 TipCalculator UI를 업데이트합니다.

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

반복되는 코드 찾기

이 앱은 StandardTipPage 페이지에 대해 간단한 "밝은" 및 "어두운" 색 구성표를 구현합니다. 여기에서는 색을 변경하는 데 사용되는 코드를 검사합니다.

StandardTipPage.xaml.cs 파일을 엽니다.

UI 색을 업데이트하는 두 개의 이벤트 처리기를 찾습니다.

private Color colorNavy = Colors.Navy;
private Color colorSilver = Colors.Silver;

...

void OnLight(object sender, EventArgs e)
{
    LayoutRoot.BackgroundColor = colorSilver;

    tipLabel.TextColor = colorNavy;
    billLabel.TextColor = colorNavy;
    totalLabel.TextColor = colorNavy;
    tipOutput.TextColor = colorNavy;
    totalOutput.TextColor = colorNavy;
}

void OnDark(object sender, EventArgs e)
{
    LayoutRoot.BackgroundColor = colorNavy;

    tipLabel.TextColor = colorSilver;
    billLabel.TextColor = colorSilver;
    totalLabel.TextColor = colorSilver;
    tipOutput.TextColor = colorSilver;
    totalOutput.TextColor = colorSilver;
}

...

코드에서 각 컨트롤에 대한 색을 개별적으로 업데이트하여 반복되는 코드를 생성하는 방식에 주의하세요.

코드에서 리소스 업데이트

먼저 페이지의 리소스 사전에 저장된 몇 가지 리소스를 업데이트하는 코드를 작성하는 것으로 시작합니다.

OnLight 메서드에서 모든 코드를 제거합니다.
표시된 다음 코드를 OnLight 메서드에 추가합니다. 이 코드는 페이지의 리소스 사전에 있는 fgColor 리소스를 colorNavy 변수의 값으로 설정하고 bgColor 리소스를 colorSilver 변수의 값으로 설정합니다. colorNavy 및 colorSilver 변수는 정적 Color.FromRgb 메서드를 사용하여 16진수 값을 색으로 쉽게 변환할 수 있습니다.
```
void OnLight(object sender, EventArgs e)
{
    Resources["fgColor"] = colorNavy;
    Resources["bgColor"] = colorSilver;
}
```
OnDark 메서드에 대해 이전 두 단계를 반복하지만 색을 반대로 바꿉니다. fgColor를 colorSilver로 설정하고 bgColor를 colorNavy로 설정합니다.
```
void OnDark(object sender, EventArgs e)
{
    Resources["fgColor"] = colorSilver;
    Resources["bgColor"] = colorNavy;
}
```
앱을 실행합니다. Dark(어둡게) 및 Light(밝게) 단추를 선택합니다. UI가 변경되지 않습니다. 코드에서 사전의 리소스 값을 변경하더라도 새 값은 UI로 전파되지 않습니다. 문제는 StaticResource 태그 확장을 사용하여 XAML 코드의 값을 설정하는 것입니다.

동적으로 UI 업데이트

문제를 해결하려면 업데이트된 리소스 값이 UI에 로드되도록 XAML을 수정합니다.

앱을 중지하고 StandardTipPage.xaml 파일을 엽니다.

리소스 값에서 색을 할당하는 모든 위치를 찾습니다. 이 예에 표시된 것처럼 StaticResource 마크업 확장의 사용을 DynamicResource로 바꿉니다.

<Grid x:Name ="LayoutRoot" BackgroundColor="{DynamicResource bgColor}" Padding="10">
...
<Label x:Name="billLabel"  Text="Bill"  TextColor="{DynamicResource fgColor}" ... />
<Label x:Name="tipLabel"   Text="Tip"   TextColor="{DynamicResource fgColor}" ... />
<Label x:Name="totalLabel" Text="Total" TextColor="{DynamicResource fgColor}" ... />
...

참고 항목

FontSize 속성을 StaticResource에서 DynamicResource로 변경하지 마세요.

앱을 실행합니다. Dark(어둡게) 및 Light(밝게) 단추를 선택합니다. 이제 UI가 올바르게 업데이트됩니다.

계속

반복되는 코드 찾기

코드에서 리소스 업데이트

동적으로 UI 업데이트

피드백