บันทึกสูตรคุณยายด้วย Xamarin.Forms

คุณยายของฉันทำซาลาเปาที่ดีที่สุด นุ่มที่สุด คุกเข่าอ่อนที่สุดที่ใครๆ ก็เคยลิ้มลอง ปัญหาคือ มีส่วนผสมลับมากมาย (และฉันไม่ใช่แค่พูดถึงความรัก) ที่ใส่ซาลาเปา และส่วนผสมและทิศทางเหล่านั้นทั้งหมดถูกเก็บไว้ในหัวของคุณยายของฉัน

เราทุกคนต่างมีสูตรอาหารประจำครอบครัวแบบนั้น และแทนที่จะลืมเลือนไป ในบทความนี้ เราจะสร้างแอปบนอุปกรณ์เคลื่อนที่สำหรับ iOS และ Android โดยใช้ Xamarin.Forms ที่จะช่วยพวกเขาสำหรับตัวฉันเองและครอบครัวรุ่นต่อๆ ไปในอนาคต!

ดังนั้น หากคุณสนใจที่จะเขียนแอปพลิเคชันบนมือถือ แต่ไม่มีเวลาเขียนแอปเดิมซ้ำแล้วซ้ำเล่าสำหรับแต่ละแพลตฟอร์ม บทความนี้เหมาะสำหรับคุณ! ไม่ต้องกังวลหากคุณไม่รู้จัก C # จากสลัดสตรอเบอรี่เพรทเซล ฉันเขียนแอป Xamarin มามากกว่า 8 ปีแล้ว และบทความนี้เป็นการแนะนำเกี่ยวกับ Xamarin แบบฟอร์มที่ตั้งใจให้ข้อมูลที่เพียงพอแก่คุณในการเริ่มเรียนรู้ด้วยตนเอง

Xamarin Stuff นี้คืออะไร?

Xamarin ให้มากกว่าแค่คำพูดสนุกๆ เท่านั้น Xamarin ยังช่วยให้นักพัฒนาสร้างแอปพลิเคชัน iOS และ Android แบบเนทีฟโดยใช้ SDK และการควบคุม UI เดียวกันกับที่มีอยู่ใน Swift และ XCode สำหรับ iOS หรือ Java และ Android Studio สำหรับ Android

ข้อแตกต่างคือแอปได้รับการพัฒนาด้วย C# โดยใช้ .NET Framework และ Visual Studio หรือ Visual Studio สำหรับ Mac อย่างไรก็ตาม แอปที่ได้ผลลัพธ์จะเหมือนกันทุกประการ มีลักษณะ สัมผัส และทำงานเหมือนกับแอปที่มาพร้อมเครื่องที่เขียนด้วย Objective-C, Swift หรือ Java

Xamarin โดดเด่นในเรื่องของการแบ่งปันรหัส นักพัฒนาสามารถสร้างและปรับแต่ง UI สำหรับแต่ละแพลตฟอร์มได้โดยใช้การควบคุมแบบเนทีฟและ SDK แต่จากนั้นก็เขียนไลบรารีของตรรกะของแอปที่แชร์ซึ่งแชร์ข้ามแพลตฟอร์ม

การแบ่งปันรหัสนี้ทำให้สามารถประหยัดเวลาได้อย่างมาก

และเช่นเดียวกับขนมปังแสนอร่อยที่คุณยายของฉันทำ เมื่อได้รับรสชาติของการแบ่งปันรหัส — ยากที่จะไม่ต้องการมากกว่านี้ — และนั่นคือสิ่งที่ Xamarin.Forms เข้ามา

Xamarin.Forms

Xamarin.Forms ใช้แนวคิดของการพัฒนา Xamarin แบบดั้งเดิมและเพิ่มชั้นของสิ่งที่เป็นนามธรรมลงไป

แทนที่จะพัฒนาอินเทอร์เฟซผู้ใช้สำหรับ iOS และ Android แยกกัน Xamarin.Forms ได้แนะนำชุดเครื่องมือ UI ที่ช่วยให้คุณสามารถเขียนแอปบนอุปกรณ์เคลื่อนที่แบบเนทีฟจากฐานโค้ดเดียว

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

นั่นเป็นหนึ่งในปัญหาที่ Xamarin.Forms แก้ไขได้

มันมีชุดเครื่องมือของการควบคุมที่ใช้บ่อยที่สุดและเหตุการณ์การโต้ตอบกับผู้ใช้สำหรับพวกเขา ดังนั้นเราจึงต้องเขียนส่วนต่อประสานผู้ใช้สำหรับแอพของเราเพียงครั้งเดียว เป็นที่น่าสังเกตว่าคุณไม่ได้จำกัดอยู่แค่การควบคุม Xamarin.Forms ก็มีให้เช่นกัน — คุณยังสามารถใช้การควบคุมที่พบในแพลตฟอร์มเดียวภายในแอป Xamarin.Forms นอกจากนี้ เรายังแชร์ตรรกะของแอปพลิเคชันระหว่างแพลตฟอร์มได้เหมือนเดิม

สถิติการแชร์โค้ดสำหรับแอปที่พัฒนาด้วย Xamarin.Forms นั้นไม่ธรรมดา แอพจัดการประชุมมีรหัสที่แชร์ 93% บน iOS และ 91% บน Android แอพนี้เป็นโอเพ่นซอร์ส แอบดูรหัส.

Xamarin.Forms ให้มากกว่าการควบคุม UI นอกจากนี้ยังมีเฟรมเวิร์ก MVVM บริการส่งข้อความแบบผับ/ย่อย API แอนิเมชั่น และบริการการพึ่งพา และอื่นๆ

แต่วันนี้เราจะเน้นไปที่ความสามารถของ UI สำหรับการสร้างแอพตัวจัดการสูตรของเรา

แอพที่เราจะสร้าง

แอพตัวจัดการสูตรจะมีส่วนต่อประสานผู้ใช้ที่ตรงไปตรงมา เราจะทำงานในครัว ดังนั้นมันต้องใช้งานง่าย!

จะประกอบด้วย 3 หน้าจอ . รายการแรกจะแสดงรายการสูตรอาหารทั้งหมดที่โหลดอยู่ในแอพ

จากนั้นเมื่อแตะที่สูตรใดสูตรหนึ่ง คุณจะสามารถดูรายละเอียดของสูตรอาหารนั้นได้ในหน้าจอที่สอง:

จากตรงนั้น คุณสามารถแตะปุ่มแก้ไขเพื่อเปลี่ยนแปลงสูตรอาหารในหน้าจอที่สามได้:

คุณยังสามารถไปที่หน้าจอนี้ได้โดยแตะปุ่มเพิ่มจากหน้าจอรายการสูตรอาหาร

สภาพแวดล้อมการพัฒนา

แอป Xamarin สร้างขึ้นด้วย C# และ .NET โดยใช้ Visual Studio บน Windows หรือ Visual Studio สำหรับ Mac บน Mac แต่คุณต้องมี iOS หรือ Android SDK และเครื่องมือติดตั้งด้วย การติดตั้งทุกอย่างในลำดับที่ถูกต้องอาจเป็นปัญหาเล็กน้อย อย่างไรก็ตาม โปรแกรมติดตั้ง Visual Studio จะดูแลเฉพาะการติดตั้ง IDE เท่านั้น แต่ยังรวมถึงเครื่องมือของแพลตฟอร์มด้วย

แม้ว่า Mac จะต้องใช้เพื่อสร้างแอป iOS เสมอ แต่ด้วย Xamarin คุณยังคงสามารถพัฒนาและดีบั๊กแอปเหล่านั้นจาก Visual Studio บน Windows ได้! ดังนั้นหาก Windows เป็นปัญหาของคุณ คุณไม่จำเป็นต้องเปลี่ยนสภาพแวดล้อมทั้งหมด

ตอนนี้เรามาดูกันว่า Xamarin.Forms สามารถช่วยเราบันทึกสูตรสำหรับครอบครัวจากฐานรหัสเดียวได้อย่างไร!

หน้ารายการสูตรอาหาร: วาง UI

มาเริ่มกันที่วิธีที่เราจะจัดวาง UI สำหรับแอปบันทึกสูตรของเรา!

โดยรวมแล้วแต่ละหน้าจอใน Xamarin.Forms ประกอบด้วย 3 องค์ประกอบ Page . อย่างน้อยหนึ่งองค์ประกอบที่เรียกว่า Layout และ Control อย่างน้อยหนึ่งรายการ

หน้า

เพจคือสิ่งที่โฮสต์ทุกอย่างที่แสดงบนหน้าจอในคราวเดียว Page ยังเป็นศูนย์กลางในการนำทางภายในแอพอีกด้วย

เราบอก Xamarin.Forms ว่า Page ใดที่จะแสดงผ่าน บริการนำทาง บริการนั้นจะดูแลการแสดงหน้าใด ๆ ในลักษณะที่เหมาะสมและเป็นเนทีฟสำหรับระบบปฏิบัติการ

กล่าวอีกนัยหนึ่ง โค้ดสำหรับนำทางระหว่างหน้าจอต่างๆ ก็ถูกแยกออกเช่นกัน!

สุดท้าย แม้ว่าจะไม่ใช่วิธีเดียวที่จะทำได้ แต่ฉันโค้ด UI ของ Page ของฉันใน XAML (อีกวิธีหนึ่งคือใช้ C#) XAML เป็นภาษามาร์กอัปที่อธิบายว่าหน้ามีลักษณะอย่างไร และสำหรับตอนนี้ พอจะพูดได้ว่ามันค่อนข้างคล้ายกับ HTML

เค้าโครง

การควบคุมทั้งหมดบนหน้าถูกจัดเรียงโดยสิ่งที่เรียกว่าเค้าโครง

สามารถเพิ่มเลย์เอาต์ได้ตั้งแต่หนึ่งรายการขึ้นไปในหน้า

มีเลย์เอาต์หลายประเภทในฟอร์ม เลย์เอาต์ทั่วไปบางส่วน ได้แก่ เลย์เอาต์ Stack, Absolute, Relative, Grid, Scroll และ Flex

การควบคุม

ในที่สุดก็มีการควบคุม นี่คือวิดเจ็ตของแอปที่ผู้ใช้โต้ตอบด้วย

แบบฟอร์มมาพร้อมการควบคุมมากมายที่จะนำไปใช้ไม่ว่าคุณจะสร้างแอปประเภทใดก็ตาม สิ่งต่างๆ เช่น ป้ายกำกับ ปุ่ม กล่องรายการ รูปภาพ และแน่นอน มุมมองรายการ

เมื่อเพิ่มตัวควบคุมลงในหน้าจอ คุณต้องเพิ่มตัวควบคุมลงในเค้าโครง เป็นเลย์เอาต์ที่ดูแลการค้นหาว่าตัวควบคุมควรปรากฏที่ใดบนหน้าจอ

ดังนั้นเพื่อสร้างหน้าจอต่อไปนี้บน iOS และ Android ตามลำดับ:

ฉันใช้ XAML นี้:

 <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="https://xamarin.com/schemas/2014/forms" xmlns:x="https://schemas.microsoft.com/winfx/2009/xaml" x:Class="SmashingRecipe.RecipeListPage" Title="Recipes"> <ContentPage.Content> <StackLayout> <ListView x:Name="recipesList"> <ListView.ItemTemplate> <DataTemplate> <TextCell Text="{Binding Name}"/> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout> </ContentPage.Content> <ContentPage.ToolbarItems> <ToolbarItem Text="Add" /> </ContentPage.ToolbarItems> </ContentPage>

มีสิ่งสำคัญสองสามอย่างที่เกิดขึ้นที่นี่

อย่างแรกคือ <StackLayout> นี่เป็นการบอกให้ Forms จัดเรียงตัวควบคุมทั้งหมดที่ตามมาในสแต็ก

มีตัวควบคุมเดียวในเค้าโครง และนั่นคือ <ListView> และเราจะตั้งชื่อให้มันเพื่อให้เราสามารถอ้างอิงได้ในภายหลัง

จากนั้นมีพิธีการสำเร็จรูปเล็กน้อยใน ListView ก่อนที่เราจะไปถึงเป้าหมาย: <TextCell> นี่เป็นการบอกให้ Forms แสดงข้อความธรรมดาในแต่ละเซลล์ของรายการ

เราบอก <TextCell> ข้อความที่เราต้องการให้แสดงผ่านเทคนิคที่เรียกว่า Data Binding ไวยากรณ์ดูเหมือน Text="{Binding Name}" โดยที่ Name เป็นคุณสมบัติของคลาส Recipe ที่จำลอง… ก็ Recipes

แล้วสูตรจะเพิ่มเข้าไปในรายการได้อย่างไร?

นอกจากไฟล์ XAML ทุกไฟล์แล้ว ยังมีไฟล์ "โค้ดเบื้องหลัง" โค้ดเบื้องหลังนี้ช่วยให้เราทำสิ่งต่างๆ เช่น จัดการเหตุการณ์การโต้ตอบกับผู้ใช้ ตั้งค่า หรือทำตรรกะอื่นๆ ของแอป

มีฟังก์ชันที่สามารถแทนที่ได้ในทุก Page ที่เรียกว่า OnAppearing ซึ่งฉันแน่ใจว่าคุณเดาได้ — จะถูกเรียกเมื่อ Page ปรากฏขึ้น

 protected override void OnAppearing() { base.OnAppearing(); recipesList.ItemsSource = null; recipesList.ItemsSource = App.AllRecipes; }

สังเกต recipesList.ItemsSource = AllRecipes;

นี่กำลังบอก ListView - "เฮ้! ข้อมูลทั้งหมดของคุณมีอยู่ใน App.AllRecipes ที่นับได้ (ตัวแปรทั่วทั้งแอปพลิเคชัน) และคุณสามารถใช้คุณสมบัติของอ็อบเจ็กต์ย่อยเพื่อผูกมัดได้!”

รายชื่อสูตรอาหารทั้งหมดนั้นดีและใช้ได้ แต่คุณไม่สามารถอบอะไรเลยโดยไม่ได้ดูรายละเอียดของสูตรก่อน แล้วเราจะดูแลเรื่องนั้นต่อไป

การจัดการเหตุการณ์

แอปของเราไม่ตอบสนองต่อการสัมผัสของผู้ใช้ก็ไม่มีอะไรมากไปกว่ารายการสูตรอาหารที่ฟังดูน่าอร่อย ฟังดูดีแต่ถ้าไม่รู้วิธีทำก็ไม่มีประโยชน์อะไร!

มาทำให้แต่ละเซลล์ใน ListView ตอบสนองต่อการแตะกัน เพื่อให้เราได้เห็นวิธีทำสูตร!

ในไฟล์ Code-behind ของ RecipeListPage เราสามารถเพิ่ม ตัวจัดการเหตุการณ์ ให้กับตัวควบคุมเพื่อรับฟังและตอบสนองต่อเหตุการณ์การโต้ตอบของผู้ใช้

จัดการเหตุการณ์การแตะในมุมมองรายการแล้ว:

 recipesList.ItemSelected += async (sender, eventArgs) => { if (eventArgs.SelectedItem != null) { var detailPage = new RecipeDetailPage(eventArgs.SelectedItem as Recipe); await Navigation.PushAsync(detailPage); recipesList.SelectedItem = null; } };

มีบางสิ่งที่เรียบร้อยเกิดขึ้นที่นั่น

เมื่อใดก็ตามที่มีคนเลือกแถว ItemSelected จะทำงานบน ListView

จากอาร์กิวเมนต์ที่ส่งผ่านไปยังตัวจัดการ ออบเจ็กต์ eventArgs มีคุณสมบัติ SelectedItem ที่เกิดขึ้นกับสิ่งที่ผูกกับ ListView ก่อนหน้านี้

ในกรณีของเรา นั่นคือคลาส Recipe (ดังนั้นเราจึงไม่ต้องค้นหาออบเจกต์ในแหล่งที่มาของมาสเตอร์ - วัตถุนั้นจะถูกส่งผ่านมาหาเรา)

หน้ารายละเอียดสูตร

แน่นอนว่ามีเพจแสดงส่วนผสมลับและวิธีทำแต่ละสูตรให้เราดู แต่หน้านั้นแสดงได้อย่างไร?

สังเกตการ await Navigation.PushAsync(detailPage); เส้นจากด้านบน ออบเจ็กต์ Navigation เป็นออบเจ็กต์ที่ไม่ขึ้นกับแพลตฟอร์มที่จัดการการเปลี่ยนหน้าในแบบเนทีฟสำหรับแต่ละแพลตฟอร์ม

มาดูที่หน้ารายละเอียดสูตรอาหารกัน:

หน้านี้สร้างด้วย XAML เช่นกัน อย่างไรก็ตาม Layout ย์เอาต์ที่ใช้ (FlexLayout) นั้นค่อนข้างเจ๋งเพราะได้แรงบันดาลใจจาก CSS Flexbox

 <ContentPage.Content> <ScrollView> <FlexLayout AlignItems="Start" AlignContent="Start" Wrap="Wrap"> <Image Source="buns.png" FlexLayout.Basis="100%" /> <Label Text="{Binding Name}" HorizontalTextAlignment="Center" TextColor="#01487E" FontAttributes="Bold" FontSize="Large" Margin="10, 10" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="Ingredients" FontAttributes="Bold" FontSize="Medium" TextColor="#EE3F60" Margin="10,10" HorizontalOptions="FillAndExpand" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="{Binding Ingredients}" Margin="10,10" FontSize="Small" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="Directions" FontAttributes="Bold" FontSize="Medium" TextColor="#EE3F60" Margin="10,10" HorizontalOptions="FillAndExpand" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="{Binding Directions}" Margin="10,10" FontSize="Small" /> </FlexLayout> </ScrollView> </ContentPage.Content>

FlexLayout จะจัดเรียงตัวควบคุมในแถวหรือคอลัมน์ ประโยชน์ที่ยิ่งใหญ่มาพร้อมกับความจริงที่ว่ามันสามารถตรวจจับได้โดยอัตโนมัติว่ามีพื้นที่เหลือบนหน้าจอเท่าใดในการวางตัวควบคุม และหากไม่เพียงพอ มันก็จะสามารถสร้างแถวหรือคอลัมน์ใหม่เพื่อรองรับมันได้โดยอัตโนมัติ!

สิ่งนี้ช่วยได้มากเมื่อต้องรับมือกับขนาดหน้าจอต่างๆ ซึ่งมีมากมายในการพัฒนาอุปกรณ์พกพา

ด้วย FlexLayout ช่วยให้เรารักษาหน้าจอรายละเอียดให้ดูดี เรายังต้องแก้ไขสูตรเหล่านั้นใช่ไหม

คุณอาจสังเกตเห็นสิ่งนี้:

 <ToolbarItem Text="Edit" Clicked="Edit_Clicked" />

บรรทัดนั้นมีหน้าที่วางปุ่มในแถบเครื่องมือของแอพ Clicked="Edit_Clicked" จะบอกปุ่มว่าเมื่อคลิกแล้ว ให้มองหาฟังก์ชันของชื่อนั้นในโค้ดด้านหลัง จากนั้นจึงเรียกใช้โค้ด

ซึ่งในกรณีนี้ จะเป็นการสร้างอินสแตนซ์หน้าแก้ไขสูตร และผลักดันสิ่งนั้นไปยังสแต็กการนำทางของเราโดยใช้ออบเจกต์ Navigation ที่กล่าวถึงก่อนหน้านี้

หน้าแก้ไขสูตร

หน้าที่มีรายการสูตรอาหาร: ตรวจสอบ! หน้าที่มีรายละเอียดทั้งหมดในการทำสูตร: ตรวจสอบ! เหลือแต่การสร้างเพจที่เราใช้ในการป้อนหรือเปลี่ยนสูตรในขณะที่เราดูคุณยายใช้เวทมนตร์ของเธอ!

ขั้นแรก ตรวจสอบหน้าจอ:

และตอนนี้รหัส:

 <ContentPage.Content> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <TableView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Intent="Form" HasUnevenRows="true"> <TableSection Title="General"> <EntryCell x:Name="recipeNameCell" Label="Name" /> </TableSection> <TableSection Title="Ingredients"> <ViewCell> <StackLayout Padding="15"> <Editor x:Name="ingredientsCell" /> </StackLayout> </ViewCell> </TableSection> <TableSection Title="Directions"> <ViewCell> <StackLayout Padding="15"> <Editor x:Name="directionsCell" /> </StackLayout> </ViewCell> </TableSection> </TableView> <Button Text="Save" Grid.Row="1" Grid.Column="0" BackgroundColor="#EE3F60" TextColor="White" x:Name="saveButton" /> <Button Text="Cancel" Grid.Row="1" Grid.Column="1" BackgroundColor="#4CC7F2" TextColor="White" x:Name="cancelButton" /> </Grid> </ContentPage.Content>

มีโค้ดมากกว่านี้เล็กน้อย และนั่นเป็นเพราะฉันใช้เลย์เอาต์ Grid เพื่อระบุว่าทุกอย่างควรจัดวางในรูปแบบ 2 มิติอย่างไร

และยังสังเกตว่าไม่มีการผูกข้อมูลที่นี่ เพราะฉันต้องการยกตัวอย่างว่าเราจะเติมการควบคุมจากโค้ดเบื้องหลังไฟล์ได้อย่างไร:

 void InitializePage() { Title = TheRecipe.Name ?? "New Recipe"; recipeNameCell.Text = TheRecipe.Name; ingredientsCell.Text = TheRecipe.Ingredients; directionsCell.Text = TheRecipe.Directions; saveButton.Clicked += async (sender, args) => { SaveRecipe(); await CloseWindow(); }; cancelButton.Clicked += async (sender, args) => { await CloseWindow(); }; }

เห็นว่าคุณสมบัติ TheRecipe ? เป็นระดับหน้า เก็บข้อมูลทั้งหมดสำหรับสูตรเฉพาะ และได้รับการตั้งค่าในตัวสร้างของหน้า

ประการที่สอง ตัวจัดการเหตุการณ์ Clicked สำหรับ saveButton และ cancelButton เป็น .NET-ified ทั้งหมด (และใช่ ฉันมักจะใช้คำพูดของตัวเองบ่อยๆ)

ฉันบอกว่ามันเป็น .NET-ified เพราะไวยากรณ์ในการจัดการเหตุการณ์นั้นไม่ใช่ของ Java หรือ Objective-C เมื่อแอปทำงานบน Android หรือ iOS ลักษณะการทำงานจะเหมือนกับ Android Click หรือ iOS TouchUpInside

และอย่างที่คุณเห็น ตัวจัดการเหตุการณ์การคลิกแต่ละตัวกำลังเรียกใช้ฟังก์ชันที่เหมาะสม ซึ่งจะบันทึกสูตรและปิดหน้า หรือปิดเฉพาะหน้าเท่านั้น

มีแล้ว — เรามี UI ลงเพื่อบันทึกสูตรตั้งแต่ตอนนี้จนถึงสิ้นสุด!

ซีเอสเอส อะไรนะ?!? หรือทำให้แอพสวย

การบันทึกสิ่งที่ดีที่สุดสำหรับครั้งสุดท้าย: Xamarin.Forms 3.0 ทำให้เรา — เหนือสิ่งอื่นใด — ความสามารถในการควบคุมสไตล์โดยใช้ CSS!

Xamarin.Forms CSS ไม่ใช่สิ่งที่คุณอาจคุ้นเคย 100% จากการพัฒนาเว็บ แต่ก็ใกล้พอที่ทุกคนที่คุ้นเคยกับ CSS จะรู้สึกเหมือนอยู่บ้าน เช่นเดียวกับฉันที่คุณยาย!

ลองใช้หน้ารายละเอียดสูตรและจัดองค์ประกอบใหม่ ดังนั้นจึงใช้ Cascading Style Sheets เพื่อตั้งค่าองค์ประกอบภาพแทนการตั้งค่าทุกอย่างในบรรทัดโดยตรงใน XAML

ขั้นตอนแรกคือการสร้างเอกสาร CSS! ในกรณีนี้จะมีลักษณะดังนี้:

 .flexContent { align-items: flex-start; align-content: flex-start; flex-wrap: wrap; } image { flex-basis: 100%; } .spacer { flex-basis: 100%; height: 0; } .foodHeader { font-size: large; font-weight: bold; color: #01487E; margin: 10 10; } .dataLabel { font-size: medium; font-weight: bold; color: #EE3F60; margin: 10 10; } .data { font-size: small; margin: 10 10; }

ส่วนใหญ่จะดูเหมือน CSS มีชั้นเรียนอยู่ในนั้น มีตัวเลือกเดียวสำหรับประเภทคลาส Image แล้วกลุ่มผู้กำหนดคุณสมบัติ

ตัวตั้งค่าคุณสมบัติบางตัว เช่น flex-wrap หรือ flex-basis นั้นจำเพาะสำหรับ Xamarin.Forms ในอนาคต ทีมงานจะเติมคำนำหน้าด้วย xf- เพื่อปฏิบัติตามแนวทางปฏิบัติมาตรฐาน

ต่อไปจะเป็นการนำไปใช้กับการควบคุม XAML

 <ContentPage.Resources> <StyleSheet Source="../Styles/RecipeDetailStyle.css" /> </ContentPage.Resources> <ContentPage.Content> <ScrollView> <FlexLayout StyleClass="flexContent"> <Image Source="buns.png" /> <Label Text="{Binding Name}" StyleClass="foodHeader" /> <BoxView StyleClass="spacer" /> <Label Text="Ingredients" StyleClass="dataLabel" HorizontalOptions="FillAndExpand" /> <BoxView StyleClass="spacer" /> <Label Text="{Binding Ingredients}" StyleClass="data" /> <BoxView StyleClass="spacer" /> <Label Text="Directions" StyleClass="dataLabel" HorizontalOptions="FillAndExpand" /> <BoxView StyleClass="spacer" /> <Label Text="{Binding Directions}" StyleClass="data" /> </FlexLayout> </ScrollView> </ContentPage.Content>

นี่คือสิ่งที่ดูเหมือนก่อน

ใน Xamarin.Forms หากต้องการอ้างอิงเอกสาร CSS ให้เพิ่ม <StyleSheet Source="YOUR DOC PATH" /> จากนั้น คุณสามารถอ้างอิงคลาสในแต่ละคอนโทรลผ่านคุณสมบัติ StyleClass

มันล้าง XAML อย่างแน่นอน และทำให้ความตั้งใจของการควบคุมชัดเจนขึ้นด้วย ตัวอย่างเช่น ตอนนี้ค่อนข้างชัดเจนว่า <BoxView StyleClass="spacer" /> นั้นขึ้นอยู่กับอะไร!

และ Image ก็ถูกจัดสไตล์ด้วยตัวมันเองทั้งหมดเพราะเป็น Image และวิธีที่เรากำหนดตัวเลือกใน CSS

เพื่อให้แน่ใจว่า CSS ใน Xamarin.Forms ไม่ได้ถูกใช้งานอย่างเต็มที่เหมือนลูกพี่ลูกน้องของเว็บ แต่ก็ยังค่อนข้างเจ๋ง คุณมีตัวเลือก คลาส สามารถตั้งค่าคุณสมบัติได้ และแน่นอน สิ่งที่เกิดขึ้นทั้งหมดนั้นเกิดขึ้น!

สรุป

สามหน้าจอ สองแพลตฟอร์ม หนึ่งบทความ และสูตรที่ไม่รู้จบบันทึกไว้แล้ว! และคุณรู้ว่าอะไร? คุณสามารถสร้างแอปด้วย Xamarin.Forms ได้มากกว่า Android และ iOS คุณสามารถสร้าง UWP, macOS และแม้แต่แพลตฟอร์ม Samsung Tizen!

Xamarin.Forms เป็นชุดเครื่องมือ UI ที่ช่วยให้คุณสร้างแอปได้โดยการเขียนอินเทอร์เฟซผู้ใช้เพียงครั้งเดียวและให้ UI แสดงผลแบบเนทีฟทั่วทั้งแพลตฟอร์มหลัก

ทำได้โดยจัดเตรียม SDK ที่เป็นนามธรรมสำหรับการควบคุมที่ใช้บ่อยที่สุดในแพลตฟอร์ม นอกเหนือจากความดีของ UI แล้ว Xamarin.Forms ยังมีเฟรมเวิร์ก MVVM ที่มีคุณสมบัติครบถ้วน บริการส่งข้อความแบบผับ/ย่อย API แอนิเมชัน และบริการการพึ่งพา

Xamarin.Forms ยังให้ประโยชน์ของโค้ดแบบเดียวกันกับการพัฒนา Xamarin แบบดั้งเดิม ตรรกะของแอปพลิเคชันใด ๆ จะถูกแชร์ในทุกแพลตฟอร์ม และคุณจะได้พัฒนาแอปทั้งหมดด้วย IDE เดียวโดยใช้ภาษาเดียว ซึ่งเยี่ยมมาก!

ไปไหนต่อ? ดาวน์โหลดซอร์สโค้ดสำหรับแอป Xamarin.Forms นี้เพื่อลองใช้งาน จากนั้นหากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Xamarin.Forms รวมถึงความสามารถในการสร้างแอปทั้งหมดภายในเบราว์เซอร์ของคุณ ลองดูบทช่วยสอนออนไลน์นี้!