web analytics

UWP Code : การทำ Custom User Controls เบื้องต้น

cover-1

ช่วงนี้กำลังตกงาน เลยหาไรลองทำเล่นๆไปก่อน ก็เลยมาหัดเขียน UWP (Universal Windows Platform) ลองทำสนุกๆ แล้วก็เขียนเป็นบันทึกบทความไปด้วย

 

รู้จัก User Controls

ในสาย Windows เค้าจะเรียก Views ว่า Controls และเมื่อนำ view มารวมกันเป็นก้อน ก็จะเรียกว่า User Controls จริงๆแล้วมันก็คือ View group ใน android นั่นแหละ

ถ้าให้ยกตัวอย่าง Controls ง่ายๆ ก็คือ Button จะเห็นว่ามันอยู่ใน namespace ของ Controls

1

แทบทุกอย่างที่เป็น UI จะอยู่ใน namespace นี้ สามารถดูรายชื่อ เจ้า Controls ได้ที่ลิงค์นี้

https://msdn.microsoft.com/library/windows/apps/Windows.UI.Xaml.Controls

 

การทำ Custom User Controls

Custom User Controls คือการ ทำ Controls เองตามที่ใจต้องการ
หัวใจของมันคือการ Reuse ตัว layout จะได้ไม่ต้องทำโค้ดซ้ำๆ

ก่อนอื่นสร้างโปรเจค Universal Windows ขึ้นมาอันนึง (ถ้ายังไม่มี)

2

 

สร้างโฟลเดอร์สำหรับเก็บ User Controls

User Controls สามารถมีได้หลายอัน เพื่อความเป็นระเบียบเรียบร้อย
จึงควรสร้าง โฟลเดอร์สำหรับมันไว้

คลิกขวาที่ชื่อโปรเจค > Add > New Folder
แล้วตั้งชื่อตามต้องการ ผมขอตั้งว่า MyControls

5

 

สร้างไฟล์ User Controls 

ให้คลิกขวาที่ ชื่อโฟลเดอร์ ที่พึ่งสร้าง > Add > New Item..

 

5-1

 

เลือก User Control
ด้านล่างก็ตั้งชื่อ controls ได้เลย ผมขอใช้ชื่อว่า MyGrid.xaml
แล้วกด Add

4

 

และนี่คือสิ่งที่ได้ จะเห็นว่าไฟล์ .cs อยู่ซ้อนใน .xaml อีกที
ไฟล์ .xaml คือหน้า view
ส่วน programming จะเขียนใน .cs

6

 

ออกแบบ User Controls

เข้าไปที่ MyGrid.xaml จะพบกับหน้าตา view ให้ทำการออกแบบตามใจชอบ
ผมขอทำเป็น view ขนาด 50×50 แล้วแปะปุ่มไว้อันนึง ข้างในเขียนว่า Hello

7

MyGrid.xaml

<UserControl
    x:Class="Match_Animal.MyControls.MyGrid"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Match_Animal.MyControls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="50"
    d:DesignWidth="50">

    <Grid>
        <Button Content="Hello" FontSize="12" Background="#FFFB0039" Foreground="#FFFFFBFB" HorizontalAlignment="Stretch"/>
    </Grid>
</UserControl>

 

การแปะ Custom User Controls บน XAML

วิธีการแรก ขอแนะนำการแปะ ลงบน XAML ของไฟล์ที่ต้องการ

ผมจะลองกับ MainPage.xml ที่จะเป็นหน้าหลักของแอป

 

ใส่ Reference ใน xaml

เริ่มแรกเพื่อจะระบุไปยัง Custom User Control ต้องใส่ reference ก่อน
โดยการใส่ไปเป็น Attribute ของ <Page> ตั้งชื่อว่าอะไรก็ได้
ค่าของมันเป็น namespace ของ Custom user control

เช่น

<Page
    ..
    xmlns:benznest="using:Match_Animal.MyControls">

เวลาจะเอามา User control มาแปะก็แค่

<benznest:MyGrid  />

ซึ่ง Reference ก็สามารถใช้คำว่าอะไรก็ได้ที่ไม่ซ้ำกับชาวบ้าน

ผมลองสร้าง GridView แล้วลองใส่ MyGrid เข้าไป 5 อัน

<Page
    x:Class="Match_Animal.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:benznest="using:Match_Animal.MyControls"
    MinWidth="1000">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" RenderTransformOrigin="0.5,0.5"
          MinWidth="1000">
        <GridView x:Name="gridView_container" Margin="50,100,50,50">
            <benznest:MyGrid  />
            <benznest:MyGrid  />
            <benznest:MyGrid  />
            <benznest:MyGrid  />
            <benznest:MyGrid  />
        </GridView>
    </Grid>
</Page>

 

และนี่คือผลลัพธ์ มันก็คือการเอา Controls มาแปะๆ เป็นการ Reuse นั่นเอง

8

 

การแปะ Custom User Controls ด้วย C#

ทีนี้มาลอง add Custom user control ที่ทำไว้ด้วย C# กันบ้าง

ที่ GridView ลบที่แปะข้างใน gridView เมื่อกี้ออก แล้วใส่ Name ให้มัน

<GridView x:Name="gridView_container" Margin="50,100,50,50">
</GridView>

จากนั้นก็มาเขียน C# ที่ MainPage.xaml.cs
วิธีการง่ายมาก แค่ new Object ของ Custom user control
แล้ว add ลงใน gridView ซึ่งข้อดีคือมันทำการ binding ตัว controls กับ instance ให้แล้ว
เราสามารถเรียกผ่าน instance จาก Name ได้เลย เช่นผมตั้งชื่อ GridView ว่า gridView_container
ก็สามารถใช้ตัวแปร gridView_container ได้เลย ใน C#

namespace Match_Animal
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            InitGridView();
        }

        private void InitGridView()
        {
            for(int i=0;i<30; i++)
            {
                MyControls.MyGrid grid = new MyControls.MyGrid();
                gridView_container.Items.Add(grid);
            }
        }
    }
}

 

ลองรันดูผลลัพธ์

9

 

มาลองเล่นอีกสักหน่อย เราจะส่งค่าเข้าไปใน User controls
จะทำผ่าน method หรือ constructor ก็ได้

ใส่ Name ให้กับ button ใน Custom user control

ไปที่ MyGrid.xaml ใส่ name ให้เรียบร้อย

    <Grid>
        <Button Name="btn" Content="Hello" FontSize="12" Background="#FFFB0039" Foreground="#FFFFFBFB" HorizontalAlignment="Stretch"/>
    </Grid>

 

สร้าง method / constructor รอรับค่า

ที่ MyGrid.cs ก็แค่สร้าง method หรือ constructor รอไว้เพื่ออัพเดทค่า
ในที่นี้เราจะนำเลข index มาแสดงเป็น Content ของปุ่ม

namespace Match_Animal.MyControls
{
    public sealed partial class MyGrid : UserControl
    {
        public MyGrid()
        {
            this.InitializeComponent();
        }

        public MyGrid(int index)
        {
            this.InitializeComponent();
            btn.Content = ""+ index;
        }
    }
}

 

ส่งไปค่าไปยัง custom user control

ที่ MainPage.xaml.cs แก้ไขให้มีการส่งค่าไปให้ custom user control
ในกรณีนี้ผมส่งผ่าน constructor

        private void InitGridView()
        {
            for(int i=0;i<30; i++)
            {
                MyControls.MyGrid grid = new MyControls.MyGrid(i);
                gridView_container.Items.Add(grid);
            }
        }

10

 

จบแล้ว

ได้ลองเล่นการทำ Custom User Control ไม่ยากเลย สามารถเอาไปประยุกต์ใช้ต่อได้ จริงๆแล้วคอนเซ็ปเดียวกับแอนดรอยด์นั่นแหละเนอะ ใครเคยทำ Custom view มาก่อนก็น่าจะเข้าใจ

เดี๋ยวจะลองเล่น UWP ไปเรื่อยๆนะ

ขอบคุณครับ