บางท่านอาจยังสงสัยว่า จะเขียน XAML ไปทำไม ในเมื่อเราก็เขียนโค้ดสร้าง UI เองได้

ตอบสั้น ๆ

XAML ตอบปัญหา What กับ Where เช่น UI หน้านี้จัดโครงสร้างอะไร มี Control อะไรบ้าง อยู่ตรงไหนบนจอ ติดกับ Control ไหน อะไรอยู่บนอยู่ล่าง มันจะเหมือนแผนที่ ดูปราศสายตาไป เราจะเห็นภาพรวมทั้งหมดของ UI

.CS ตอบปัญหา Why กับ How เช่น เมื่อกดปุ่มแล้วจะทำฟังก์ชันนี้นั้นอย่างไร ทำไปเพื่ออะไร

ครับ สั้นจริง ๆ แต่ขอให้คุณผู้อ่านได้ประโยชน์นะครับ

บางทีปุ่มสีธรรมดา มันก็ดูธรรมดาไป เราอยากให้ปุ่มมันดูนูน ๆ น่ากด ทำอย่างไรเรามาดูกัน

วิธีการคือ เราจะไล่เฉดสีตั้งแต่สีที่ค่อนข้างสว่าง ไปยังสีที่มืด โดยใช้ Gradient ดังนี้

            <Button
                WidthRequest="100"
                HeightRequest="50"
                CornerRadius="10"
                Text="Test"
                TextColor="White"
                >
                <Button.Background>
                    <LinearGradientBrush
                        StartPoint="0.5,0"
                        EndPoint="0.5,1"
                        >
                        <GradientStop
                            Color="LightBlue"
                            Offset="0"
                            />
                        <GradientStop
                            Color="DarkBlue"
                            Offset="1"
                            />
                    </LinearGradientBrush>
                </Button.Background>
            </Button>

Background เรากำหนดให้เป็น LinearGradientBrush

โดยสีแรกคือสีน้ำเงินอ่อน

สีที่สองเป็นสีนำ้เงินเข้ม

Offset คือ จุดเริ่มต้น 0 หมายถึงเริ่มต้นที่จุดแรก

Offset 1 คือจุดสิ้นสุด

จะได้ผลดังนี้ครับ

ListView ปกติไม่สามารถทำ List ที่มีหลายคอลัมภ์ได้ แต่ตอนนี้มี CollectionView ทำแบบนั้นได้ เรามาดูกันว่าทำยังไง

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestMultiColumnList.MainPage"><CollectionView
        >
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical" Span="3"/>
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Image
                    Source="{Binding .}"
                    Aspect="AspectFill"
                    VerticalOptions="Fill"
                    HorizontalOptions="Fill"
                    />
            </DataTemplate>
        </CollectionView.ItemTemplate>
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>https://picsum.photos/200/300</x:String>
                <x:String>https://picsum.photos/200/300</x:String>
                <x:String>https://picsum.photos/200/300</x:String>
                <x:String>https://picsum.photos/200/300</x:String>
                <x:String>https://picsum.photos/200/300</x:String>
                <x:String>https://picsum.photos/200/300</x:String>
                <x:String>https://picsum.photos/200/300</x:String>
                <x:String>https://picsum.photos/200/300</x:String>
                <x:String>https://picsum.photos/200/300</x:String>
                <x:String>https://picsum.photos/200/300</x:String>
                <x:String>https://picsum.photos/200/300</x:String>
                <x:String>https://picsum.photos/200/300</x:String>
            </x:Array>
        </CollectionView.ItemsSource>
    </CollectionView></ContentPage>

สำคัญตรงนี้ครับ

        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical" Span="3"/>
        </CollectionView.ItemsLayout>

Orientation คือแนวตั้ง(Vertical) หรือแนวนอน (Horizontal)

Span คือ จำนวน Column

เคยไหมที่เราจะใส่ข้อความลงไปใน Label โดยจะให้ขึ้นบรรทัดใหม่เป็น 2 บรรทัด แต่ทำไม่ได้ เราจะมาดูวิธีแก้กัน

กรณีนี้ต้องแยกเป็น 2 กรณี คือ

1. ใน Xaml เราจะใช้ ‘
’ แทนเครื่องหมายขึ้นบรรทัดใหม่
2. ใน cs เราจะแทนที่ \n ด้วย System.Environment.NewLine

ดังนี้

ใน XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestNewLine.MainPage">    <StackLayout
        Margin="20"
        >
        <Label
            Text="One&#10;Two&#10;Three"
            />
        <Label
            x:Name="CS"
            />
    </StackLayout></ContentPage>

ใน CS

public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            CS.Text = "First\nSecond\nThird".Replace("\n", System.Environment.NewLine);
        }
    }

(Replace เป็นเมธอดที่จะเปลี่ยนข้อความนึงไปเป็นอีกข้อความนึง)

ได้ผลดังนี้

เคยไหมที่เวลาที่เราใช้ View บางชนิด (เช่น Switch) แล้วเราปรับขนาดมันด้วย WidthRequest กับ HeightRequest ไม่ได้ เรามีวิธีแก้ คือ Scale

Scale เป็น property ที่มีอยู่ในทุก View แม้กระทั่ง Switch

โดย Scale ปกติจะมีค่าเท่ากับ 1.0

ถ้าเราต้องการให้ขนาดใหญ่ขึ้น 10% เราก็ใส่ค่า Scale = 1.1

ถ้าเราต้องการให้ขนาดเล็กลง 10% เราก็ใส่ค่า Scale = 0.9

เช่น

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestScale.MainPage"><StackLayout VerticalOptions="Center">
        <Switch Scale="1.5" HorizontalOptions="Center"/>
        <Switch Scale="1.4" HorizontalOptions="Center"/>
        <Switch Scale="1.3" HorizontalOptions="Center"/>
        <Switch Scale="1.2" HorizontalOptions="Center"/>
        <Switch Scale="1.1" HorizontalOptions="Center"/>
        <Switch Scale="1.0" HorizontalOptions="Center"/>
        <Switch Scale="0.9" HorizontalOptions="Center"/>
        <Switch Scale="0.8" HorizontalOptions="Center"/>
        <Switch Scale="0.7" HorizontalOptions="Center"/>
        <Switch Scale="0.6" HorizontalOptions="Center"/>
        <Switch Scale="0.5" HorizontalOptions="Center"/>
    </StackLayout></ContentPage>

ได้ผลดังนี้

เคยไหมที่เราอยากแสดงรูป(ซึ่งเป็นสี่เหลี่ยม)ให้รูปเราเป็นวงกลม(เอาแบบกลมสมบูรณ์ ไม่ใช่โค้งที่ขอบ)

ใน Xamarin.Forms เวอร์ชันมีฟีเจอร์ใหม่ เรียกว่า Clip และ​​ ​Geometry ซึ่งใช้ได้กับทุก View

TLDR; ดูตัวอย่างโค้ดกันดีกว่า

<Image
    Aspect="AspectFill"
    Source="girl.png"
    >
    <Image.Clip>
        <EllipseGeometry
            RadiusX="25"
            RadiusY="25"
            Center="25,25"
            />
    </Image.Clip>
</Image>

ทุก View สามารถคลิปได้ และมี Geometry ให้เลือกมากมายหลายแบบ เช่น

• EllipseGeometry, สำหรับ วงรี หรือ วงกลม (วงกลม คือ วงรีที่มีรัศมีทาง RadiusX เท่ากับ RadiusY)
• GeometryGroup, ใช้กรณีที่จะรวมหลาย Geometry เข้าด้วยกัน
• LineGeometry, แบบเส้น
• PathGeometry, กำหนดโดยใช้ Path (เดี๋ยวจะอธิบายในตอนถัด ๆ ไปครับ)
• RectangleGeometry, สำหรับสี่เหลี่ยม

ง่ายไหม (แต่ก่อนจะทำแบบนี้ยากเหลือเกิน)

ช่วยกด Follow หรือ ปรบมือให้ผมด้วยนะครับ : )

เวลาจะถามคำถามง่าย ๆ กับผู้ใช้ซักคำถามนึง เขียนอย่างไรให้ง่ายที่สุด เรามาดูกัน

ให้ใช้เมธอด DisplayPromptAsync เช่น

string result = await DisplayPromptAsync("Question 1", "What's your name?");

คำตอบก็จะอยู่ที่ result ครับ

ง่ายไหมครับ

ช่วยกด Follow หรือ ปรบมือให้ผมด้วยนะครับ : )

การลดขนาดของแอป ใช้วิธีปรับ Link ให้เป็น Link Framework SDK Only แต่บางครั้งมันทำให้แอปเด้ง เราต้องแก้อย่างไร มาดูกัน

เริ่มแรกให้ปรับ Link ก่อน