연습 - 코드를 .NET MAUI 바인딩으로 바꾸기

10분

이 연습에서는 이벤트 및 코드-숨김을 사용하는 앱을 주로 데이터 바인딩을 사용하는 앱으로 변환합니다. 샘플 앱은 하루의 날씨를 표시하는 날씨 예측 앱입니다.

시작 솔루션 열기

GitHub에서 연습 리포지토리를 복제하거나 다운로드합니다.

참고 항목

빌드 생성 파일이 최대 경로 길이를 초과하지 않도록 연습 콘텐츠를 C:\dev와 같은 짧은 폴더 경로에 복제하거나 다운로드하는 것이 가장 좋습니다.
Visual Studio를 사용하여 start 폴더에서 WeatherClient.sln 솔루션을 열거나 Visual Studio Code에서 이 폴더를 엽니다.
프로젝트를 빌드하고 실행하여 작동하는지 확인합니다. 화면이 표시되면 일부 빈 날씨 세부 정보가 표시됩니다. 새로 고침 단추를 누르면 날씨 세부 정보 업데이트가 표시됩니다.

참고로 이 연습에서 사용할 클래스 및 파일의 요약은 다음과 같습니다.

파일	설명
MainPage.xaml	초기 페이지의 UI 및 논리를 정의합니다. XAML 파일은 태그를 사용하여 UI를 정의합니다.
MainPage.xaml.cs	초기 페이지의 UI 및 논리를 정의합니다. MainPage.xaml로 정의된 UI와 관련된 코드를 포함하는 연결된 코드-숨김 파일입니다.
Services\WeatherService.cs	이 클래스는 날씨 보고 서비스를 시뮬레이션합니다. `WeatherData` 형식을 반환하는 `GetWeather`라는 단일 메서드를 포함합니다.
Models\WeatherData.cs	날씨 데이터를 포함합니다. 이는 하루의 온도, 강수량, 습도, 바람 및 조건을 제공하는 간단한 레코드 유형입니다.
Models\WeatherType.cs	맑거나 흐린 날씨 조건의 열거형입니다.

바인딩 컨텍스트 설정

새로 고침 단추의 클릭 이벤트 처리기에 대한 코드-숨김을 편집해야 합니다. 이 코드는 현재 날씨 데이터를 가져오고 컨트롤을 직접 업데이트합니다. 대신 날씨 데이터를 가져와서 페이지의 바인딩 컨텍스트로 설정합니다.

MainPage.xaml.cs 코드 파일을 엽니다.
btnRefresh_Clicked 메서드를 검토합니다. 이 메서드는 다음 단계를 수행합니다.
- 단추를 사용하지 않도록 설정하고 "사용 중" 스피너를 사용하도록 설정합니다.
- 날씨 서비스에서 날씨 예측을 가져옵니다.
- 페이지의 컨트롤을 날씨 정보로 업데이트합니다.
- 단추를 사용하도록 설정하고 "사용 중" 스피너를 사용하지 않도록 설정합니다.

컨트롤을 데이터로 업데이트하는 코드를 제거합니다. 이벤트 코드는 다음 코드 조각과 같습니다.

private async void btnRefresh_Clicked(object sender, EventArgs e)
{
    btnRefresh.IsEnabled = false;
    actIsBusy.IsRunning = true;

    Models.WeatherData weatherData = await Services.WeatherServer.GetWeather(txtPostalCode.Text);

    btnRefresh.IsEnabled = true;
    actIsBusy.IsRunning = false;
}

서비스의 GetWeather 메서드 결과를 변수에 할당하는 대신 페이지의 BindingContext에 할당합니다.

private async void btnRefresh_Clicked(object sender, EventArgs e)
{
    btnRefresh.IsEnabled = false;
    actIsBusy.IsRunning = true;

    BindingContext = await Services.WeatherServer.GetWeather(txtPostalCode.Text);

    btnRefresh.IsEnabled = true;
    actIsBusy.IsRunning = false;
}

프로젝트를 실행합니다. 새로 고침 단추를 누르고 날씨 서비스에서 데이터를 반환하면 날씨 예측으로 업데이트되는 컨트롤이 없습니다. 다음 섹션에서 이 버그를 해결합니다.

XAML로 바인딩 만들기

이제 코드-숨김에서 페이지의 바인딩 컨텍스트를 설정했으므로 컨트롤에 바인딩을 추가하여 컨텍스트의 데이터를 사용할 수 있습니다.

MainPage.xaml 파일을 엽니다.

모든 Label 컨트롤이 포함된 내부 Grid를 찾습니다.

<Grid Grid.Row="2" RowDefinitions="Auto, Auto, Auto, Auto, Auto" ColumnDefinitions="Auto, Auto" Margin="0,5,0,0">
    <Label Grid.Row="0" Grid.Column="0" Text="Condition" VerticalOptions="Center" />
    <Image x:Name="imgCondition" Grid.Row="0" Grid.Column="1" HeightRequest="25" WidthRequest="25" Source="question.png" HorizontalOptions="Start" />
    <Label Grid.Row="1" Grid.Column="0" Text="Temperature" Margin="0,0,20,0" />
    <Label x:Name="lblTemperature" Grid.Row="1" Grid.Column="1" Text="0" />
    <Label Grid.Row="2" Grid.Column="0" Text="Humidity" Margin="0,0,20,0" />
    <Label x:Name="lblHumidity" Grid.Row="2" Grid.Column="1" Text="0" />
    <Label Grid.Row="3" Grid.Column="0" Text="Precipitation" Margin="0,0,20,0" />
    <Label x:Name="lblPrecipitation" Grid.Row="3" Grid.Column="1" Text="0" />
    <Label Grid.Row="4" Grid.Column="0" Text="Wind" Margin="0,0,20,0" />
    <Label x:Name="lblWind" Grid.Row="4" Grid.Column="1" Text="0" />
</Grid>

명명된 각 Label 컨트롤에 바인딩을 추가합니다. 네 가지가 있습니다.

Label.Text 속성의 값은 PROPERTY_NAME이 Models\WeatherData.cs에 정의된 Models.WeatherData 형식의 속성인 {Binding PROPERTY_NAME} 구문으로 변경되어야 합니다. 이 형식은 날씨 서비스에서 반환하는 데이터 형식입니다.

예를 들어 lblWind(그리드의 마지막 레이블)라는 Label은 Text 속성이 다음 코드와 같이 표시되어야 합니다.
```
<Label x:Name="lblWind" Grid.Row="4" Grid.Column="1" Text="{Binding Wind}" />
```
모든 날씨 세부 정보를 나열하는 컨트롤의 <Grid> 내에서 모든 x:Name="..." 특성을 제거합니다.

이제 코드-숨김에서 컨트롤을 참조하지 않으므로 이름이 필요하지 않습니다.

XAML 바인딩이 다음 코드 조각과 일치하는지 확인합니다.

<Grid Grid.Row="2" RowDefinitions="Auto, Auto, Auto, Auto, Auto" ColumnDefinitions="Auto, Auto" Margin="0,5,0,0">
    <Label Grid.Row="0" Grid.Column="0" Text="Condition" VerticalOptions="Center" />
    <Image Grid.Row="0" Grid.Column="1" HeightRequest="25" WidthRequest="25" Source="question.png" HorizontalOptions="Start" />
    <Label Grid.Row="1" Grid.Column="0" Text="Temperature" Margin="0,0,20,0" />
    <Label Grid.Row="1" Grid.Column="1" Text="{Binding Temperature}" />
    <Label Grid.Row="2" Grid.Column="0" Text="Humidity" Margin="0,0,20,0" />
    <Label Grid.Row="2" Grid.Column="1" Text="{Binding Humidity}" />
    <Label Grid.Row="3" Grid.Column="0" Text="Precipitation" Margin="0,0,20,0" />
    <Label Grid.Row="3" Grid.Column="1" Text="{Binding Precipitation}" />
    <Label Grid.Row="4" Grid.Column="0" Text="Wind" Margin="0,0,20,0" />
    <Label Grid.Row="4" Grid.Column="1" Text="{Binding Wind}" />
</Grid>

앱을 실행하고 새로 고침 단추를 누릅니다. 앱은 원본과 거의 유사하게 작동합니다.

조건을 나타내는 아이콘은 물음표에서 태양 또는 구름 아이콘으로 업데이트되지 않습니다. 아이콘이 변경되지 않는 이유는 무엇인가요? 아이콘은 WeatherData.Condition 열거형 값을 기반으로 코드에서 선택된 이미지 리소스이기 때문입니다. 추가 작업 없이는 열거형 값을 이미지 리소스로 변경할 수 없습니다. 바인딩에 대해 자세히 알아보면 다음 연습에서 수정됩니다.

연습 - 코드를 .NET MAUI 바인딩으로 바꾸기

시작 솔루션 열기

바인딩 컨텍스트 설정

XAML로 바인딩 만들기

피드백