Bài 6: Xây dựng giao diện với XAML trong Windows Phone (phần 3)

Phần này Tui sẽ nói về Cách sử dụng Resource và Style.

Trong quá trình xây dựng ứng dụng, chắc chắn ta sẽ không tránh khỏi yêu cầu làm thế nào để ứng dụng của ta mang một style thống nhất, ví dụ những màu chữ, kiểu chữ, font chữ trên các trang phải đồng nhất với nhau. Ngoài ra, ta còn phải làm việc với một số control đòi hỏi phải định dạng trước mẫu dữ liệu mà control đó sẽ hiển thị, ví dụ như ListBox hay LongListSelector. Và ta cũng cần tách biệt giữa code định dạng các control và code khai báo các control để tài nguyên được trong sáng và dễ chỉnh sửa hơn, có thể tái sử dụng được nhiều lần. Để giải quyết các vấn đề trên, ta cần sử dụng các style và resource được cung cấp trong Windows Phone.

Resource sẽ được chia thành 2 nhóm chính đó là Style DataTemplate.

Ta sử dụng Style để định dạng, trang trí cho các control, còn DataTemplate dùng để định nghĩa mẫu dữ liệu cho các list control (Listbox, LonglistSelector)

Style: Để định nghĩa một style, ta khai báo cú pháp XAML như sau:

[code language=”xml”]
<Grid.Resources >
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="Height"   Value="100" />
<Setter Property="Width"   Value="200"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Background" Value="BlueViolet"/>
</Style>
</Grid.Resources>
[/code]

– Thuộc tính x:Key dùng để định danh cho style

– Thuộc tính TargetType dùng để loại control sẽ được áp dụng

Lưu ý: nếu thuộc tính x:Key không được khai báo thì tất cả các control cùng loại với TargetType sẽ được áp dụng style.

Một thẻ <Setter/> sẽ khai báo cho một thuộc tính của control

– Để áp dụng 1 style cho 1 control ta khai báo thuộc tính Style của control đó như sau:

Style=”{StaticResource <tên của style>} ”

Tức là ta có thể sử dụng như sau:

<Button Style=”{StaticResource  ResourceKey=buttonStyle}”  Content= “drthanh”/>

Kết quả:

wp6_27Đặc biệt ta cũng có thể kế thừa Style theo cách sau:

wp6_28

DataTemplate: để định dạng DataTemplate, ta cũng định dạng giống như khi định dạng ItemTemplate cho các control.

VD: Định nghĩa một DataTemplate:

[code language=”xml”]

<DataTemplate x:Key="ListBoxTemplate">

<StackPanel>

<TextBlock Text="Name"/>

<TextBlock Text="{Binding Path=Name}"/>

<TextBlock Text="Surname"/>

<TextBlock Text="{Binding Path=Surname}"/>

</StackPanel>

</DataTemplate>

[/code]

– Thuộc tính x:Key dùng để định danh cho DataTemplate.

Ta cũng có thể khai báo dạng ControlTemplate:

wp6_29Hoặc tách rời controltemplate ra:

wp6_30Bây giờ Tui sẽ nói về các vị trí đặt Resource:

Có 3 vị trí:

– Đặt ở Page Resource

  • Được khai trong một trang XAML và chỉ được sử dụng trong trang đó.
  • Được định nghĩa trong cặp thẻ:

[code language=”xml”]

<phone:PhoneApplicationPage.Resources>

<!– Định nghĩa các Resource tại đây –>

</phone:PhoneApplicationPage.Resources>

[/code]

– Đặt ở Application Resource

  • Được khai trong một trang App.xaml và toàn bộ các trang trong ứng dụng đều có thể sử dụng
  • Được định nghĩa trong cặp thẻ:

[code language=”xml”]

<Application.Resources>

<!– Định nghĩa các Resource tại đây –>

</Application.Resources>

[/code]

– Đặt trong Dictionary Resource

  • Được khai báo trong một file xml riêng lẻ
  • Tên file phải được kết thúc bằng “.xaml
  • Các Resource được định nghĩa trong cặp thẻ:

[code language=”xml”]

<?xml version="1.0" encoding="utf-8" ?>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<!–Định nghĩa các Resource tại đây –>

</ResourceDictionary>

[/code]

  • Để sử dụng, ta add vào Application Resource hoặc Page Resource như sau:

[code language=”xml”]

<Application.Resources>

<ResourceDictionary>

<local:LocalizedStrings xmlns:local="clr-namespace:Demo_Brush_Resource" x:Key="LocalizedStrings"/>

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary Source="Assets/Resources/Style.xaml"/>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources

[/code]

Chi tiết cho việc tạo Dictionary Resource:

Bước 1: Tạo một Project tên LearnResource

– Bước 2: Thêm 1 Dictionary Resource

Bấm chuột phải vào Project chọn Add/New Item:

wp6_31

Chú ý mặc định là xml bạn tự gõ thành .xaml

Sau đó tiến hành viết nội dung cho MyResource.xaml như hình dưới đây:

wp6_32

[code language=”xml”]

<ResourceDictionary     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<LinearGradientBrush x:Key="drthanhbrush">

<GradientStop Color="AliceBlue" Offset="0" />

<GradientStop Color="Blue" Offset=".7" />

</LinearGradientBrush>

</ResourceDictionary>

[/code]

– Bước 3– Đưa vào Application Resource trong App.xaml.

 Mở App.xaml:

[code language=”xml”]

<Application.Resources>

<ResourceDictionary>

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary Source="MyResource.xaml"/>

</ResourceDictionary.MergedDictionaries>

<local:LocalizedStrings

xmlns:local="clr-namespace:LearnResource"

x:Key="LocalizedStrings"/>

</ResourceDictionary>

</Application.Resources>

[/code]

– Bước 4sử dụng Application Resource trong 1 trang XAML nào đó, ví dụ (MainPage.xaml):

[code language=”xml”]

<Button Background="{StaticResource ResourceKey=drthanhbrush}"

Content="drthanh"/>

[/code]

Trong Dictionary resource Tui có để key là drthanhbrush, thì ở chỗ sử dụng sẽ dùng key này.

Như vậy bạn đã biết cách tạo Dictionary Resource và cách sử dụng nó.

Bạn chú ý tag:

<ResourceDictionary.MergedDictionaries>

Là nơi cho phép chúng ta sử dụng nhiều file Dictionary Resource, ví dụ tập các style dành cho Textblock lưu 1 dictionary riêng, tập các style danh cho Button lưu 1 dictionary riêng…. cuối cùng ta gom chung lại sử dụng trong ứng dụng.

Khi sử dụng Dictionary thì ta nên đưa vào Application Resource để mọi nơi trong ứng dụng đều có thể truy suất.

Chúc các bạn thành công.

Bài 6: Xây dựng giao diện với XAML trong Windows Phone (phần 2)

Tiếp tục trình bày về Xây dựng giao diện với XAML, ở phần 2 này Tui sẽ nói về cách sử dụng Brush.

Phần 2) Cách sử dụng Brush

Brush là một công cụ giúp ta định nghĩa màu cho các control. Brush hỗ trợ ta vẽ màu đơn sắc và kết hợp nhiều màu với nhau theo kiểu Gradient. Dưới đây là một số brush được hỗ trợ trong Windows Phone:

wp6_13Tui chụp một số màu đại diện tương ứng để bạn dễ liên tưởng:

wp6_14Để tạo một đối tượng Brush thì ta có thể sử dụng XAML để định nghĩa hoặc sử dụng coding behind, tùy từng trường hợp mà ta nên sử dụng một cách khéo léo.

Để định nghĩa một Brush, ta có thể định nghĩa trực tiếp trên code XAML hoặc định nghĩa trong code behind. Và ta cần cần biết cách viết chuyển đổi qua lại giữa coding behind và XAML.

Ứng với mỗi loại Brush Tui sẽ viết bằng 2 cách (coding behind và XAML) để các bạn có thể dễ dàng hiểu được cách sử dụng Brush cũng như cách viết chuyển đổi.

Đa phần các Brush nằm trong thư viện:

using System.Windows.Media

1)SolidColorBrush:

Dùng để tạo màu đơn sắc đồng nhất (Ví dụ màu đỏ, màu xanh, màu vàng).

Cách tạo trong XAML:

[code language=”xml”]

<Button Content="drthanh" >

    <Button.Background>

        <SolidColorBrush Color="Red">

        </SolidColorBrush>

    </Button.Background>

</Button>

[/code]

 

wp6_15Cách tạo trong coding behind:

Nếu màu đơn sắc đó là màu phải dựa theo những thông số RED, GREEN, BLUE ta làm như sau

[code language=”csharp”]

Color cr = new Color();

cr.B = cr.R = cr.G = 122;

cr.A = 255;

SolidColorBrush br = new SolidColorBrush(cr);

button1.Background = br;

[/code]

 

ở trên Tui để cr.B=cr.R=cr.G=122 , bạn có thể tách riêng ra mỗi dòng để gán mỗi giá trị riêng biệt cho nó.

Nếu như màu đơn sắc chỉ lấy màu theo hệ thống đã định nghĩa thì ta làm như sau:

[code language=”csharp”]

SolidColorBrush br = new SolidColorBrush(Colors.Blue);

button1.Background = br;

[/code]

 

Để giúp các bạn dễ dàng tìm được các thông số RED, GREEN, BLUE để tạo màu cho đối tượng, tui có viết sẵn công cụ lấy màu theo các thông số này, bạn có thể tải ở đây: Link Download

wp6_16Bạn chỉ cần kéo thả trackbar để chọn màu và các giá trị RED, GREEN, BLUE sẽ xuất hiện theo. hoặc bấm vào button “…” để hiển thị cửa sổ chọn màu:

wp6_172)LinearGradientBrush:

Dùng để tạo bảng phối màu theo dạng tuyến tính, các bạn khi làm màu Gradient thì chú ý về cơ chế hoạt động của nó là: Không quan tâm tới kích thước của cửa sổ là bao nhiêu (tức là nếu 1 đối tượng có kích thước là 500×500 với 1 đối tượng có kích thước là 50×50 là như sau), nó chỉ quan tâm góc trái trên cùng là (0.0,0.0) và góc phải cuối cùng là (1.0,1.0) đây là một dãy số thực vô hạn:

wp6_18Cách tạo trong XAML:

[code language=”xml”]<Button Content= "drthanh" name="btnLinear">
                <Button.Background>
                    <LinearGradientBrush StartPoint="0.75,0.25">
                        <GradientStop Color="Red" Offset="0.0"/>
                        <GradientStop Color="Blue" Offset="0.5"/>
                        <GradientStop Color="White" Offset="1.0"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
[/code]

 

Cách tạo trong coding behind:

[code language=”csharp”]

public MainPage()
{
InitializeComponent();

LinearGradientBrush brush=new LinearGradientBrush();
brush.StartPoint=new Point(0.75,0.25);
GradientStop st1=new GradientStop();
st1.Color=Colors.Red;
st1.Offset=0.0;

GradientStop st2=new GradientStop();
st2.Color=Colors.Blue;
st2.Offset=0.5;

GradientStop st3=new GradientStop();
st3.Color=Colors.White;
st3.Offset=1.0;

brush.GradientStops.Add(st1);
brush.GradientStops.Add(st2);
brush.GradientStops.Add(st3);

btnLinear.Background = brush;

}

[/code]

Kết quả:

wp6_20Bạn để ý thông số Offset là vị trí trong đoạn (0.0,1.0) mà ta bắt đầu đổ màu vào, bạn cứ tưởng tượng là 1 tờ giấy A4 được bạn đổ một bình mực vào vị trí nào, nơi nào được đổ vào trước thì ở đó đậm nét của màu và lan tỏa ra xung quanh, màu nào mạnh hơn thì chiếm ưu thế hơn.

Tiếp tục quan sát StartPoint có 2 thông số (X,Y) là điểm khởi đầu tô màu cho màu đầu tiên trong danh sách màu, ở trên ta thấy màu đỏ được tô bắt đầu từ tọa độ X=0.75, Y=0.25 nên có hình dáng như vậy.

Nếu như bạn phối 4 màu:

Yellow có Offset 0.0

Red có Offset 0.25

Blue có Offset 0.75

LimeGreen có Offset 1.0

Thì có có bảng phân bố màu như sau:

wp6_212)RadialGradientBrush:

Phối màu theo hình cầu có tiêu điểm

wp6_22Cách viết XAML:

[code language=”xml”]

<Rectangle Width="200" Height="100">

<Rectangle.Fill>

<RadialGradientBrush

GradientOrigin="0.5,0.5"

Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">

<RadialGradientBrush.GradientStops>

<GradientStop Color="Yellow" Offset="0" />

<GradientStop Color="Red" Offset="0.25" />

<GradientStop Color="Blue" Offset="0.75" />

<GradientStop Color="LimeGreen" Offset="1" />

</RadialGradientBrush.GradientStops>

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

[/code]

Cách viết trong Coding behind:

[code language=”csharp”]

RadialGradientBrush radialGradient = new RadialGradientBrush();

// thiết lập GradientOrigin để vẽ tâm bẻ góc (làm lệch tâm) của bảng màu.

radialGradient.GradientOrigin = new Point(0.5, 0.5);

// Thiết lập tọa độ tâm.

radialGradient.Center = new Point(0.5, 0.5);

// Thiết lập bo góc.

radialGradient.RadiusX = 0.5;

radialGradient.RadiusY = 0.5;

// Tạo 4 màu phối lại với nhau

radialGradient.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));

radialGradient.GradientStops.Add(new GradientStop(Colors.Red, 0.25));

radialGradient.GradientStops.Add(new GradientStop(Colors.Blue, 0.75));

radialGradient.GradientStops.Add(new GradientStop(Colors.LimeGreen, 1.0));

// Freeze the brush (make it unmodifiable) for performance benefits.

radialGradient.Freeze();

// Tạo một Rectangle (bạn có thể lấy tên của một control nào đó)

Rectangle aRectangle = new Rectangle();

aRectangle.Width = 200;

aRectangle.Height = 100;

aRectangle.Fill = radialGradient;

[/code]

Bạn cần lưu ý các  thuộc tính như GradientOrigin, Center, RadiusX, RadiusY. Hình sau mô tả công năng từng thuộc tính:

wp6_23Ví dụ:

[code language=”xml”]

<Button x:Name="button1" Content="drthanh" >
<Button.Background>
<RadialGradientBrush GradientOrigin="0.75,0.25" RadiusX="0.3" RadiusY="0.5">
<GradientStop Color="Yellow" Offset="0.0"/>
<GradientStop Color="Orange" Offset="0.5"/>
<GradientStop Color="Blue" Offset="1.0"/>
</RadialGradientBrush>
</Button.Background>
</Button>

[/code]

wp6_244) ImageBrush:

ImageBrush cho phép hiển thị hình ảnh.

wp6_25Nếu viết lại trong coding behind:

[code language=”csharp”]

using System.Windows.Media;

using System.Windows.Media.Imaging;

….

ImageBrush br = new ImageBrush();

br.ImageSource = new BitmapImage

(

new Uri(

"Assets\\hinhvui.PNG",

UriKind.Relative)

);

btnimg.Background = br;

[/code]

wp6_26Như vậy Tui đã trình bày sơ qua về một số Brush thường sử dụng, bạn có thể sử dụng để vận dụng vào các bài tập tiếp theo.

Bài tiếp theo Tui sẽ nói về phần số 3 Cách sử dụng Resource và Style.

Chúc các bạn thành công.

Bài 6: Xây dựng giao diện với XAML trong Windows Phone (phần 1)

Từ bài 1 ->bài 5 các bạn đã biết được cách thức tạo 1 Project Windows phone, cách sử dụng Emulator, đăng ký lập trình với thiết bị thật cũng như hiểu được vòng đời của một ứng dụng Windows phone như thế nào.

Từ Bài 6 trở đi Tui sẽ hướng dẫn các bạn cách thức lập trình với Windows Phone 8.1 Silverlight, Tui sẽ cố gắng tách từng phần nhỏ theo thứ tự từ dễ lên khó để giúp các bạn dễ nắm bắt cũng như có thể tự xâu chuỗi lại thành một hệ thống để có thể tiến hành viết được trọn vẹn một ứng dụng thực tế nào đó.

Trên internet có rất nhiều website hướng dẫn lập trình về Windows Phone 8.1 Silverlight các bạn có thể tham khảo,  tuy nhiên Tui sẽ hướng dẫn theo cách của Tui các bạn có thể chấp nhận hoặc không chấp nhận, nhưng dù sao các bạn cũng phải hiểu được căn cơ của Windows Phone 8.1 thì mới bắt tay lập trình tốt được, không quan trọng là đọc trang nào.

Phần Xây dựng giao diện với XAML trong Windows Phone tui sẽ trình bày thành 4 bài độc lập như sau:

Phần 1) Cách thức làm việc với XAML

Phần 2) Cách sử dụng Brush

Phần 3) Cách sử dụng Resource và Style

Các bạn cần hiểu XAML trong Windows Phone vì khi bắt đầu new 1 project Helloworld là bạn để nhìn thấy ngay cấu trúc XAML của Windows Phone rồi. Nếu bạn đã có kiến thức về XML thì XAML cũng có vẻ tương tự nhưng võ công cao hơn 1 bậc.

Windows Phone sử dụng  XAML làm đặc thù cho phần thiết kế giao diện, bạn có thể sử dụng trực tiếp Visual Studio hoặc công cụ Microsoft Expression Blend để thiết kế (thường trong quá trình cài đặt Visual Studio nó đã đính kèm công cụ này rồi).

Bây giờ ta bắt đầu tìm hiểu XAML với phần đầu tiên:

Phần 1) Cách thức làm việc với XAML

  • XAML là gì?

XAML (Extensible Application Markup Language) – phát âm zammel.

XAML là một ngôn ngữ đánh dấu khai báo tương tự như XML, nó được sử dụng để tạo giao diện tương tác với người dùng. Mỗi một phần tử trong XAML (tag element) đại diện cho một đối tượng (Object). XAML giúp ta trực quan hóa giao diện cũng như có khả năng lưu trữ hiển thị Data Source cũng như Custom Object. Bạn có thể để ý là mỗi một Project bạn tạo ra đều có một file MainPage.xaml đó chính là màn hình khởi động mặc định khi chạy ứng dụng cho phép người sử dụng tương tác.

Microsoft đã tách thành 2 phần riêng biệt: Phần xaml để thiết kế phần xaml.cs để lập trình (có thể gọi là logic runtime) giúp ta nâng cao khả năng tùy biến các control. Bạn có thể tưởng tượng rằng XAML thực chất là một định dạng XML mà thôi (Có phần mở rộng là .xaml).

Ví dụ về trang MainPage.xaml:

[code language=”xml”]

&lt;phone:PhoneApplicationPage

x:Class=&quot;LearnXAML.MainPage&quot;

xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;

FontFamily=&quot;{StaticResource PhoneFontFamilyNormal}&quot;

FontSize=&quot;{StaticResource PhoneFontSizeNormal}&quot;

Foreground=&quot;{StaticResource PhoneForegroundBrush}&quot;

SupportedOrientations=&quot;Portrait&quot; Orientation=&quot;Portrait&quot;

shell:SystemTray.IsVisible=&quot;True&quot;&gt;

&lt;/phone:PhoneApplicationPage&gt;

[/code]

  •  XAML Namespace?

Thường mỗi trang XAML có khai báo các namespace với một prefix ngắn gọn mang tính gợi nhớ để giúp Ta dễ dàng lập trình cũng như truy suất các thông tin trong namespace.

Theo Tui thì có 2 lý do chính để chúng ta tạo namespace và đặt prefix name cho Namespace:

– Do tên Namespace quá dài và phức tạp.

– Do có nhiều lớp trùng tên nên cần đưa vào các Namespace khác nhau.

Việc sử dụng prefix (có thể hiệu đại khái là tên gì đó ngắn gọn đại diện cho Namespace) sẽ giúp chúng ta lập trình nhanh chóng.

Nếu quan sát kỹ ngay trang MainPage.xaml là bạn có thể phát hiện ra cách khai báo sử dụng namespace, prefix:

wp6_1Ta có cú pháp như sau:

wp6_2xmlns là từ khóa (tức là phải viết y xì vậy đó)

clr-namespace là từ khóa (tức là phải viết y xì vậy đó)

local là prefix (tức là tên ta muốn đặt đại diện cho CLR Namespace Name), thường thì ta nên đặt mang tính gợi nhớ.

Bạn phải nhớ công thức này để qua các bài tập tiếp theo Tui sẽ sử dụng lại (cụ thể trong việc sử dụng thư viện Windows Phone Toolkit)

Sau đây Tui sẽ làm một ví dụ về cách tạo 2 lớp MyButton (tức là cùng tên) nhưng nằm ở 2 namespace khác nhau, sau đó Tui sẽ minh họa cách sử dụng 2 MyButton này với công thức ở trên.

Lớp MyButton thứ nhất (mặc định có nền đỏ) tui cho nó nằm trong namespace tên tranduythanh.com, Lớp MyButton thứ nhì (mặc định có màu Xanh) tui cho nó nằm trong namespace caphe.net.

Tức là 2 MyButton này tui sẽ kế thừa từ Button của Microsoft và hiệu chỉnh lại theo thông số mà tui mô tả ở trên.

Bạn new một Project tên LearnNamespace:

wp6_3Bạn thấy ở trên Tui tô xanh file MyButton.cs (File này sẽ chứa 2 class MyButton nằm ở 2 Namespace khác nhau), bạn tạo file này như sau:

– Bấm chuột phải vào Project/ Chọn Add/ Class…:

wp6_4Màn hình Add New Item hiển thị ra như bên dưới, bạn chọn Class ở mục số 1, rồi đặt tên cho tập tin là MyButton ở mục số 2, sau đó bấm nút Add để tạo file này.

wp6_5Sau khi tạo xong bạn Double click vào MyButton.cs để tiến hành coding như sau:

[code language=”csharp”]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

//thêm thư viện này để kế thừa Button
using System.Windows.Controls;
//Thêm thư viện này để sử dụng SolidColorBrush
using System.Windows.Media;

namespace tranduythanh.com
{
public class MyButton:Button
{
public MyButton()
{
SolidColorBrush brush = new SolidColorBrush(Colors.Red);
this.Width = 400;
this.Height = 200;
this.Background = brush;
}
}
}
namespace caphe.net
{
public class MyButton:Button
{
public MyButton()
{
SolidColorBrush brush = new SolidColorBrush(Colors.Blue);
this.Width = 300;
this.Height = 100;
this.Background = brush;
}
}
}

[/code]

Bạn thấy đấy ở trên có 2 MyButton trùng tên nhưng nằm ở 2 namespace khác nhau.

Để sử dụng 2 lớp MyButton này ta tiến hành biên dịch Project–> 2 MyButton này sẽ tự động được đưa vào thanh Toolbox và bạn chỉ việc dùng chuột túm kéo thả nó vào giao diện Windows Phone là OKê.

wp6_6Bây giờ bạn kéo thả MyButton (tranduythanh.com) và MyButton (caphe.net) vào giao diện Windows Phone (giống như là kéo 1 control bất kỳ), ta xem kết quả:

wp6_7Bạn quan sát hình trên:

Mục số 1 là nơi mà 2 MyButton được Khai sinh ra trên cõi đời này sau khi bạn Build project.

Mục số 2 là nơi mà bạn kéo thả 2 MyButton này vào (quan sát thấy màu và kích thước mặc định được tạo trong Constructor)

Mục số 3: Là cách khai báo sử dụng Namespace được hệ thống tự động tạo ra (trong trường hợp này nó sẽ tự động lấy cái thành phần cuối cùng đằng sau dấu chấm “.” làm prefix, ví dụ: tranduythanh.com thì lấy com, caphe.net thì lấy net. Dĩ nhiên không phải trường hợp nào nó cũng tự động tạo ra cho ta như thế này mà có những trường hợp ta phải tự gõ theo công thức (đề cập ở phần trên).

Mục số 4 là nơi mà XAML coding của MyButton được phát sinh tùy thuộc vào cách bạn thay đổi kích thước cũng như vị trí của nó,  bạn để ý có prefix là com net đằng trước mỗi element MyButton –> truy suất đúng đối tượng nằm trong namespace nào. (Bạn có thể đặt tên prefix khác ).

  •  Các cú pháp XAML Attribute?

Bạn biết rằng XAML tương tự như XML nên cách khai báo đối tượng cũng giống như vậy:

<[Tên thành phần] [Tên thuộc tính]=[giá trị] ></ [Tên thành phần]>

Hoặc

<[Tên thành phần] [Tên thuộc tính]=[giá trị] />

Ví Dụ:

<TextBlock Text=”page name” FontSize =”15″ />

XAML có một số cú pháp được sử dụng để khai báo cho các thuộc tính như sau (Bạn cần biết các thuật ngữ kỹ thuật của nó để dễ đọc tài liệu tiếng anh):

– Object element syntax

– Attribute syntax

– Property Element Syntax

– Attached Property Syntax

– Markup Extensions

Việc nắm rõ từng loại cú pháp giúp ta dễ dàng thiết kế cũng như lập trình. Tui sẽ trình bày và cho ví dụ sơ qua về 5 loại cú pháp thường sử dụng ở trên:

Object element syntax:

Cú pháp này thường được viết như sau:

<Button> Click Me </Button>

Attribute syntax:

wp6_8 Bạn xem đấy chỗ nào Attribute là Attribute….. thường ghi các giá trị RẤT ĐƠN GIẢN được gán cho mỗi thuộc tính (Attribute) thì ta sẽ sử dụng Attribute syntax. Tuy nhiên có những trường hợp giá trị của một thuộc tính nào đó lại vô cùng phức tạp phải kết hợp nhiều thông số thì Attribute syntax không còn áp dụng được nữa, mà nó phải sử dụng Property Element Syntax.

Property Element Syntax:

Khi giá trị phức tạp ta phải sử dụng cú pháp này. Tuy nhiên Tui sẽ đưa ra 2 ví dụ đơn giản và phức tạp để các bạn dễ hình dung:

wp6_9Hay phức tạp phối hợp nhiều màu:

wp6_10Như vậy Ta có thể sử dụng Property Element Syntax cho cả trường hợp đơn giản và phức tạp, tuy nhiên với những trường hợp đơn giản thì không cần thiết vì nó tốn thời gian.

Attached Property Syntax:

Một số thuộc tính ở element cha được đính kèm vào element con (hoặc ở đâu đó cũng được), ta thường thấy nhất là trong Grid Layout.

wp6_11– Markup Extensions:

– Các giá trị của thuộc tính được đặt trong cặp ngoặc { }. Thường nó được dùng để tham chiếu tới Resource hoặc Binding dữ liệu (ta sử dụng rất nhiều).

wp6_12Như vậy Tui đã trình bay xong Phần 1, qua bài 7 Tui sẽ trình bày về Phần 2) Cách sử dụng Brush. Các bạn nên đọc kỹ và thực hành lại các ví dụ mẫu ở trên để dễ dàng hiểu tiếp các phần còn lại.

Chúc các bạn thành công.