Exercício - Substitua o código por ligações .NET MAUI

  • 10 minutos

Neste exercício, você converterá um aplicativo que usa eventos e code-behind em um que usa principalmente vinculação de dados. O aplicativo de exemplo é um aplicativo de previsão do tempo que exibe o tempo para o dia.

Abra a solução inicial

  1. Clone ou baixe o repositório de exercícios do GitHub.

    Nota

    É melhor clonar ou baixar o conteúdo do exercício para um caminho de pasta curto, como C:\dev, para evitar que os arquivos gerados pela compilação excedam o comprimento máximo do caminho.

  2. Abra a solução WeatherClient.sln da pasta inicial usando o Visual Studio ou esta pasta no Visual Studio Code.

  3. Crie e execute o projeto para garantir que ele funcione. Na tela exibida, você verá alguns detalhes do tempo vazios. Pressione o botão Atualizar e você verá a atualização dos detalhes do tempo.

    Captura de ecrã de uma aplicação de meteorologia que mostra o tempo do dia.

  4. Para referência, aqui está um resumo das classes e arquivos com os quais você trabalhará neste exercício.

    Ficheiro Description
    MainPage.xaml Define a interface do usuário e a lógica da página inicial. O arquivo XAML define a interface do usuário usando marcação.
    MainPage.xaml.cs Define a interface do usuário e a lógica da página inicial. O arquivo code-behind associado que contém o código relacionado à interface do usuário definida por MainPage.xaml.
    Serviços\WeatherService.cs Esta aula simula um serviço de informação meteorológica. Ele contém um único método chamado GetWeather que retorna um WeatherData tipo.
    Modelos\WeatherData.cs Contém os dados meteorológicos. Este é um tipo de registro simples que fornece a temperatura, precipitação, umidade, vento e condição do dia.
    Modelos\WeatherType.cs Uma enumeração da condição meteorológica, ensolarada ou nublada.

Definir o contexto de vinculação

Você precisará editar o code-behind do manipulador de eventos click do botão Atualizar . O código atualmente obtém os dados meteorológicos e atualiza os controles diretamente. Em vez disso, obtenha os dados meteorológicos e defina-os como o contexto de ligação para a página.

  1. Abra o arquivo de código MainPage.xaml.cs.

  2. Analise o btnRefresh_Clicked método. Esse método executa as seguintes etapas:

    • Desativa o botão e ativa o spinner "ocupado".
    • Obtém a previsão do tempo do serviço meteorológico.
    • Atualiza os controles na página com as informações meteorológicas.
    • Ativa o botão e desativa o spinner "ocupado".

  3. Remova o código que atualiza os controles com dados. O código do evento deve ser semelhante ao seguinte trecho:

    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;
}

  4. Em vez de atribuir o resultado do método do serviço GetWeather a uma variável, atribua-o BindingContext ao da página:

    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;
}

  5. Execute o projeto. Observe que quando você pressiona o botão Atualizar e o serviço meteorológico retorna os dados, nenhum dos controles é atualizado com a previsão do tempo. Você corrigirá esse bug na próxima seção.

Criar associações em XAML

Agora que o code-behind define o contexto de vinculação para a página, você pode adicionar as associações aos controles para usar os dados no contexto.

  1. Abra o arquivo MainPage.xaml .

  2. Encontre o interior Grid que contém todos os Label controles.

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

  3. Adicione associações a cada um dos controles nomeados Label . São quatro.

    A Label.Text propriedade deve ter seu valor alterado para a {Binding PROPERTY_NAME} sintaxe onde PROPERTY_NAME é uma propriedade do Models.WeatherData tipo definido em Models\WeatherData.cs. Lembre-se, este tipo é o tipo de dados retornados pelo serviço meteorológico.

    Por exemplo, o Label nome lblWind (o último rótulo na grade) deve ter a propriedade semelhante ao Text seguinte código:

    <Label x:Name="lblWind" Grid.Row="4" Grid.Column="1" Text="{Binding Wind}" />

  4. Dentro dos <Grid> controles de que lista todos os detalhes do tempo, remova todos os x:Name="..." atributos.

    Os nomes não são necessários agora que os controles não são referenciados no code-behind.

  5. Verifique se suas associações XAML correspondem ao seguinte trecho:

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

  6. Execute o aplicativo e pressione o botão Atualizar . O aplicativo funciona quase como o original.

Observe que o ícone que representa a Condição não é atualizado do ponto de interrogação para um ícone de sol ou nuvem. Por que o ícone não muda? Porque o ícone é um recurso de imagem que foi escolhido em código com base no valor de WeatherData.Condition enumeração. O valor de enumeração não pode ser alterado para um recurso de imagem sem algum esforço extra Isso é corrigido no próximo exercício depois que você aprender mais sobre associações.