แบบฝึกหัด - แทนที่โค้ดด้วยการผูก .NET MAUI

10 นาที

ในแบบฝึกหัดนี้ คุณจะแปลงแอปที่ใช้เหตุการณ์และโค้ดเบื้องหลังเป็นแอปที่ใช้การผูกข้อมูลเป็นส่วนใหญ่ แอปตัวอย่างเป็นแอปพยากรณ์อากาศที่แสดงสภาพอากาศสําหรับวันนั้น

เปิดโซลูชันเริ่มต้น

ลอกแบบหรือดาวน์โหลดที่เก็บแบบทดสอบจาก GitHub

โน้ต

เป็นการดีที่สุดที่จะโคลนหรือดาวน์โหลดเนื้อหาแบบทดสอบไปยังเส้นทางโฟลเดอร์สั้น ๆ เช่น C:\dev เพื่อหลีกเลี่ยงไฟล์ที่สร้างขึ้นซึ่งเกินความยาวเส้นทางสูงสุด
เปิดโซลูชัน WeatherClient.sln จากโฟลเดอร์ เริ่มต้น โดยใช้ Visual Studio หรือโดยการเปิดโฟลเดอร์ เริ่มต้น ใน Visual Studio Code
สร้างและเรียกใช้โครงการเพื่อให้แน่ใจว่าสามารถทํางานได้ บนหน้าจอที่แสดงขึ้น คุณจะเห็นรายละเอียดสภาพอากาศเปล่า ป้อนรหัสไปรษณีย์และเลือกปุ่ม รีเฟรช และคุณจะเห็นการอัปเดตรายละเอียดสภาพอากาศ

สําหรับการอ้างอิง นี่คือข้อมูลสรุปของชั้นเรียนและไฟล์ที่คุณจะทํางานด้วยในแบบฝึกหัดนี้

แฟ้ม	คำอธิบาย
MainPage.xaml	กําหนด UI และตรรกะสําหรับหน้าเริ่มต้น ไฟล์ XAML กําหนด UI โดยใช้มาร์กอัป
MainPage.xaml.cs	กําหนด UI และตรรกะสําหรับหน้าเริ่มต้น ไฟล์โค้ดเบื้องหลังที่เกี่ยวข้องที่ประกอบด้วยโค้ดที่เกี่ยวข้องกับ UI ที่กําหนดโดย MainPage.xaml
Services\WeatherService.cs	คลาสนี้จะจําลองบริการการรายงานสภาพอากาศ ซึ่งประกอบด้วยวิธีการเดียวที่ชื่อ `GetWeather` ที่ส่งกลับชนิด `WeatherData`
แบบจําลอง \WeatherData.cs	ประกอบด้วยข้อมูลสภาพอากาศ นี่เป็นประเภทบันทึกแบบง่ายที่ให้อุณหภูมิการตกตะกอนความชื้นลมและสภาพของวัน
แบบจําลอง \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

ค้นหา Grid ด้านในที่มีตัวควบคุม Label ทั้งหมด

<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 ควรมีค่าเป็นไวยากรณ์ {Binding PROPERTY_NAME} ซึ่ง PROPERTY_NAME เป็นคุณสมบัติจากชนิด Models.WeatherData ที่กําหนดไว้ใน Models\WeatherData.cs โปรดจําไว้ว่า ชนิดข้อมูลนี้เป็นชนิดข้อมูลที่ส่งกลับโดยบริการสภาพอากาศ

ตัวอย่างเช่น Label ที่มีชื่อ lblWind (ป้ายชื่อสุดท้ายในตาราง) ควรมีคุณสมบัติ 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 ค่าการแจงนับไม่สามารถเปลี่ยนเป็นทรัพยากรรูปภาพโดยไม่ต้องใช้ความพยายามเพิ่มเติม คุณจะแก้ไขปัญหานี้ในแบบฝึกหัดถัดไปหลังจากที่คุณเรียนรู้เพิ่มเติมเกี่ยวกับการผูก

คำติชม

หน้านี้มีประโยชน์หรือไม่