บางครั้ง โค้ดที่เราจะแจ้ง Alert เราไม่ได้อยู่ที่ Page แต่อาจจะอยู่ใน Model หรือที่ใด ๆ ก็ตาม เรามีวิธีง่าย ๆ ในการใช้ฟังก์ชัน DisplayAlert ,DisplayActionSheet ,DisplayPrompt จากตรงไหนก็ได้ ดังนี้

Photo by AbsolutVision on Unsplash

ให้เรียก App.Current.MainPage แล้วตามด้วยฟังก์ชันที่ต้องการใช้ ดังนี้

App.Current.MainPage.DisplayAlert(“Success”,”AnyWhere”,”OK”);

ขอบคุณที่ติดตามอ่านนะครับ : ) , ^_^

--

--

บางท่านอาจยังสงสัยว่า จะเขียน 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>

ทำ List แบบหลาย Column ด้วย Xamarin Form CollectionView
ทำ List แบบหลาย Column ด้วย Xamarin Form CollectionView

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

Photo by Mauricio Artieda on Unsplash
<?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 บรรทัด แต่ทำไม่ได้ เราจะมาดูวิธีแก้กัน

Photo by Christian Perner on Unsplash

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

  1. ใน Xaml เราจะใช้ ‘&#10;’ แทนเครื่องหมายขึ้นบรรทัดใหม่
  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

Photo by Ag PIC on Unsplash

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 หรือ ปรบมือให้ผมด้วยนะครับ : )

--

--