Bước 1: Tạo một trang HTML mới

• Mở Dreamweaver và chọn File -> New -> Blank Page -> HTML
• Nhập tên trang web của bạn và chọn một vị trí để lưu trang

Bước 2: Thiết kế giao diện trang Liên hệ

• Thiết kế giao diện trang Liên hệ bằng cách sử dụng các công cụ và tính năng của Dreamweaver. Bạn có thể chèn các phần tử HTML cơ bản như Text Field, Textarea, Checkbox, Radio Button, Submit Button, v.v.
• Thiết kế có thể dựa trên các mẫu sẵn có hoặc tự tạo một giao diện phù hợp với nhu cầu của bạn.

Bước 3: Thêm biểu mẫu liên hệ

• Chọn Insert -> Form -> Form trong menu hoặc sử dụng thanh công cụ để chèn một biểu mẫu liên hệ.
• Sau đó, chèn các trường và phần tử vào biểu mẫu của bạn. Đặt tên cho từng phần tử để sau này có thể xử lý dữ liệu được gửi đến từ trang liên hệ.

Bước 4: Thiết lập thư điện tử đến địa chỉ email của bạn

• Chọn Form -> Form Properties và nhập địa chỉ email của bạn vào trường E-mail To.

Bước 5: Đưa trang Liên hệ lên máy chủ web

• Lưu trang Liên hệ và chuyển nó lên máy chủ web của bạn. Trang web của bạn cần phải có khả năng xử lý các biểu mẫu gửi từ trang Liên hệ.

Bước 6: Kiểm tra và kiểm tra trang Liên hệ

• Kiểm tra trang Liên hệ để đảm bảo rằng các phần tử và biểu mẫu hoạt động đúng cách.
• Gửi thử một email từ biểu mẫu và kiểm tra xem email đã được gửi thành công hay chưa.

Lưu ý: Để có thể xử lý dữ liệu được gửi từ trang Liên hệ, bạn cần có một máy chủ web có hỗ trợ PHP hoặc CGI. Nếu bạn không có kinh nghiệm trong xây dựng một máy chủ web, bạn có thể sử dụng các công cụ và dịch vụ như Google Forms hoặc Wufoo để tạo một biểu mẫu liên hệ miễn phí và xử lý dữ liệu được gửi đến.

Tạo một trang HTML mới

Đây là hướng dẫn cơ bản để tạo một trang HTML mới bằng Dreamweaver:

Bước 1: Mở Dreamweaver và chọn “File” -> “New” -> “Blank Page” -> “HTML”. Bước 2: Chọn vị trí lưu trang web của bạn và nhập tên trang web vào ô “Name”. Bước 3: Chọn định dạng HTML mà bạn muốn sử dụng. HTML5 là định dạng được khuyến khích sử dụng hiện nay. Bước 4: Nhấn “Create” để tạo trang HTML mới.

Sau khi tạo trang HTML mới, bạn có thể thiết kế giao diện, chèn các phần tử HTML và CSS, và lưu trang để đưa lên máy chủ web. Lưu ý rằng để xây dựng một trang web hoàn chỉnh, bạn cần phải học và hiểu rõ các ngôn ngữ lập trình web như HTML, CSS, và JavaScript.

Thiết kế giao diện trang Liên hệ

Để thiết kế giao diện trang Liên hệ trong Dreamweaver, bạn có thể làm theo các bước sau:

Bước 1: Chọn một mẫu hoặc tạo giao diện của riêng bạn.

• Nếu bạn không muốn thiết kế giao diện từ đầu, Dreamweaver có sẵn một số mẫu trang web. Chọn File -> New -> Starter Templates và chọn một mẫu giao diện phù hợp với trang web của bạn.
• Nếu bạn muốn tạo giao diện của riêng mình, hãy bắt đầu bằng cách tạo một bảng (table) để định vị các phần tử trên trang web của bạn. Sử dụng tính năng drag-and-drop trong Dreamweaver để kéo các phần tử vào bảng và chỉnh sửa kích thước và vị trí của chúng cho phù hợp.

Bước 2: Thêm các phần tử cơ bản vào trang web.

• Chèn các phần tử HTML cơ bản vào trang web của bạn bằng cách sử dụng thanh công cụ hoặc bằng cách gõ mã HTML trực tiếp vào trang.
• Các phần tử HTML phổ biến nhất được sử dụng trên trang Liên hệ là Text Field (để nhập thông tin như tên, địa chỉ email, số điện thoại), Textarea (để nhập nội dung tin nhắn), Checkbox (để chọn các tùy chọn nhất định), Radio Button (để chọn một trong các tùy chọn), và Submit Button (để gửi biểu mẫu).

Bước 3: Thêm các phần tử CSS để trang web của bạn trông đẹp hơn.

• Sử dụng CSS để tùy chỉnh giao diện của trang web của bạn. Bạn có thể sử dụng CSS để định dạng font, màu sắc, kích thước, vị trí, hiển thị ẩn, v.v.
• Sử dụng các tính năng CSS của Dreamweaver để thêm các kiểu tùy chỉnh cho các phần tử trên trang web của bạn.

Bước 4: Kiểm tra và kiểm tra trang web của bạn.

• Kiểm tra trang web của bạn để đảm bảo rằng các phần tử và giao diện hoạt động đúng cách.
• Tạo một mẫu thử và gửi thử để đảm bảo rằng biểu mẫu Liên hệ hoạt động đúng cách.

Thêm biểu mẫu liên hệ

Để thêm biểu mẫu liên hệ vào trang web của bạn, bạn có thể làm theo các bước sau đây:

Bước 1: Chọn nơi để đặt biểu mẫu liên hệ trên trang web của bạn. Bạn có thể đặt biểu mẫu trên bất kỳ vị trí nào trên trang web của bạn, nhưng thông thường nó sẽ được đặt trên trang Liên hệ.

Bước 2: Thêm biểu mẫu vào trang web của bạn.

• Chọn “Insert” từ thanh công cụ và chọn “Form” -> “Form”.
• Sau đó, chọn các phần tử biểu mẫu mà bạn muốn thêm vào trang của mình, chẳng hạn như Text Field, Textarea, Checkbox, Radio Button và Submit Button.
• Các phần tử này có thể được kéo và thả vào vị trí mong muốn trên biểu mẫu liên hệ của bạn.

Bước 3: Tùy chỉnh biểu mẫu liên hệ của bạn bằng CSS.

• Sử dụng CSS để tùy chỉnh giao diện của biểu mẫu liên hệ. Bạn có thể sử dụng CSS để định dạng font, màu sắc, kích thước, vị trí, hiển thị ẩn, v.v.
• Sử dụng tính năng CSS của Dreamweaver để thêm các kiểu tùy chỉnh cho các phần tử trong biểu mẫu liên hệ của bạn.

Bước 4: Thiết lập hành động của biểu mẫu liên hệ.

• Chọn biểu mẫu liên hệ của bạn và chọn “Properties” từ thanh công cụ.
• Trong các thuộc tính, hãy thiết lập hành động của biểu mẫu liên hệ của bạn bằng cách chỉ định một URL hoặc một script xử lý biểu mẫu để xử lý các thông tin được gửi.

Bước 5: Kiểm tra và kiểm tra biểu mẫu liên hệ của bạn.

• Kiểm tra biểu mẫu liên hệ của bạn để đảm bảo rằng các phần tử và giao diện hoạt động đúng cách.
• Tạo một mẫu thử và gửi thử để đảm bảo rằng biểu mẫu Liên hệ hoạt động đúng cách.

Thiết lập thư điện tử đến địa chỉ email của bạn

Để thiết lập thư điện tử đến địa chỉ email của bạn, bạn cần có một tài khoản email đang hoạt động và đăng nhập vào tài khoản đó để thực hiện các bước sau:

Bước 1: Mở ứng dụng email của bạn.

• Nếu bạn đang sử dụng Gmail, truy cập vào trang Gmail.com và đăng nhập vào tài khoản của bạn.
• Nếu bạn đang sử dụng ứng dụng email trên thiết bị của mình, mở ứng dụng và đăng nhập vào tài khoản của bạn.

Bước 2: Chọn “Cài đặt” hoặc “Settings”.

• Nếu bạn đang sử dụng Gmail, hãy nhấp vào biểu tượng bánh răng ở góc phải trên cùng của trang web và chọn “Cài đặt”.
• Nếu bạn đang sử dụng ứng dụng email trên thiết bị của mình, hãy nhấn vào biểu tượng menu (ba dòng ngang) và chọn “Cài đặt”.

Bước 3: Chọn “Chuyển tiếp và POP/IMAP”.

• Trong trang cài đặt, tìm và chọn “Chuyển tiếp và POP/IMAP” hoặc “Forwarding and POP/IMAP”.

Bước 4: Chọn “Thêm chuyển tiếp” hoặc “Add forwarding”.

• Trong phần “Chuyển tiếp”, hãy chọn “Thêm chuyển tiếp” hoặc “Add forwarding”.

Bước 5: Nhập địa chỉ email mà bạn muốn chuyển tiếp thư đến.

• Trong hộp thoại mới, nhập địa chỉ email của bạn vào trường “Địa chỉ chuyển tiếp tới” hoặc “Forward to address”.

Bước 6: Chọn các tùy chọn chuyển tiếp khác nếu cần thiết.

• Bạn có thể chọn các tùy chọn chuyển tiếp khác nếu cần thiết, chẳng hạn như chuyển tiếp tất cả thư hoặc chỉ chuyển tiếp thư từ một người cụ thể.

Bước 7: Lưu các thay đổi và hoàn thành thiết lập.

• Nhấn nút “Lưu” hoặc “Save” để lưu các thay đổi và hoàn thành thiết lập.

Sau khi bạn hoàn thành các bước này, tất cả thư đến sẽ được chuyển tiếp đến địa chỉ email của bạn theo các tùy chọn mà bạn đã chọn.

Đưa trang Liên hệ lên máy chủ web

Để đưa trang Liên hệ lên máy chủ web, bạn cần có quyền truy cập vào máy chủ hoặc tài khoản quản trị web của bạn. Sau đó, bạn có thể thực hiện các bước sau:

Bước 1: Chuẩn bị tập tin trang Liên hệ

• Bạn cần chuẩn bị tập tin trang Liên hệ của mình, bao gồm tất cả các tệp liên quan như HTML, CSS, JavaScript, hình ảnh, các tệp dữ liệu, v.v. Bạn cũng cần đảm bảo rằng tên tệp và đường dẫn của chúng là chính xác.

Bước 2: Đăng nhập vào tài khoản quản trị web

• Mở trình duyệt web của bạn và truy cập vào trang quản trị web của bạn bằng cách nhập địa chỉ IP hoặc tên miền của máy chủ web vào thanh địa chỉ của trình duyệt. Sau đó, nhập thông tin đăng nhập của bạn để truy cập vào tài khoản quản trị web của bạn.

Bước 3: Tải lên tập tin trang Liên hệ lên máy chủ

• Tìm đến thư mục trên máy chủ mà bạn muốn đưa trang Liên hệ lên và chọn “Tải lên” hoặc “Upload”. Chọn tệp trang Liên hệ của bạn từ máy tính của bạn và tải lên lên máy chủ.

Bước 4: Kiểm tra trang Liên hệ trên trình duyệt web

• Mở trình duyệt web của bạn và truy cập vào địa chỉ của trang Liên hệ trên máy chủ web của bạn để kiểm tra xem trang đã được đưa lên thành công hay chưa.

Lưu ý rằng cách tải lên tập tin lên máy chủ web có thể khác nhau tùy thuộc vào máy chủ web của bạn và phần mềm quản lý tập tin mà bạn đang sử dụng.

Kiểm tra và kiểm tra trang Liên hệ

Sau khi bạn đã đưa trang Liên hệ lên máy chủ web, bạn cần kiểm tra và kiểm tra trang để đảm bảo rằng nó hoạt động chính xác. Các bước sau đây giúp bạn thực hiện điều này:

Bước 1: Mở trình duyệt web của bạn và nhập địa chỉ của trang Liên hệ.

• Nhập địa chỉ của trang Liên hệ vào thanh địa chỉ của trình duyệt web để kiểm tra xem trang đã được đưa lên thành công hay chưa.

Bước 2: Kiểm tra tính năng của biểu mẫu liên hệ.

• Nhập thông tin vào biểu mẫu liên hệ và gửi nó. Đảm bảo rằng thông tin đang hoạt động chính xác và được gửi đến địa chỉ email mà bạn đã thiết lập trước đó.

Bước 3: Kiểm tra tính năng của các liên kết và nút chuyển hướng.

• Nhấp vào các liên kết và nút chuyển hướng để đảm bảo rằng chúng đang hoạt động chính xác và chuyển hướng đến các trang đích như mong đợi.

Bước 4: Kiểm tra độ phù hợp của giao diện.

• Kiểm tra giao diện của trang để đảm bảo rằng nó phù hợp với nhu cầu của bạn và trang trông chuyên nghiệp và hấp dẫn.

Bước 5: Kiểm tra và sửa lỗi.

• Kiểm tra các thông báo lỗi trên trang để đảm bảo rằng không có lỗi xuất hiện trên trang. Nếu có lỗi, sửa chúng để đảm bảo rằng trang hoạt động chính xác và không có lỗi.

Bước 6: Thử nghiệm trên các thiết bị khác nhau.

• Kiểm tra trang trên các thiết bị khác nhau, bao gồm máy tính để bàn, máy tính xách tay, điện thoại di động và máy tính bảng để đảm bảo rằng trang hoạt động chính xác trên các thiết bị này.

Nếu bạn phát hiện bất kỳ lỗi nào hoặc điều gì không hoạt động đúng trên trang Liên hệ của bạn, hãy sửa chúng để đảm bảo rằng trang hoạt động chính xác và không có lỗi.

The post Hướng dẫn tạo trang liên hệ công cụ web Dreamweaver appeared first on Dongthoigian.net.

• Trong liên kết dữ liệu, dữ liệu của bạn không hiển thị trên màn hình và bạn không biết tại sao
• Hoặc một vấn đề có liên quan đến bố cục phức tạp.
• Hoặc vấn đề căn chỉnh hoặc các vấn đề về màu lề, lớp phủ, v.v. với một số mẫu mở rộng như ListBox và hộp tổ hợp.

Gỡ lỗi trong XAML là điều bạn thường làm để kiểm tra xem các ràng buộc của bạn có hoạt động hay không và nếu nó không hoạt động, thì hãy kiểm tra xem có gì sai không. Rất tiếc, không thể thiết lập các điểm ngắt trong liên kết XAML ngoại trừ trong Silverlight, nhưng chúng tôi có thể sử dụng cửa sổ Đầu ra để kiểm tra lỗi liên kết dữ liệu. Hãy xem mã XAML sau đây để tìm lỗi trong liên kết dữ liệu.

<Window x:Class = "DataBindingOneWay.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Grid>
      <StackPanel Name = "Display">
         <StackPanel Orientation = "Horizontal" Margin = "50, 50, 0, 0">
            <TextBlock Text = "Name: " Margin = "10" Width = "100"/>
            <TextBlock Margin = "10" Width = "100" Text = "{Binding FirstName}"/>
         </StackPanel>
			
         <StackPanel Orientation = "Horizontal" Margin = "50,0,50,0">
            <TextBlock Text = "Title: " Margin = "10" Width = "100"/>
            <TextBlock Margin = "10" Width="100" Text = "{Binding Title}" />
         </StackPanel>
      </StackPanel>
   </Grid>
	
</Window>

Thuộc tính văn bản của hai khối văn bản được đặt tĩnh thành “Tên” và “Tiêu đề”, trong khi thuộc tính Văn bản của hai khối văn bản khác được liên kết với “Tên đầu tiên” và “Tiêu đề”. Nhưng các biến lớp được cố ý lấy làm Tên và Tiêu đề trong lớp Nhân viên là tên biến không chính xác. Bây giờ chúng ta hãy cố gắng tìm hiểu nơi chúng ta có thể tìm thấy loại lỗi này khi đầu ra mong muốn không được hiển thị.

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

namespace DataBindingOneWay {
   public class Employee {
      public string Name { get; set; } 
      public string Title { get; set; }
		
      public static Employee GetEmployee() {
         var emp = new Employee() {
            Name = "Ali Ahmed", 
            Title = "Developer"
         };
         return emp; 
      }
   }
}

Đây là cách triển khai của lớp MainWindow trong mã C # –

using System; 
using System.Windows; 
using System.Windows.Controls;

namespace DataBindingOneWay {
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window {
      public MainWindow() {
         InitializeComponent(); 
         DataContext = Employee.GetEmployee(); 
      }
   }
}

Hãy chạy ứng dụng này và bạn có thể thấy ngay trong MainWindow của chúng tôi rằng chúng tôi đã liên kết thành công với Tiêu đề của đối tượng Nhân viên đó nhưng tên không bị ràng buộc.

Để kiểm tra điều gì đã xảy ra với tên, hãy nhìn vào cửa sổ đầu ra nơi có rất nhiều nhật ký được tạo.

Cách dễ nhất để tìm lỗi là chỉ cần tìm kiếm lỗi và bạn sẽ tìm thấy lỗi được đề cập bên dưới có nội dung “Lỗi đường dẫn BindingExpression: không tìm thấy thuộc tính ‘FirstName’ trên ‘đối tượng’ ” Employe”

System.Windows.Data Error: 40 : BindingExpression path error: 'FirstName'
   property not found on 'object' ''Employee' (HashCode = 11611730)'.
BindingExpression:Path = FirstName; 
DataItem = 'Employee' (HashCode = 11611730); target element is 'TextBlock' (Name = ''); 
target property is 'Text' (type 'String')

Điều này chỉ ra rõ ràng rằng FirstName không phải là thành viên của lớp Nhân viên, vì vậy nó sẽ giúp khắc phục loại sự cố này trong ứng dụng của bạn.

Khi bạn thay đổi FirstName thành Name một lần nữa, bạn sẽ thấy đầu ra mong muốn.

Công cụ gỡ lỗi giao diện người dùng cho XAML

Công cụ gỡ lỗi giao diện người dùng cho XAML được giới thiệu với Visual Studio 2015 để kiểm tra mã XAML trong thời gian chạy. Với sự trợ giúp của các công cụ này, mã XAML được trình bày dưới dạng cây trực quan của ứng dụng WPF đang chạy của bạn và cả các thuộc tính phần tử giao diện người dùng khác nhau trong cây. Để bật công cụ này, hãy làm theo các bước dưới đây.

• Bước 1 – Đi tới menu Công cụ và chọn Tùy chọn từ menu Công cụ.
• Bước 2 – Bạn sẽ thấy hộp thoại sau.

• Bước 3 – Đi tới Tùy chọn chung trong mục Gỡ lỗi ở phía bên trái.
• Bước 4 – Kiểm tra tùy chọn được đánh dấu, tức là “Bật công cụ gỡ lỗi giao diện người dùng cho XAML”
• Bước 5 – Nhấn nút OK.

Bây giờ hãy chạy bất kỳ ứng dụng XAML nào hoặc sử dụng mã XAML sau:

<Window x:Class = "XAMLTestBinding.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <StackPanel>
      <ComboBox Name = "comboBox" Margin = "50" Width = "100">
         <ComboBoxItem Content = "Green"/>
         <ComboBoxItem Content = "Yellow" IsSelected = "True"/>
         <ComboBoxItem Content = "Orange" />
      </ComboBox>
		
      <TextBox Name = "textBox" Margin = "50" Width = "100" 
         Height = "23" VerticalAlignment = "Top" Text = "{
         Binding ElementName = comboBox, Path = SelectedItem.Content, 
         Mode = TwoWay, UpdateSourceTrigger = PropertyChanged}" 
         Background = "{Binding ElementName = comboBox, Path = SelectedItem.Content}"> 
      </TextBox>
   </StackPanel>
	
</Window>

Khi ứng dụng thực thi, nó sẽ hiển thị Cây trực quan nơi tất cả các phần tử được hiển thị trong một cây.

Cây Trực quan Trực tiếp này hiển thị cấu trúc bố cục hoàn chỉnh để hiểu vị trí các phần tử giao diện người dùng được đặt. Nhưng tùy chọn này chỉ khả dụng trong Visual Studio 2015. Nếu bạn đang sử dụng phiên bản Visual studio cũ hơn, thì bạn không thể sử dụng công cụ này; tuy nhiên có một công cụ khác có thể được tích hợp với Visual Studio chẳng hạn như XAML Spy cho Visual Studio. Bạn có thể tải xuống từ http://xamlspy.com/download . Chúng tôi khuyên bạn nên tải xuống công cụ này nếu bạn đang sử dụng phiên bản Visual Studio cũ hơn.

XAML – Điều khiển tùy chỉnh

XAML có một trong những tính năng mạnh mẽ nhất được cung cấp để tạo các điều khiển tùy chỉnh, giúp dễ dàng tạo các điều khiển có nhiều tính năng và có thể tùy chỉnh. Các điều khiển tùy chỉnh được sử dụng khi tất cả các điều khiển tích hợp do Microsoft cung cấp không đáp ứng các tiêu chí của bạn hoặc bạn không muốn trả tiền cho các điều khiển của bên ^{thứ 3.}

Trong chương này, bạn sẽ học cách tạo các điều khiển tùy chỉnh. Trước khi chúng ta bắt đầu xem xét Điều khiển tùy chỉnh, trước tiên chúng ta hãy xem nhanh một Điều khiển người dùng.

Kiểm soát người dùng

Kiểm soát người dùng cung cấp một kỹ thuật để thu thập và kết hợp các điều khiển tích hợp khác nhau với nhau và đóng gói chúng thành XAML có thể tái sử dụng. Kiểm soát của người dùng được sử dụng trong các trường hợp sau:

• Nếu điều khiển bao gồm các điều khiển hiện có, tức là, bạn có thể tạo một điều khiển duy nhất gồm nhiều điều khiển đã tồn tại.
• Nếu điều khiển không cần hỗ trợ cho chúng. User Controls không hỗ trợ các tùy chỉnh phức tạp, các mẫu điều khiển và cũng khó tạo kiểu.
• Nếu một nhà phát triển thích viết các điều khiển bằng cách sử dụng mô hình mã phía sau trong đó một chế độ xem và sau đó một mã trực tiếp được viết phía sau cho các trình xử lý sự kiện.
• Bạn sẽ không chia sẻ quyền kiểm soát của mình trên các ứng dụng.

Hãy lấy một ví dụ về Kiểm soát người dùng và làm theo các bước dưới đây:

Bước 1 – Tạo một dự án WPF mới và sau đó nhấp chuột phải vào giải pháp của bạn và chọn Thêm> Mục mới …

Bước 2 – Hộp thoại sau sẽ mở ra, bây giờ chọn User Control (WPF) và đặt tên là MyUserControl 

• Bước 3 – Nhấp vào nút Thêm và bạn sẽ thấy hai tệp mới (MyUserControl.xaml và MyUserControl.cs) sẽ được thêm vào giải pháp của bạn.

Dưới đây là mã XAML trong đó một nút và một hộp văn bản được tạo với một số thuộc tính trong tệp MyUserControl.xaml.

<UserControl x:Class = "XAMLUserControl.MyUserControl" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   mc:Ignorable = "d" d:DesignHeight = "300" d:DesignWidth = "300">
	
   <Grid>
      <TextBox Height = "23" HorizontalAlignment = "Left" 
         Margin = "80,49,0,0" Name = "txtBox" VerticalAlignment = "Top" Width = "200" />
      <Button Content = "Click Me" Height = "23" 
         HorizontalAlignment = "Left" Margin = "96,88,0,0" Name = "button" 
         VerticalAlignment = "Top" Width = "75" Click = "button_Click" />
   </Grid>
	
</UserControl>

Dưới đây là mã C # cho sự kiện nhấp vào nút trong tệp MyUserControl.cs cập nhật hộp văn bản.

using System; 
using System.Windows; 
using System.Windows.Controls;

namespace XAMLUserControl {
   /// <summary> 
      /// Interaction logic for MyUserControl.xaml
   /// </summary> 
	
   public partial class MyUserControl : UserControl {
      public MyUserControl() {
         InitializeComponent(); 
      }
      private void button_Click(object sender, RoutedEventArgs e) { 
         txtBox.Text = "You have just clicked the button"; 
      } 
   }
}

Đây là triển khai trong MainWindow.xaml để thêm quyền kiểm soát của người dùng.

<Window x:Class = "XAMLUserControl.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:control = "clr-namespace:XAMLUserControl" 
   Title = "MainWindow" Height = "350" Width = "525">
	
   <Grid>
      <control:MyUserControl/>
   </Grid>
	
</Window>

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau:

Bây giờ hãy nhấp vào nút “Click Me” và bạn sẽ thấy rằng văn bản hộp văn bản đã được cập nhật.

Kiểm soát tùy chỉnh

Điều khiển tùy chỉnh là một lớp cung cấp kiểu và mẫu riêng thường được định nghĩa trong generic.xaml . Các điều khiển tùy chỉnh được sử dụng trong các trường hợp sau,

• Nếu điều khiển không tồn tại và bạn phải tạo nó từ đầu.
• Nếu bạn muốn mở rộng hoặc thêm chức năng vào một điều khiển có sẵn bằng cách thêm một thuộc tính bổ sung hoặc một chức năng bổ sung để phù hợp với tình huống cụ thể của bạn.
• Nếu điều khiển của bạn cần hỗ trợ chủ đề và kiểu dáng.
• Nếu bạn muốn chia sẻ quyền kiểm soát của bạn trên các ứng dụng.

Hãy lấy một ví dụ về điều khiển tùy chỉnh và làm theo các bước dưới đây.

• Bước 1 – Tạo một dự án WPF mới và sau đó nhấp chuột phải vào giải pháp của bạn và chọn Thêm> Mục mới …

Bước 2 – Hộp thoại sau sẽ mở ra. Bây giờ chọn Custom Control (WPF) và đặt tên là MyCustomControl .

• Bước 3 – Nhấp vào nút Thêm và bạn sẽ thấy hai tệp mới (Themes / Generic.xaml và MyCustomControl.cs) sẽ được thêm vào giải pháp của bạn.

Dưới đây là mã XAML trong đó kiểu được đặt cho điều khiển tùy chỉnh trong tệp Generic.xaml.

<ResourceDictionary 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "clr-namespace:XAMLCustomControls">
	
   <Style TargetType = "{x:Type local:MyCustomControl}"
      BasedOn = "{StaticResource {x:Type Button}}"> 
      <Setter Property = "Background" Value = "LightSalmon"/>
      <Setter Property = "Foreground" Value = "Blue"/>
   </Style>
	
</ResourceDictionary>
Dưới đây là mã C # cho lớp MyCustomControl được kế thừa từ lớp nút và trong hàm tạo, nó ghi đè siêu dữ liệu.
using System; 
using System.Windows; 
using System.Windows.Controls;

namespace XAMLCustomControls {
   public class MyCustomControl : Button {
      static MyCustomControl() {
         DefaultStyleKeyProperty.OverrideMetadata(typeof(MyCustomControl), 
            new FrameworkPropertyMetadata(typeof(MyCustomControl)));
      }
   }
}

Dưới đây là triển khai sự kiện nhấp chuột điều khiển tùy chỉnh trong C # cập nhật văn bản của khối văn bản.

using System; 
using System.Windows; 
using System.Windows.Controls;

namespace XAMLCustomControls {
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window {
      public MainWindow() { 
         InitializeComponent(); 
      }
      private void customControl_Click(object sender, RoutedEventArgs e) {
         txtBlock.Text = "You have just click your custom control"; 
      } 
   }
}

Đây là cách triển khai trong MainWindow.xaml để thêm điều khiển tùy chỉnh và một TextBlock.

<Window x:Class = "XAMLCustomControls.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:control = "clr-namespace:XAMLCustomControls" Title = "MainWindow"
   Height = "350" Width = "604">
	
   <StackPanel>
      <control:MyCustomControl x:Name = "customControl" 
         Content = "Click Me" Width = "70" Margin = "10" Click = "customControl_Click"/>
      <TextBlock Name = "txtBlock" Width = "250" Height = "30"/>
   </StackPanel>
	
</Window>

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau. Quan sát đầu ra có chứa một điều khiển tùy chỉnh là một nút tùy chỉnh.

Bây giờ hãy nhấp vào nút tùy chỉnh. Bạn sẽ thấy rằng văn bản khối văn bản được cập nhật.

The post XAML – Gỡ lỗi appeared first on Dongthoigian.net.

<Application x:Class = "Styles.App" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   StartupUri = "MainWindow.xaml">
	
   <Application.Resources>
      <Style TargetType = "TextBlock">
         <Setter Property = "FontSize" Value = "24" />
         <Setter Property = "Margin" Value = "5" />
         <Setter Property = "FontWeight" Value = "Bold" />
      </Style>
		
      <Style TargetType = "TextBox">
         <Setter Property = "HorizontalAlignment" Value = "Left" />
         <Setter Property = "FontSize" Value = "24" />
         <Setter Property = "Margin" Value = "5" />
         <Setter Property = "Width" Value = "200" />
         <Setter Property = "Height" Value = "40" />
      </Style>
   </Application.Resources>
	
</Application>

Đây là mã XAML trong đó các khối văn bản và hộp văn bản được tạo.

<Window x:Class = "Styles.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition Height = "Auto" />
         <RowDefinition Height = "Auto" />
         <RowDefinition Height = "Auto" />
         <RowDefinition Height = "*" />
      </Grid.RowDefinitions>
		
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width = "*" />
         <ColumnDefinition Width = "2*" />
      </Grid.ColumnDefinitions>
		
      <TextBlock Text = "First Name: "/>
      <TextBox Name = "FirstName" Grid.Column = "1" />
      <TextBlock Text = "Last Name: " Grid.Row = "1" />
      <TextBox Name = "LastName" Grid.Column = "1" Grid.Row = "1" />
      <TextBlock Text = "Email: " Grid.Row = "2" />
      <TextBox Name = "Email" Grid.Column = "1" Grid.Row = "2"/>
   </Grid>
	
</Window>

Khi đoạn mã trên được biên dịch và thực thi, nó sẽ tạo ra kết quả sau. Quan sát rằng đầu ra vẫn giống hệt nhau.

XAML – Trình kích hoạt

Về cơ bản, trình kích hoạt cho phép bạn thay đổi giá trị thuộc tính hoặc thực hiện các hành động dựa trên giá trị của thuộc tính. Vì vậy, về cơ bản, nó cho phép bạn thay đổi động diện mạo và / hoặc hành vi của điều khiển mà không cần phải tạo mới.

Các trình kích hoạt được sử dụng để thay đổi giá trị của bất kỳ thuộc tính nhất định nào, khi các điều kiện nhất định được thỏa mãn. Các trình kích hoạt thường được định nghĩa trong một kiểu hoặc trong thư mục gốc của tài liệu được áp dụng cho điều khiển cụ thể đó. Có ba loại trình kích hoạt –

• Kích hoạt thuộc tính
• Kích hoạt dữ liệu
• Trình kích hoạt sự kiện

Kích hoạt thuộc tính

Trong trình kích hoạt thuộc tính, khi một thay đổi xảy ra trong một thuộc tính, nó sẽ mang lại thay đổi ngay lập tức hoặc thay đổi động trong một thuộc tính khác. Ví dụ: bạn có thể sử dụng trình kích hoạt thuộc tính nếu bạn muốn thay đổi giao diện của nút khi chuột qua nút.

Thí dụ

Ví dụ sau minh họa cách thay đổi màu nền trước của một nút khi chuột vào vùng của nó.

<Window x:Class = "XAMLPropertyTriggers.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Window.Resources>
      <Style x:Key = "TriggerStyle" TargetType = "Button">
         <Setter Property = "Foreground" Value = "Blue" />
         <Style.Triggers>
            <Trigger Property = "IsMouseOver" Value = "True">
               <Setter Property = "Foreground" Value = "Green" />
            </Trigger> 
         </Style.Triggers>
      </Style>
   </Window.Resources>
	
   <Grid>
      <Button Width = "100" Height = "70" Style = "{StaticResource TriggerStyle}" 
         Content = "Trigger"/>
   </Grid>
	
</Window>

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau:

Khi chuột vào vùng nút, màu nền trước sẽ chuyển thành màu xanh lục.

Kích hoạt dữ liệu

Một trình kích hoạt dữ liệu thực hiện một số hành động khi dữ liệu bị ràng buộc thỏa mãn một số điều kiện. Hãy xem đoạn mã XAML sau, trong đó hộp kiểm và khối văn bản được tạo với một số thuộc tính. Khi hộp kiểm được chọn, nó sẽ thay đổi màu nền trước thành màu đỏ.

<Window x:Class = "XAMLDataTrigger.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "Data Trigger" Height = "350" Width = "604">
	
   <StackPanel HorizontalAlignment = "Center">
      <CheckBox x:Name = "redColorCheckBox" Content = "Set red as foreground color" Margin = "20"/>
		
      <TextBlock Name = "txtblock" VerticalAlignment = "Center" 
         Text = "Event Trigger" FontSize = "24" Margin = "20">
         <TextBlock.Style>
            <Style>
               <Style.Triggers>
                  <DataTrigger Binding = "{Binding ElementName = redColorCheckBox, Path = IsChecked}" 
                     Value = "true">
                     <Setter Property = "TextBlock.Foreground" Value = "Red"/>
                     <Setter Property = "TextBlock.Cursor" Value = "Hand" />
                  </DataTrigger>
               </Style.Triggers>
            </Style>
         </TextBlock.Style>
      </TextBlock>
   </StackPanel>
	
</Window>

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau:

Khi hộp kiểm được chọn, màu nền trước của khối văn bản sẽ chuyển thành màu đỏ.

Trình kích hoạt sự kiện

Trình kích hoạt sự kiện thực hiện một số hành động khi một sự kiện cụ thể được kích hoạt. Nó thường được sử dụng để thực hiện một số hoạt ảnh như DoubleAnimation, ColorAnimation, v.v. Khối mã sau tạo một nút đơn giản. Khi sự kiện nhấp chuột được kích hoạt, nó sẽ mở rộng chiều rộng và chiều cao của nút.

<Window x:Class = "XAMLEventTrigger.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Grid>
      <Button Content = "Click Me" Width = "60" Height = "30">
         <Button.Triggers>
            <EventTrigger RoutedEvent = "Button.Click">
               <EventTrigger.Actions>
                  <BeginStoryboard>
                     <Storyboard>
                     
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Width" Duration = "0:0:4">
                           <LinearDoubleKeyFrame Value = "60" KeyTime = "0:0:0"/>
                           <LinearDoubleKeyFrame Value = "120" KeyTime = "0:0:1"/>
                           <LinearDoubleKeyFrame Value = "200" KeyTime = "0:0:2"/>
                           <LinearDoubleKeyFrame Value = "300" KeyTime = "0:0:3"/>
                        </DoubleAnimationUsingKeyFrames>
							
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Height" Duration = "0:0:4">
                           <LinearDoubleKeyFrame Value = "30" KeyTime = "0:0:0"/>
                           <LinearDoubleKeyFrame Value = "40" KeyTime = "0:0:1"/>
                           <LinearDoubleKeyFrame Value = "80" KeyTime = "0:0:2"/>
                           <LinearDoubleKeyFrame Value = "150" KeyTime = "0:0:3"/>
                        </DoubleAnimationUsingKeyFrames>
							
                     </Storyboard>
                  </BeginStoryboard>
               </EventTrigger.Actions>
            </EventTrigger>
         </Button.Triggers>
      </Button>
   </Grid>
</Window>

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau:

Bây giờ, hãy nhấp vào nút và bạn sẽ thấy rằng nó sẽ bắt đầu mở rộng theo cả hai chiều.

XAML – Gỡ lỗi (xem thêm)

The post XAML – Mức độ ứng dụng appeared first on Dongthoigian.net.

• Trong kiểu, bạn chỉ có thể đặt các thuộc tính hiện có của một đối tượng như Chiều cao, Chiều rộng và Kích thước phông chữ.
• Chỉ có thể chỉ định hành vi mặc định của điều khiển.
• Nhiều thuộc tính có thể được thêm vào một kiểu duy nhất.

Các kiểu được sử dụng để tạo ra một cái nhìn thống nhất cho một tập hợp các điều khiển. Kiểu ngầm được sử dụng để áp dụng giao diện cho tất cả các điều khiển của một kiểu nhất định và đơn giản hóa ứng dụng.

Hãy tưởng tượng chúng ta có ba nút và tất cả chúng phải trông giống nhau – cùng chiều rộng và chiều cao, cùng cỡ chữ và cùng màu nền trước. Chúng ta có thể đặt tất cả các thuộc tính đó trên chính các phần tử nút và điều đó vẫn khá ổn đối với tất cả các nút như trong sơ đồ sau.

Nhưng trong một Ứng dụng ngoài đời thực, bạn thường sẽ có nhiều thứ hơn trong số này cần phải trông giống hệt nhau. Và tất nhiên, không chỉ các nút, bạn thường muốn các khối văn bản, hộp văn bản và hộp tổ hợp, v.v., trông giống nhau trên Ứng dụng của bạn. Chắc chắn phải có một cách tốt hơn để đạt được điều này – nó được gọi là tạo kiểu . Bạn có thể coi kiểu như một cách thuận tiện để áp dụng một tập hợp các giá trị thuộc tính cho nhiều phần tử như được minh họa trong sơ đồ sau.

Hãy xem ví dụ có ba nút được tạo trong XAML với một số thuộc tính.

<Window x:Class = "XAMLStyle.MainWindow" 
   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"
   xmlns:local = "clr-namespace:XAMLStyle" mc:Ignorable = "d" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel> 
      <Button Content = "Button1" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/>
      
      <Button Content = "Button2" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/>
      
      <Button Content = "Button3" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/> 
   </StackPanel> 
	
</Window>

Khi bạn nhìn vào đoạn mã trên, bạn sẽ thấy rằng đối với tất cả các nút, chiều cao, chiều rộng, màu nền trước, kích thước phông chữ và thuộc tính lề vẫn giữ nguyên. Khi đoạn mã trên được biên dịch và thực thi, nó sẽ hiển thị kết quả sau:

Bây giờ chúng ta hãy xem xét cùng một ví dụ, nhưng lần này, chúng ta sẽ sử dụng style .

<Window x:Class = "XAMLStyle.MainWindow" 
   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"
   xmlns:local = "clr-namespace:XAMLStyle" mc:Ignorable = "d" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Window.Resources> 
      <Style x:Key = "myButtonStyle" TargetType = "Button">
         <Setter Property = "Height" Value = "30"/> 
         <Setter Property = "Width" Value = "80"/> 
         <Setter Property = "Foreground" Value = "Blue"/> 
         <Setter Property = "FontSize" Value = "12"/> 
         <Setter Property = "Margin" Value = "10"/> 
      </Style>
   </Window.Resources> 
	
   <StackPanel> 
      <Button Content = "Button1" Style = "{StaticResource myButtonStyle}"/>
      <Button Content = "Button2" Style = "{StaticResource myButtonStyle}"/>
      <Button Content = "Button3" Style = "{StaticResource myButtonStyle}"/>
   </StackPanel>
	
</Window>

Kiểu được định nghĩa trong từ điển tài nguyên và mỗi kiểu có một mã định danh khóa duy nhất và một kiểu đích. Bên trong <style>, bạn có thể thấy rằng nhiều thẻ setter được xác định cho từng thuộc tính sẽ được bao gồm trong kiểu.

Trong ví dụ trên, tất cả các thuộc tính chung của mỗi nút hiện được xác định theo kiểu và sau đó kiểu được gán cho mỗi nút bằng một khóa duy nhất bằng cách đặt thuộc tính kiểu thông qua tiện ích mở rộng đánh dấu StaticResource.

Khi đoạn mã trên được biên dịch và thực thi, nó sẽ tạo ra cửa sổ sau đây là cùng một đầu ra.

Lợi ích của việc làm như thế này là rõ ràng ngay lập tức. Chúng ta có thể sử dụng lại style đó ở bất kỳ đâu trong phạm vi của nó và nếu chúng ta cần thay đổi nó, chúng ta chỉ cần thay đổi nó một lần trong định nghĩa style thay vì trên từng phần tử.

Ở cấp độ nào, một phong cách được xác định ngay lập tức sẽ giới hạn phạm vi của phong cách đó. Vì vậy, phạm vi, tức là nơi bạn có thể sử dụng kiểu, phụ thuộc vào nơi bạn đã xác định nó. Phong cách có thể được xác định ở các cấp độ sau:

XAML – Mức kiểm soát

Chỉ có thể áp dụng việc xác định kiểu ở cấp độ điều khiển cho điều khiển cụ thể đó. Dưới đây là ví dụ về mức điều khiển trong đó nút và TextBlock có kiểu riêng.

<Window x:Class = "XAMLControlLevelStyle.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "Control Level Styles" Height = "350" Width = "604">
	
   <StackPanel Margin = "10" VerticalAlignment = "Top"> 
      <TextBlock Text = "TextBlock">
         <TextBlock.Style> 
            <Style> 
               <Setter Property = "TextBlock.FontSize" Value = "24" />
               <Setter Property = "TextBlock.Width" Value = "400" />
               <Setter Property = "TextBlock.Height" Value = "40" />
               <Setter Property = "TextBlock.Background" Value = "Gray" />
               <Setter Property = "TextBlock.Margin" Value = "50" />
            </Style> 
         </TextBlock.Style>
      </TextBlock>
		
      <Button Content = "Button">
         <Button.Style> 
            <Style> 
               <Setter Property = "TextBlock.Width" Value = "100" />
               <Setter Property = "TextBlock.Height" Value = "40" />
               <Setter Property = "TextBlock.Margin" Value = "50" />
            </Style>
         </Button.Style> 
      </Button>
   </StackPanel>

</Window>

Khi đoạn mã trên được biên dịch và thực thi, nó sẽ tạo ra kết quả sau:

XAML – Mức bố cục

Chỉ có thể truy cập việc xác định kiểu ở bất kỳ cấp độ bố cục nào bởi bố cục đó và chỉ các thành phần con của nó. Dưới đây là ví dụ về mức bố cục trong đó cả ba nút đều có một kiểu chung.

<Window x:Class = "XAMLLayoutLevelStyle.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <StackPanel Margin = "10">
      <StackPanel.Resources>
         <Style TargetType = "Button">
            <Setter Property = "Foreground" Value = "Blue" />
            <Setter Property = "FontStyle" Value = "Italic" />
            <Setter Property = "Width" Value = "100" />
            <Setter Property = "Height" Value = "40" />
            <Setter Property = "Margin" Value = "10" />
         </Style>
      </StackPanel.Resources>
		
      <Button>Button 1</Button>
      <Button>Button 2</Button> 
      <Button Foreground = "Blue">Button 3</Button>
   </StackPanel>
	
</Window>

Khi đoạn mã trên được biên dịch và thực thi, nó sẽ tạo ra kết quả sau:

XAML – Cửa sổ

Tất cả các phần tử trên cửa sổ đó có thể truy cập được việc xác định kiểu ở cấp cửa sổ. Dưới đây là ví dụ về cấp cửa sổ trong đó cả ba khối văn bản và hộp văn bản có một kiểu chung.

<Window x:Class = "Styles.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Window.Resources>
      <Style TargetType = "TextBlock">
         <Setter Property = "FontSize" Value = "24" />
         <Setter Property = "Margin" Value = "5" />
         <Setter Property = "FontWeight" Value = "Bold" />
      </Style>
		
      <Style TargetType = "TextBox">
         <Setter Property = "HorizontalAlignment" Value = "Left" />
         <Setter Property = "FontSize" Value = "24" />
         <Setter Property = "Margin" Value = "5" />
         <Setter Property = "Width" Value = "200" />
         <Setter Property = "Height" Value = "40" />
      </Style>
   </Window.Resources>
	
   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition Height = "Auto" />
         <RowDefinition Height = "Auto" />
         <RowDefinition Height = "Auto" />
         <RowDefinition Height = "*" />
      </Grid.RowDefinitions>
		
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width = "*" />
         <ColumnDefinition Width = "2*" />
      </Grid.ColumnDefinitions>
		
      <TextBlock Text = "First Name: "/>
      <TextBox Name = "FirstName" Grid.Column = "1" />
      <TextBlock Text = "Last Name: " Grid.Row = "1" />
      <TextBox Name = "LastName" Grid.Column = "1" Grid.Row = "1" />
      <TextBlock Text = "Email: " Grid.Row = "2" />
      <TextBox Name = "Email" Grid.Column = "1" Grid.Row = "2"/>
   </Grid>
	
</Window>

Khi đoạn mã trên được biên dịch và thực thi, nó sẽ tạo ra kết quả sau:

XAML – Mức độ ứng dụng (xem thêm)

The post XAML – Thuộc Tính appeared first on Dongthoigian.net.

Nhiều lớp điều khiển giao diện người dùng được sử dụng trong XAML có nguồn gốc từ lớp DependencyObject và hỗ trợ các thuộc tính phụ thuộc. Mã XAML sau đây tạo một nút với một số thuộc tính.

<Window x:Class = "XAMLDependencyProperty.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "clr-namespace:XAMLDependencyProperty"
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Grid>
      <Button Height = "40" Width = "175" Margin = "10" Content = "Dependency Property">
         <Button.Style>
            <Style TargetType = "{x:Type Button}">
               <Style.Triggers> 
                  <Trigger Property = "IsMouseOver" Value = "True">
                     <Setter Property = "Foreground" Value = "Red" />
                  </Trigger>
               </Style.Triggers>
            </Style>
         </Button.Style>
      </Button>
   </Grid>
   
</Window>

Phần mở rộng đánh dấu x: Type trong XAML có chức năng tương tự như typeof () trong C #. Nó được sử dụng khi các thuộc tính được chỉ định có kiểu đối tượng, chẳng hạn như <Style TargetType = “{x: Type Button}”>

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra MainWindow sau. Khi chuột qua nút, nó sẽ thay đổi màu nền trước của nút. Khi con chuột rời khỏi nút, nó sẽ thay đổi trở lại màu ban đầu.

Sự khác biệt chính giữa các thuộc tính phụ thuộc và các thuộc tính CLR khác là:

• Thuộc tính CLR có thể đọc / ghi trực tiếp từ thành viên private của một lớp bằng cách sử dụng getter và setter . Trong trường hợp thuộc tính phụ thuộc, nó không được lưu trữ trong một đối tượng cục bộ.
• Thuộc tính phụ thuộc được lưu trữ trong từ điển các cặp khóa / giá trị được cung cấp bởi lớp DependencyObject.
• Nó cũng tiết kiệm rất nhiều bộ nhớ vì nó lưu trữ tài sản khi thay đổi.
• Nó cũng có thể bị ràng buộc trong XAML.

Trong khuôn khổ .NET, các thuộc tính phụ thuộc tùy chỉnh cũng có thể được xác định. Dưới đây là các bước để xác định thuộc tính phụ thuộc tùy chỉnh trong C #.

• Khai báo và đăng ký thuộc tính phụ thuộc của bạn với đăng ký cuộc gọi hệ thống.
• Cung cấp setter và getter cho tài sản.
• Xác định một trình xử lý tĩnh để xử lý bất kỳ thay đổi nào xảy ra trên toàn cầu.
• Xác định một trình xử lý cá thể để xử lý bất kỳ thay đổi nào xảy ra với cá thể cụ thể đó.

Dưới đây là mã trong C # cho thuộc tính phụ thuộc được xác định để đặt thuộc tính SetText của điều khiển người dùng.

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

using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication3 {
   /// <summary> 
      /// Interaction logic for UserControl1.xaml 
   /// </summary> 
	
   public partial class UserControl1 : UserControl {
      public UserControl1() {
         InitializeComponent();
      }
      public static readonly DependencyProperty
         SetTextProperty = DependencyProperty.Register("SetText", typeof(string), 
         typeof(UserControl1), new PropertyMetadata("", 
         new PropertyChangedCallback(OnSetTextChanged)));
      public string SetText {
         get {return(string) GetValue(SetTextProperty); }
         set {SetValue(SetTextProperty, value);}
      }
      private static void OnSetTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
         UserControl1 UserControl1Control = d as UserControl1;
         UserControl1Control.OnSetTextChanged(e);
      }
      private void OnSetTextChanged(DependencyPropertyChangedEventArgs e) {
         tbTest.Text = e.NewValue.ToString();
      }
   }
}

Đây là tệp XAML trong đó TextBlock được định nghĩa là điều khiển của người dùng và thuộc tính Text sẽ được gán cho nó bởi thuộc tính phụ thuộc SetText.

Mã XAML sau đây tạo điều khiển người dùng với việc khởi tạo thuộc tính phụ thuộc SetText của nó và một số thuộc tính khác.

<Window x:Class = "WpfApplication3.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:views = "clr-namespace:WpfApplication3" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Grid>
      <views:UserControl1 SetText = "Hellow World" />
   </Grid>
	
</Window>

Hãy chạy ứng dụng này và bạn có thể thấy ngay trong MainWindow của chúng tôi rằng thuộc tính phụ thuộc để kiểm soát người dùng đã được sử dụng thành công dưới dạng Văn bản.

XAML – Tài nguyên

Tài nguyên thường là các định nghĩa được kết nối với một số đối tượng mà bạn chỉ muốn sử dụng thường xuyên hơn một lần. Nó có khả năng lưu trữ dữ liệu cục bộ cho các điều khiển hoặc cho cửa sổ hiện tại hoặc toàn cầu cho toàn bộ ứng dụng.

Việc xác định một đối tượng làm tài nguyên cho phép chúng ta truy cập nó từ một nơi khác. Do đó, nó cho phép tái sử dụng. Tài nguyên được định nghĩa trong từ điển tài nguyên và bất kỳ đối tượng nào cũng có thể được định nghĩa là tài nguyên, biến nó thành tài sản có thể chia sẻ một cách hiệu quả. Một khóa duy nhất được chỉ định cho tài nguyên XAML và với khóa đó, nó có thể được tham chiếu bằng cách sử dụng tiện ích mở rộng đánh dấu StaticResource.

Hãy xem lại một ví dụ đơn giản trong đó hai khối văn bản được tạo với một số thuộc tính và màu nền trước của chúng được xác định trong Window.Resources .

<Window x:Class = "XAMLResources.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Window.Resources> 
      <SolidColorBrush Color = "Blue" x:Key = "myBrush"></SolidColorBrush> 
   </Window.Resources>  
	
   <StackPanel Orientation = "Vertical"> 
      <TextBlock Foreground = "{StaticResource myBrush}" 
         Text = "First Name" Width = "100" Margin = "10" /> 
      <TextBlock Foreground = "{StaticResource myBrush}" 
         Text = "Last Name" Width = "100" Margin = "10" /> 
   </StackPanel> 
	
</Window> 

Khi đoạn mã trên được biên dịch và thực thi, nó sẽ tạo ra MainWindow sau. Bạn có thể thấy hai khối văn bản với màu nền trước là xanh lam. Ưu điểm của tài nguyên là nếu có nhiều khối văn bản và bạn muốn thay đổi màu nền của chúng, thì bạn chỉ cần thay đổi nó trong từ điển tài nguyên.

Phạm vi tài nguyên

Tài nguyên được định nghĩa trong từ điển tài nguyên, nhưng có rất nhiều nơi mà từ điển tài nguyên có thể được định nghĩa. Trong ví dụ trên, một từ điển tài nguyên được định nghĩa ở cấp Cửa sổ / trang. Trong từ điển nào một tài nguyên được định nghĩa ngay lập tức giới hạn phạm vi của tài nguyên đó. Vì vậy, phạm vi, tức là nơi bạn có thể sử dụng tài nguyên, phụ thuộc vào nơi bạn đã xác định nó.

• Xác định tài nguyên trong từ điển tài nguyên của một lưới và nó có thể truy cập được bởi lưới đó và chỉ bởi các phần tử con của nó.
• Xác định nó trên một cửa sổ / trang và nó có thể truy cập được bởi tất cả các phần tử trên cửa sổ / trang đó.
• Bạn có thể tìm thấy gốc ứng dụng trong từ điển tài nguyên App.xaml. Nó là gốc của ứng dụng của chúng tôi, vì vậy các tài nguyên được xác định ở đây được áp dụng cho toàn bộ ứng dụng.

Về phạm vi của tài nguyên, thông thường nhất là cấp ứng dụng, cấp trang và cấp phần tử cụ thể như Grid, StackPanel, v.v.

Từ điển tài nguyên

Từ điển tài nguyên trong ứng dụng XAML ngụ ý từ điển tài nguyên trong các tệp riêng biệt. Nó được theo sau trong hầu hết các ứng dụng XAML. Việc xác định tài nguyên trong các tệp riêng biệt có thể có những lợi ích sau:

• Tách biệt giữa việc xác định tài nguyên trong từ điển tài nguyên và mã liên quan đến giao diện người dùng.
• Việc xác định tất cả các tài nguyên trong một tệp riêng biệt, chẳng hạn như App.xaml sẽ làm cho chúng có sẵn trên Ứng dụng.

Vì vậy, làm thế nào chúng ta có thể xác định tài nguyên của mình trong từ điển tài nguyên trong một tệp riêng biệt? Nó rất dễ dàng, chỉ cần thêm một từ điển tài nguyên mới thông qua Visual Studio theo các bước sau:

• Trong giải pháp của bạn, hãy thêm một thư mục mới và đặt tên là ResourceDictionaries .
• Nhấp chuột phải vào thư mục này và chọn Resource Dictionary từ mục Add menu con và đặt tên là DictionaryWithBrush.xaml

Chúng ta hãy xem xét các ứng dụng tương tự; chỉ từ điển tài nguyên hiện được xác định ở cấp Ứng dụng.

Đây là mã XAML cho MainWindow.xaml.

<Window x:Class = "XAMLResources.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel Orientation = "Vertical"> 
      <TextBlock Foreground = "{StaticResource myBrush}" Text = "First Name" 
         Width = "100" Margin = "10" /> 
      <TextBlock Foreground = "{StaticResource myBrush}" Text = "Last Name" 
         Width = "100" Margin = "10"/> 
   </StackPanel> 
	
</Window> 

Đây là cách triển khai trong DictionaryWithBrush.xaml –

<ResourceDictionary 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"> 
	
   <SolidColorBrush Color = "Blue" x:Key = "myBrush"></SolidColorBrush> 
	
</ResourceDictionary> 

Đây là cách triển khai trong app.xaml –

<Application x:Class = "XAMLResources.App" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   StartupUri = "MainWindow.xaml"> 
	
   <Application.Resources> 
      <ResourceDictionary Source = " XAMLResources\ResourceDictionaries\DictionaryWithBrush.xaml" /> 
   </Application.Resources> 
	
</Application>

Khi đoạn mã trên được biên dịch và thực thi, nó sẽ tạo ra kết quả sau:

XAML – Mẫu

Mẫu mô tả giao diện tổng thể và hình thức trực quan của điều khiển. Đối với mỗi điều khiển, có một mẫu mặc định được liên kết với nó để tạo giao diện cho điều khiển đó.

Trong XAML, bạn có thể dễ dàng tạo các mẫu của riêng mình khi bạn muốn tùy chỉnh hành vi trực quan và hình thức trực quan của điều khiển. Kết nối giữa logic và mẫu có thể đạt được bằng cách liên kết dữ liệu.

Sự khác biệt chính giữa kiểu và mẫu là –

• Kiểu chỉ có thể thay đổi giao diện của điều khiển của bạn với các thuộc tính mặc định của điều khiển đó.
• Với các mẫu, bạn có thể truy cập nhiều phần của điều khiển hơn là trong các kiểu. Bạn cũng có thể chỉ định cả hành vi hiện có và hành vi mới của điều khiển.

Có hai loại mẫu được sử dụng phổ biến nhất.

• Mẫu điều khiển
• Mẫu dữ liệu

Mẫu điều khiển

Mẫu điều khiển xác định hoặc chỉ định hình thức và cấu trúc trực quan của điều khiển. Tất cả các phần tử giao diện người dùng đều có một số kiểu giao diện cũng như hành vi, ví dụ: Nút có giao diện và hành vi. Sự kiện nhấp chuột hoặc sự kiện di chuột là các hành vi được kích hoạt để phản ứng với một nhấp chuột và di chuột, đồng thời có một giao diện mặc định của nút có thể được thay đổi bởi Mẫu điều khiển.

Hãy xem lại một ví dụ đơn giản trong đó hai nút được tạo với một số thuộc tính. Một là với mẫu và một là với nút mặc định .

<Window x:Class = "TemplateDemo.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Window.Resources>
      <ControlTemplate x:Key = "ButtonTemplate" TargetType = "Button">
         <Grid>
            <Ellipse x:Name = "ButtonEllipse" Height = "100" Width = "150" >
               <Ellipse.Fill> 
                  <LinearGradientBrush StartPoint = "0,0.2" EndPoint = "0.2,1.4"> 
                     <GradientStop Offset = "0" Color = "Red"/>
                     <GradientStop Offset = "1" Color = "Orange"/>
                  </LinearGradientBrush> 
               </Ellipse.Fill>
            </Ellipse>
            <ContentPresenter Content = "{TemplateBinding Content}"
               HorizontalAlignment = "Center" VerticalAlignment = "Center" />
         </Grid>
         <ControlTemplate.Triggers> 
            <Trigger Property = "IsMouseOver" Value = "True">
               <Setter TargetName = "ButtonEllipse" Property = "Fill" >
                  <Setter.Value> 
                     <LinearGradientBrush StartPoint = "0,0.2" EndPoint="0.2,1.4"> 
                        <GradientStop Offset = "0" Color = "YellowGreen"/>
                        <GradientStop Offset = "1" Color = "Gold"/>
                     </LinearGradientBrush> 
                  </Setter.Value> 
               </Setter>
            </Trigger> 
				
            <Trigger Property = "IsPressed" Value = "True"> 
               <Setter Property = "RenderTransform"> 
                  <Setter.Value> 
                     <ScaleTransform ScaleX = "0.8" ScaleY = "0.8" CenterX = "0" CenterY = "0" /> 
                  </Setter.Value> 
               </Setter> 
					
               <Setter Property = "RenderTransformOrigin" Value = "0.5,0.5" /> 
            </Trigger>
         </ControlTemplate.Triggers>
      </ControlTemplate> 
   </Window.Resources>
	
   <StackPanel> 
      <Button Content = "Round Button!" Template = "{StaticResource ButtonTemplate}" 
         Width = "150" Margin = "50" />
      <Button Content = "Default Button!" Height = "40" Width = "150" Margin = "5" /> 
   </StackPanel> 
	
</Window>

Khi đoạn mã trên được biên dịch và thực thi, nó sẽ tạo ra MainWindow sau:

Khi bạn di chuột qua nút có mẫu tùy chỉnh, sau đó nó cũng thay đổi màu sắc như hình dưới đây

Mẫu dữ liệu

Mẫu Dữ liệu xác định và chỉ định hình thức cũng như cấu trúc của tập hợp dữ liệu. Nó cung cấp sự linh hoạt để định dạng và xác định cách trình bày dữ liệu trên bất kỳ phần tử giao diện người dùng nào. Nó chủ yếu được sử dụng trên các điều khiển Item liên quan đến dữ liệu như ComboBox, ListBox, v.v.

Hãy xem một ví dụ đơn giản về mẫu dữ liệu. Mã XAML sau đây tạo một hộp kết hợp với Mẫu dữ liệu và các khối văn bản.

<Window x:Class = "XAMLDataTemplate.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid VerticalAlignment = "Top">
      <ComboBox Name = "Presidents" ItemsSource = "{Binding}" Height = "30" Width = "400"> 
         <ComboBox.ItemTemplate> 
            <DataTemplate>
               <StackPanel Orientation = "Horizontal" Margin = "2">
                  <TextBlock Text = "Name: " Width = "95" Background = "Aqua" Margin = "2" /> 
                  <TextBlock Text = "{Binding Name}" Width = "95" Background = "AliceBlue" Margin = "2" /> 
                  <TextBlock Text = "Title: " Width = "95" Background = "Aqua" Margin = "10,2,0,2" />
                  <TextBlock Text = "{Binding Title}" Width = "95" Background = "AliceBlue" Margin = "2" /> 
               </StackPanel>
            </DataTemplate>
         </ComboBox.ItemTemplate> 
      </ComboBox> 
   </Grid>
   
</Window>

Đây là cách triển khai trong C #, trong đó đối tượng nhân viên được gán cho DataContext

using System; 
using System.Windows; 
using System.Windows.Controls;

namespace XAMLDataTemplate { 
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window {
      public MainWindow() {
         InitializeComponent(); 
         DataContext = Employee.GetEmployees(); 
      }
   }
}

Đây là cách triển khai trong C # cho lớp Nhân viên –

using System; 
using System.Collections.Generic; 
using System.Collections.ObjectModel; 
using System.ComponentModel; 
using System.Linq; 
using System.Runtime.CompilerServices; 
using System.Text; 
using System.Threading.Tasks;

namespace XAMLDataTemplate { 
   public class Employee : INotifyPropertyChanged {
      private string name; public string Name {
         get { return name; } 
         set { name = value; RaiseProperChanged(); } 
      }
      private string title; public string Title { 
         get { return title; } 
         set { title = value; RaiseProperChanged(); } 
      }
      public static Employee GetEmployee() {
         var emp = new Employee() { 
            Name = "Waqas", Title = "Software Engineer" };
         return emp; 
      }
      public event PropertyChangedEventHandler PropertyChanged;
      private void RaiseProperChanged( [CallerMemberName] string caller = ""){
         if (PropertyChanged != null) { 
            PropertyChanged(this, new PropertyChangedEventArgs(caller)); 
         } 
      }
      public static ObservableCollection<Employee> GetEmployees() {
         var employees = new ObservableCollection<Employee>();
         employees.Add(new Employee() { Name = "Ali", Title = "Developer" }); 
         employees.Add(new Employee() { Name = "Ahmed", Title = "Programmer" });
         employees.Add(new Employee() { Name = "Amjad", Title = "Desiner" });
         employees.Add(new Employee() { Name = "Waqas", Title = "Programmer" }); 
         employees.Add(new Employee() { Name = "Bilal", Title = "Engineer" });
         employees.Add(new Employee() { Name = "Waqar", Title = "Manager" }); 
         return employees; 
      }
   }
}

Khi đoạn mã trên được biên dịch và thực thi, nó sẽ tạo ra kết quả sau. Nó chứa một hộp kết hợp và khi bạn nhấp vào hộp kết hợp, bạn sẽ thấy rằng tập hợp dữ liệu được tạo trong lớp Nhân viên được liệt kê dưới dạng các mục hộp kết hợp.

XAML – Phong cách (xem thêm)

The post XAML – Thuộc tính phụ thuộc appeared first on Dongthoigian.net.

Liên kết dữ liệu cho phép luồng dữ liệu giữa các phần tử UI và đối tượng dữ liệu trên giao diện người dùng. Khi một ràng buộc được thiết lập và dữ liệu hoặc mô hình kinh doanh của bạn thay đổi, thì nó sẽ tự động phản ánh các cập nhật cho các phần tử giao diện người dùng và ngược lại. Cũng có thể liên kết, không phải với nguồn dữ liệu chuẩn, mà là với một phần tử khác trên trang. Liên kết dữ liệu có thể có hai loại –

• Liên kết dữ liệu một chiều
• Liên kết dữ liệu hai chiều

Liên kết dữ liệu một chiều

Trong liên kết một chiều, dữ liệu được ràng buộc từ nguồn của nó (đó là đối tượng chứa dữ liệu) đến đích của nó (đó là đối tượng hiển thị dữ liệu).

Hãy xem một ví dụ đơn giản về ràng buộc dữ liệu một chiều. Mã XAML sau đây tạo ra bốn khối văn bản với một số thuộc tính.

<Window x:Class = "DataBindingOneWay.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid>
      <StackPanel Name = "Display">
         <StackPanel Orientation = "Horizontal" Margin = "50, 50, 0, 0"> 
            <TextBlock Text = "Name: " Margin = "10" Width = "100" /> 
            <TextBlock Margin = "10" Width = "100" Text = "{Binding Name}" />
         </StackPanel> 
		
         <StackPanel Orientation = "Horizontal" Margin = "50,0,50,0"> 
            <TextBlock Text = "Title: " Margin = "10" Width = "100" /> 
            <TextBlock Margin = "10" Width = "100" Text = "{Binding Title}" /> 
         </StackPanel>
      </StackPanel>
   </Grid> 
	
</Window> 

Thuộc tính văn bản của hai khối văn bản được đặt tĩnh thành “Tên” và “Tiêu đề”, trong khi hai khối văn bản còn lại Thuộc tính văn bản được liên kết với “Tên” và “Tiêu đề” là các biến lớp của lớp Nhân viên được hiển thị bên dưới.

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
 
namespace DataBindingOneWay {
   public class Employee {
      public string Name { get; set; } 
      public string Title { get; set; }  
		
      public static Employee GetEmployee() {
         var emp = new Employee() { 
            Name = "Ali Ahmed", Title = "Developer" 
         }; 
         return emp; 
      }
   }
}

Trong lớp này, chúng ta chỉ có hai biến, Tên và Tiêu đề , và một phương thức tĩnh trong đó đối tượng Employee được khởi tạo sẽ trả về đối tượng nhân viên đó. Vì vậy, chúng tôi đang ràng buộc với một thuộc tính, Tên và Tiêu đề, nhưng chúng tôi chưa chọn thuộc tính đó thuộc về đối tượng nào. Cách dễ nhất là gán một đối tượng cho DataContext có thuộc tính mà chúng tôi đang ràng buộc trong mã C # sau:

using System; 
using System.Windows; 
using System.Windows.Controls;

namespace DataBindingOneWay { 
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window {
      public MainWindow() { 
         InitializeComponent(); 
         DataContext = Employee.GetEmployee(); 
      } 
   }
}

Hãy chạy ứng dụng này và bạn có thể thấy ngay trong MainWindow của chúng tôi rằng chúng tôi đã liên kết thành công với Tên và Chức danh của đối tượng Nhân viên đó.

Liên kết dữ liệu hai chiều

Trong ràng buộc hai chiều, người dùng có thể sửa đổi dữ liệu thông qua giao diện người dùng và cập nhật dữ liệu đó trong nguồn. Nếu nguồn thay đổi trong khi người dùng đang xem dạng xem, bạn sẽ muốn cập nhật dạng xem.

Thí dụ

Hãy xem ví dụ sau, trong đó một hộp kết hợp với ba mục hộp kết hợp và một hộp văn bản được tạo với một số thuộc tính. Trong ví dụ này, chúng tôi không có bất kỳ nguồn dữ liệu chuẩn nào, nhưng các phần tử giao diện người dùng bị ràng buộc với các phần tử giao diện người dùng khác.

<Window x:Class = "XAMLTestBinding.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel>
      <ComboBox Name = "comboBox"  Margin = "50" Width = "100"> 
         <ComboBoxItem Content = "Green" /> 
         <ComboBoxItem Content = "Yellow" IsSelected = "True" /> 
         <ComboBoxItem Content = "Orange" /> 
      </ComboBox>
		
      <TextBox  Name = "textBox" Margin = "50" 
         Width = "100" Height = "23" VerticalAlignment = "Top" 
         Text  = "{Binding ElementName = comboBox, Path = SelectedItem.Content, 
         Mode = TwoWay, UpdateSourceTrigger = PropertyChanged}" 
         Background = "{Binding ElementName = comboBox, Path = SelectedItem.Content}"> 
      </TextBox>
   </StackPanel> 
	
</Window> 

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau. Khi người dùng chọn một mục từ hộp tổ hợp, văn bản hộp văn bản và màu nền sẽ được cập nhật tương ứng.

Tương tự, khi người dùng nhập tên màu hợp lệ vào hộp văn bản, thì hộp tổ hợp và màu nền hộp văn bản cũng sẽ được cập nhật.

XAML – Tiện ích mở rộng đánh dấu

Trong các ứng dụng XAML, phần mở rộng đánh dấu là một phương pháp / kỹ thuật để đạt được một giá trị không phải là một đối tượng XAML cụ thể cũng không phải là một kiểu nguyên thủy. Phần mở rộng đánh dấu có thể được xác định bằng cách mở và đóng dấu ngoặc nhọn và bên trong dấu ngoặc nhọn đó, phạm vi của phần mở rộng đánh dấu được xác định.

Liên kết dữ liệu và tài nguyên tĩnh là phần mở rộng đánh dấu. Có một số phần mở rộng đánh dấu XAML được xác định trước trong System.xaml có thể được sử dụng.

Hãy xem một ví dụ đơn giản trong đó tiện ích mở rộng đánh dấu StaticResources được sử dụng, là một tiện ích mở rộng đánh dấu XAML được xác định trước.

Mã XAML sau đây tạo ra hai khối văn bản với một số thuộc tính và nền trước của chúng được xác định trong Window.Resources .

<Window x:Class = "XAMLStaticResourcesMarkupExtension.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "525"> 
	
   <Window.Resources> 
      <SolidColorBrush Color = "Blue" x:Key = "myBrush"></SolidColorBrush> 
   </Window.Resources> 
	
   <Grid> 
      <StackPanel Orientation = "Vertical"> 
         <TextBlock Foreground = "{StaticResource myBrush}" Text = "First Name" 
            Width = "100" Margin = "10" /> 
         <TextBlock Foreground = "{StaticResource myBrush}" Text = "Last Name" 
            Width = "100" Margin = "10" /> 
      </StackPanel> 
   </Grid> 
	
</Window> 

Trong Window.Resources , bạn có thể thấy x: Key được sử dụng để xác định duy nhất các phần tử được tạo và tham chiếu trong từ điển được định nghĩa XAML để xác định một tài nguyên trong từ điển tài nguyên.

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra MainWindow sau. Bạn có thể thấy hai khối văn bản với màu nền trước là xanh lam.

Trong XAML, phần mở rộng đánh dấu tùy chỉnh cũng có thể được xác định bằng cách kế thừa lớp MarkupExtension và ghi đè phương thức Cung cấpValue là một phương thức trừu tượng trong lớp MarkupExtension.

Hãy xem một ví dụ đơn giản về tiện ích mở rộng đánh dấu tùy chỉnh.

<Window x:Class = "XAMLMarkupExtension.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:my = "clr-namespace:XAMLMarkupExtension" 
   Title = "MainWindow" Height = "350" Width = "525"> 
	
   <Grid> 
      <Button Content = "{my:MyMarkupExtension FirstStr = Markup, SecondStr = Extension}" 
         Width = "200" Height = "20" /> 
   </Grid> 
	
</Window>

Trong mã XAML ở trên, một nút được tạo với một số thuộc tính và đối với giá trị nội dung, một tiện ích mở rộng đánh dấu tùy chỉnh (của tôi: MyMarkupExtension) đã được sử dụng với hai giá trị “Markup” và “Extension” được gán cho FirstStr và SecondStr tương ứng.

Trên thực tế, MyMarkupExtensionlà một lớp được dẫn xuất từ MarkupExtension​​như được hiển thị bên dưới trong việc triển khai C #. Lớp này chứa hai biến chuỗi, FirstStr và SecondStr, được nối với nhau và trả về chuỗi đó từ phương thức SupplyValue thành Nội dung của một nút.

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks;
 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Data; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Markup; 
using System.Windows.Media; 
using System.Windows.Media.Imaging; 
using System.Windows.Navigation; 
using System.Windows.Shapes;  

namespace XAMLMarkupExtension { 
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window { 
      public MainWindow() { 
         InitializeComponent(); 
      } 
   }
   public class MyMarkupExtension : MarkupExtension { 
      public MyMarkupExtension() { } 
      public String FirstStr { get; set; } 
      public String SecondStr { get; set; }  
		
      public override object ProvideValue(IServiceProvider serviceProvider) { 
        return FirstStr + " " + SecondStr; 
      } 
   }
}

Hãy chạy ứng dụng này và bạn có thể thấy ngay trong MainWindow của chúng tôi rằng “tiện ích mở rộng đánh dấu” đã được sử dụng thành công làm nội dung của nút.

XAML – Thuộc tính phụ thuộc (XEM THÊM)

The post XAML – Liên kết dữ liệu appeared first on Dongthoigian.net.

Canvas thường được sử dụng cho các phần tử đồ họa 2D (chẳng hạn như Elip, Hình chữ nhật, v.v.), nhưng không cho các phần tử giao diện người dùng vì việc chỉ định tọa độ tuyệt đối sẽ tạo ra rắc rối khi thay đổi kích thước, bản địa hóa hoặc chia tỷ lệ ứng dụng XAML.

Kế thừa phân cấp của lớp Canvas như sau:

Đặc tính

Dưới đây là các thuộc tính thường được sử dụng của lớp Canvas.

Phương pháp

Dưới đây là các phương pháp thường được sử dụng của Canvas.

Thí dụ

Ví dụ sau đây cho thấy cách thêm các phần tử con vào Canvas. Đây là cách triển khai XAML trong đó Hình chữ nhật được tạo bên trong Canvas với các thuộc tính bù đắp khác nhau.

<Window x:Class = "XAMLCanvas.Window1" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "400" Width = "604"> 
	
   <Grid> 
      <Canvas Width = "580" Height = "360" > 
         <Rectangle Canvas.Left = "30" Canvas.Top = "30" Fill = "Red" Width = "70" Height = "40" /> 
         <Rectangle Canvas.Right = "30" Canvas.Top = "30" Fill = "Blue" Width = "70" Height = "40" /> 
         <Rectangle Canvas.Left = "30" Canvas.Bottom = "30" Fill = "Gainsboro" Width = "70" Height = "40" /> 
         <Rectangle Canvas.Right = "30" Canvas.Bottom = "30" Fill = "SaddleBrown" Width = "70" Height = "40" /> 
      </Canvas> 
   </Grid> 
	
</Window> 

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau:

XAML – GridPanel

Bảng điều khiển Grid cung cấp một khu vực linh hoạt bao gồm các hàng và cột. Trong Grid, các phần tử con có thể được sắp xếp dưới dạng bảng. Các phần tử có thể được thêm vào bất kỳ hàng và cột cụ thể nào bằng cách sử dụng các thuộc tính Grid.Row và Grid.Column .

Theo mặc định, bảng Grid được tạo với một hàng và một cột. Nhiều hàng và cột có thể được tạo bằng cách sử dụng thuộc tính RowDefinitions và ColumnDefinitions . Chiều cao của hàng và chiều rộng của cột có thể được xác định theo ba cách sau:

• Giá trị cố định – Để chỉ định kích thước cố định của các đơn vị logic (1/96 inch)
• Tự động – Nó sẽ chỉ chiếm nhiều không gian cần thiết cho các điều khiển trong hàng / cột cụ thể đó.
• Dấu sao (*) – Nó sẽ chiếm không gian còn lại khi Tự động và kích thước cố định được lấp đầy.

Sự kế thừa phân cấp của lớp Grid như sau:

Đặc tính

Dưới đây là các thuộc tính thường được sử dụng của lớp Grid.

Phương pháp

Dưới đây là các phương thức thường được sử dụng của lớp Grid.

Thí dụ

Ví dụ sau đây cho thấy cách thêm các phần tử con vào một Grid để chỉ định nó ở dạng bảng. Đây là cách triển khai XAML trong đó Khối văn bản được thêm vào cột đầu tiên và Hộp văn bản được thêm vào cột thứ hai của Lưới.

<Window x:Class = "XAMLGrid.Window1" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "Window1" Height = "300" Width = "604"> 
	
   <Grid x:Name = "FormLayoutGrid" Background = "LightGray"> 
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "Auto" /> 
         <ColumnDefinition /> 
      </Grid.ColumnDefinitions> 
		
      <Grid.RowDefinitions> 
         <RowDefinition Height = "*" /> 
         <RowDefinition Height = "*" /> 
         <RowDefinition Height = "*" /> 
      </Grid.RowDefinitions> 
		
      <TextBlock Grid.Row = "0" Grid.Column = "0" Text = "Name" 
         Margin = "10" HorizontalAlignment = "Left" VerticalAlignment = "Center" 
         Width = "100"/> 
      
      <TextBox Grid.Row = "0" Grid.Column = "1" Margin = "10"/> 
      <TextBlock Grid.Row = "1" Grid.Column = "0" Text = "ID" Margin = "10" 
         HorizontalAlignment = "Left" VerticalAlignment = "Center" Width = "100"/> 
      
      <TextBox Grid.Row = "1" Grid.Column = "1" Margin = "10"/> 
      <TextBlock Grid.Row = "2" Grid.Column = "0" Text = "Age" Margin = "10" 
         HorizontalAlignment = "Left" VerticalAlignment = "Center" Width = "100"/> 
      
      <TextBox Grid.Row = "2" Grid.Column = "1" Margin = "10"/>
   </Grid> 
	
</Window>

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau:

Chúng tôi khuyên bạn nên thực thi mã ví dụ trên và thử nghiệm với một số thuộc tính khác.

Lồng bố cục

Lồng bố cục có nghĩa là sử dụng một bảng bố cục bên trong một bố cục khác, ví dụ: xác định các bảng ngăn xếp bên trong một lưới. Khái niệm này được sử dụng rộng rãi để tận dụng nhiều bố cục trong một ứng dụng.

Thí dụ

Trong ví dụ sau, chúng ta sẽ sử dụng các bảng ngăn xếp bên trong một lưới. Hãy xem mã XAML sau:

<Window x:Class = "XAMLNestingLayouts.Window1"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "Window1" Height = "300" Width = "604"> 
	
   <Grid Background = "LightGray"> 
      <Grid.RowDefinitions> 
         <RowDefinition Height = "*"/> 
         <RowDefinition Height = "*"/> 
         <RowDefinition Height = "*"/> 
         <RowDefinition Height = "*"/> 
         <RowDefinition Height = "*"/> 
      </Grid.RowDefinitions>
		
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "*"/> 
      </Grid.ColumnDefinitions> 
		
      <Label Content = "Employee Info" FontSize = "15" FontWeight = "Bold" 
         Grid.Column = "0" Grid.Row = "0"/> 
		
      <StackPanel Grid.Column = "0" Grid.Row = "1" Orientation = "Horizontal"> 
         <Label Content = "Name"  VerticalAlignment = "Center" Width = "70"/>
         <TextBox Name = "txtName" Text = "Muhammad Ali" 
            VerticalAlignment = "Center" Width = "200"></TextBox> 
      </StackPanel>  
		
      <StackPanel Grid.Column = "0" Grid.Row = "2" Orientation = "Horizontal"> 
         <Label Content = "ID" VerticalAlignment = "Center" Width = "70"/> 
         <TextBox Name = "txtCity" Text = "421" VerticalAlignment = "Center" 
            Width = "50"></TextBox> 
      </StackPanel>
		
      <StackPanel Grid.Column = "0" Grid.Row = "3" Orientation = "Horizontal"> 
         <Label Content = "Age" VerticalAlignment = "Center" Width = "70"/> 
         <TextBox Name = "txtState" Text = "32" VerticalAlignment = "Center" 
            Width = "50"></TextBox> 
      </StackPanel>  
		
      <StackPanel Grid.Column = "0" Grid.Row = "4" Orientation = "Horizontal"> 
         <Label Content = "Title" VerticalAlignment = "Center" Width = "70"/>
         <TextBox Name = "txtCountry" Text = "Programmer" 
            VerticalAlignment = "Center" Width = "20></TextBox> 
      </StackPanel>
   </Grid> 
	
</Window>

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau:

XAML – Xử lý sự kiện

Khái niệm chung về sự kiện trong XAML tương tự như các sự kiện trong các ngôn ngữ lập trình phổ biến khác như .NET và C ++. Trong XAML, tất cả các điều khiển hiển thị một số sự kiện để chúng có thể được đăng ký cho các mục đích cụ thể.

Bất cứ khi nào một sự kiện diễn ra, ứng dụng sẽ được thông báo và chương trình có thể phản ứng với chúng, ví dụ: các nút đóng được sử dụng để đóng hộp thoại.

Có nhiều loại sự kiện có thể được đăng ký cho các hành vi khác nhau của một ứng dụng dựa trên yêu cầu của ứng dụng đó, nhưng các sự kiện thường được sử dụng nhất là những sự kiện liên quan đến chuột và bàn phím, chẳng hạn như,

• Nhấp chuột
• Di chuột xuống
• MouseEnter
• MouseLeave
• MouseUp
• KeyDown
• KeyUp

Trong chương này, chúng tôi sẽ sử dụng một số sự kiện cơ bản và được sử dụng phổ biến nhất để hiểu cách một sự kiện của một điều khiển cụ thể có thể được liên kết với mã đằng sau nơi hành vi sẽ được thực hiện tùy thuộc vào những gì người dùng muốn làm khi một sự kiện cụ thể xảy ra.

Hãy xem một ví dụ đơn giản về sự kiện nhấp vào nút. Dưới đây là triển khai XAML cho điều khiển Nút được tạo và khởi tạo với một số thuộc tính và sự kiện Nhấp chuột (Nhấp chuột = “OnClick”).

<Window x:Class = "XAMLEventHandling.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid> 
      <Button x:Name = "button1" Content = "Click" Click = "OnClick" 
         Width = "150" Height = "30" HorizontalAlignment = "Center" /> 
   </Grid>
   
</Window> 

Bất cứ khi nào nút này được nhấp, nó sẽ kích hoạt sự kiện OnClick và bạn có thể thêm bất kỳ loại hành vi nào làm phản hồi cho Nhấp chuột. Hãy xem triển khai sự kiện OnClick sẽ hiển thị thông báo khi nút này được nhấp.

using System; 
using System.Windows; 
using System.Windows.Controls;  

namespace XAMLEventHandling {
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window {
      public MainWindow() { 
         InitializeComponent(); 
      }
      private void OnClick(object sender, RoutedEventArgs e) { 
         MessageBox.Show("Button is clicked!"); 
      } 
   }
}

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau:

Khi bạn nhấp vào nút, sự kiện nhấp chuột (OnClick) sẽ được kích hoạt và thông báo sau sẽ được hiển thị.

Bây giờ chúng ta hãy xem xét một ví dụ phức tạp một chút trong đó nhiều sự kiện được xử lý.

Thí dụ

Ví dụ sau chứa một hộp văn bản với ContextMenu thao tác văn bản trong hộp văn bản.

Mã XAML sau tạo một TextBox, ContextMenu và MenuItems với một số thuộc tính và sự kiện như Đã kiểm tra, Bỏ chọn và Nhấp.

<Window x:Class = "XAMLContextMenu.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid> 
      <TextBox Name = "textBox1" TextWrapping = "Wrap" Margin = "10" Grid.Row = "7"> 
         Hi, this is XAML tutorial. 
         <TextBox.ContextMenu>
         
            <ContextMenu>
               <MenuItem Header = "_Bold" IsCheckable = "True" 
                  Checked = "Bold_Checked" Unchecked = "Bold_Unchecked" /> 
               <MenuItem Header = "_Italic" IsCheckable = "True" 
                  Checked = "Italic_Checked" Unchecked = "Italic_Unchecked" /> 
               <Separator /> 
               <MenuItem Header = "Increase Font Size" Click = "IncreaseFont_Click" />
               <MenuItem Header = "_Decrease Font Size" Click = "DecreaseFont_Click" /> 
            </ContextMenu> 
				
         </TextBox.ContextMenu>
      </TextBox>
   </Grid> 
	
</Window> 

Đây là cách triển khai trong C # cho các sự kiện khác nhau sẽ được kích hoạt bất cứ khi nào một mục menu được chọn, bỏ chọn hoặc nhấp vào.

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Data;  

namespace XAMLContextMenu { 
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary>
	
   public partial class MainWindow : Window {
      public MainWindow() { 
         InitializeComponent(); 
      }
      private void Bold_Checked(object sender, RoutedEventArgs e) { 
         textBox1.FontWeight = FontWeights.Bold; 
      }
      private void Bold_Unchecked(object sender, RoutedEventArgs e) { 
         textBox1.FontWeight = FontWeights.Normal; 
      }
      private void Italic_Checked(object sender, RoutedEventArgs e) { 
         textBox1.FontStyle = FontStyles.Italic; 
      }
      private void Italic_Unchecked(object sender, RoutedEventArgs e) { 
         textBox1.FontStyle = FontStyles.Normal; 
      }
      private void IncreaseFont_Click(object sender, RoutedEventArgs e) { 
         if (textBox1.FontSize < 18) { 
            textBox1.FontSize += 2; 
         } 
      }
      private void DecreaseFont_Click(object sender, RoutedEventArgs e) { 
         if (textBox1.FontSize > 10) { 
            textBox1.FontSize -= 2; 
         } 
      }
   }
}

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau:

Sự kiện

Dưới đây là các sự kiện thường được sử dụng cho các điều khiển khác nhau.

XAML – Liên kết dữ liệu (xem thêm)

The post XAML – CanvasPanel appeared first on Dongthoigian.net.

Đặc tính

Dưới đây là các thuộc tính thường được sử dụng của lớp Window.

Sự kiện

Dưới đây là các sự kiện thường được sử dụng của lớp Window.

Phương pháp

Dưới đây là các phương thức thường được sử dụng của lớp Window.

Thí dụ

Khi bạn tạo một dự án WPF mới, thì theo mặc định, điều khiển Cửa sổ sẽ xuất hiện. Hãy xem mã XAML sau đây bắt đầu từ Thẻ cửa sổ và kết thúc bằng thẻ </Window>. Chúng tôi cũng đã xác định một số thuộc tính cho cửa sổ.

<Window x:Class = "XAMLToolTip.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Grid> 
      <StackPanel Orientation = "Vertical"> 
         <Button Content = "Button with a simple ToolTip."
            ToolTipService.ToolTip = "Simple ToolTip" 
            Width = "200" Margin = "50" />
				
         <!-- A TextBlock with an offset ToolTip. -->
         <TextBlock Text = "TextBlock with an offset ToolTip." Width = "200" Margin = "50"> 
            <ToolTipService.ToolTip> 
               <ToolTip Content = "Offset ToolTip." HorizontalOffset = "20" VerticalOffset = "30"/> 
            </ToolTipService.ToolTip> 
         </TextBlock>
      </StackPanel> 
   </Grid> 
	
</Window>

Khi bạn biên dịch và thực thi đoạn mã trên bằng chuột vào Window, nó sẽ tạo ra kết quả sau:

XAML – Bố cục

Bố cục của các điều khiển là rất quan trọng và then chốt đối với khả năng sử dụng của ứng dụng. Bắt buộc phải sắp xếp một nhóm các phần tử GUI trong ứng dụng của bạn. Có những điểm quan trọng nhất định cần xem xét trong khi chọn bảng bố trí;

• Vị trí của các phần tử con.
• Kích thước của các phần tử con.
• Xếp lớp các phần tử con chồng lên nhau.

Sắp xếp pixel cố định của các điều khiển không hoạt động khi một ứng dụng đã được sử dụng trên các độ phân giải màn hình khác nhau. XAML cung cấp một tập hợp phong phú các bảng bố cục tích hợp để sắp xếp các phần tử GUI theo cách thích hợp. Một số bảng bố cục được sử dụng phổ biến và phổ biến nhất như sau:

XAML – StackPanel

Bảng điều khiển ngăn xếp là một bảng điều khiển bố cục đơn giản và hữu ích trong XAML. Trong bảng điều khiển ngăn xếp, các phần tử con có thể được sắp xếp thành một dòng, theo chiều ngang hoặc chiều dọc, dựa trên thuộc tính định hướng.

Nó thường được sử dụng bất cứ khi nào cần tạo bất kỳ loại danh sách nào. Bảng ngăn xếp được sử dụng bởi các ItemsControls như Menu, ListBox và ComboBox. Sự kế thừa phân cấp của lớp StackPanel như sau:

Đặc tính

Dưới đây là các thuộc tính thường được sử dụng của StackPanel.

Thí dụ

Ví dụ sau đây cho thấy cách thêm các phần tử con vào một StackPanel. Đây là cách triển khai XAML trong đó các Ellipses được tạo bên trong StackPanel có một số thuộc tính.

<Window x:Class = "XAMLStackPanel.Window1" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "400" Width = "604"> 
	
   <Grid> 
      <StackPanel x:Name = "myPanel"> 
         <Button Content = "Button 1" Width = "100" Height = "40" Margin = "10" /> 
         <Button Content = "Button 2" Width = "100" Height = "40" Margin = "10" /> 
         <RadioButton Content = "Radio Button 1" Width = "100"  Margin = "10" /> 
         <RadioButton Content = "Radio Button 2" Width = "100"  Margin = "10" /> 
         <RadioButton Content = "Radio Button 3" Width = "100"  Margin = "10" /> 
         <CheckBox Content = "Check Box 1" Width = "100" Margin = "10" /> 
         <CheckBox Content = "Check Box 2" Width = "100" Margin = "10" />
      </StackPanel> 
   </Grid> 
	
</Window> 

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau. Bạn có thể thấy rằng, theo mặc định, các phần tử con được sắp xếp theo thứ tự Dọc. Yan có thể thay đổi cách sắp xếp bằng cách đặt thuộc tính định hướng thành Ngang.

XAML – WrapPanel

Trong WrapPanel, các phần tử con được định vị theo thứ tự tuần tự từ trái sang phải hoặc từ trên xuống dưới dựa trên thuộc tính hướng. Sự khác biệt duy nhất giữa StackPanel và WrapPanel là nó không xếp chồng tất cả các phần tử con vào một dòng duy nhất, nhưng nó sẽ bao bọc các phần tử còn lại thành một dòng khác nếu không còn khoảng trống.

WrapPanel chủ yếu được sử dụng cho các tab hoặc các mục menu. Sự kế thừa phân cấp của lớp WrapPanel như sau:

Đặc tính

Dưới đây là các thuộc tính thường được sử dụng của WrapPanel.

Thí dụ

Ví dụ sau đây cho thấy cách thêm các phần tử con vào một WrapPanel. Đây là cách triển khai XAML để tạo Khối văn bản và Hộp văn bản bên trong Bảng điều khiển theo chiều ngang.

<Window x:Class = "XAMLWrapPanel.Window1" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "300" Width = "604"> 
	
   <Grid> 
      <WrapPanel Orientation = "Horizontal"> 
         <TextBlock Text = "Fist Name" Width = "60" Height = "20" Margin = "5" /> 
         <TextBox  Width = "200" Height = "20" Margin = "5" /> 
         <TextBlock Text = "Last Name" Width = "60" Height = "20" Margin = "5" /> 
         <TextBox  Width = "200" Height = "20" Margin = "5" /> 
         <TextBlock Text = "Age" Width = "60" Height = "20" Margin = "5" /> 
         <TextBox  Width = "60" Height = "20" Margin = "5" /> 
         <TextBlock Text = "Title" Width = "60" Height = "20" Margin = "5" /> 
         <TextBox  Width = "200" Height = "20" Margin = "5" /> 
      </WrapPanel> 
   </Grid> 
	
</Window> 

Khi đoạn mã trên được biên dịch và thực thi, nó sẽ tạo ra kết quả sau. Bạn có thể thay đổi cách sắp xếp từ trên xuống dưới bằng cách thay đổi thuộc tính hướng thành Dọc.

XAML – DockPanel

DockPanel xác định một khu vực để sắp xếp các phần tử con tương đối với nhau, theo chiều ngang hoặc chiều dọc. Với DockPanel, bạn có thể dễ dàng gắn các phần tử con lên trên, dưới, phải, trái và trung tâm với thuộc tính Dock.

Với thuộc tính LastChildFill, phần tử con cuối cùng lấp đầy khoảng trống còn lại bất kể giá trị dock nào khác khi được đặt cho phần tử đó. Sự kế thừa phân cấp của lớp DockPanel như sau:

Đặc tính

Dưới đây là các thuộc tính thường được sử dụng của DockPanel.

Phương pháp

Dưới đây là các phương pháp thường được sử dụng của DockPanel.

Thí dụ

Ví dụ sau đây cho thấy cách thêm các phần tử con vào DockPanel. Đây là cách triển khai XAML để tạo các nút bên trong DockPanel.

<Window x:Class = "XAMLDockPanel.Window1" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "300" Width = "604">
	
   <Grid>....
      <DockPanel LastChildFill = "True"> 
         <Button Content = "Top" DockPanel.Dock = "Top" Click = "Click_Me" /> 
         <Button Content = "Bottom" DockPanel.Dock = "Bottom" Click = "Click_Me" /> 
         <Button Content = "Left" Click = "Click_Me" />
         <Button Content = "Right" DockPanel.Dock = "Right" Click = "Click_Me" /> 
         <Button Content = "Center" Click = "Click_Me" /> 
      </DockPanel> 
   </Grid> 
	
</Window> 

Dưới đây là cách triển khai trong C # cho sự kiện –

using System; 
using System.Windows; 
using System.Windows.Controls; 
 
namespace XAMLDockPanel { 
   /// <summary> 
      /// Interaction logic for Window1.xaml 
   /// </summary> 
	
   public partial class Window1 : Window { 
      public Window1() { 
         InitializeComponent(); 
      }
      private void Click_Me(object sender, RoutedEventArgs e) { 
         Button btn = sender as Button; 
         string str = btn.Content.ToString() + " button clicked" ; 
         MessageBox.Show(str); 
      } 
   }
}

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau:

Khi nhấp vào bất kỳ nút nào, nó cũng sẽ hiển thị một thông báo. Ví dụ: khi bạn nhấp vào nút ở giữa, nó sẽ hiển thị thông báo sau:

XAML – CanvasPanel (xem thêm)

The post XAML – Cửa sổ appeared first on Dongthoigian.net.

Đặc tính

Dưới đây là các thuộc tính thường được sử dụng của TimePicker.

Sự kiện

Dưới đây là các sự kiện thường được sử dụng trong lớp TimePicker.

Phương pháp

Dưới đây là các phương thức thường được sử dụng trong lớp TimePicker.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng TimePicker trong ứng dụng XAML. Đây là mã XAML để tạo và khởi tạo TimePicker với một số thuộc tính.

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

   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
      <StackPanel Orientation = "Horizontal" Height = "60" Margin = "46,67,-46,641">
         <TimePicker x:Name = "arrivalTimePicker" Header = "Arrival Time" Margin = "0,1"/> 
         <Button Content = "Submit" Click = "SubmitButton_Click"
            Margin = "5,0,0,-2" VerticalAlignment = "Bottom"/> 
         <TextBlock x:Name = "Control1Output" FontSize = "24"/> 
      </StackPanel> 
   </Grid> 
	
</Page>

Đây là triển khai sự kiện nhấp chuột trong C # –

using System; 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls;

namespace XAMLTimePicker {
   public sealed partial class MainPage : Page {
      public MainPage() { 
         this.InitializeComponent(); 
      }
      private void SubmitButton_Click(object sender, RoutedEventArgs e) {
         if (VerifyTimeIsAvailable(arrivalTimePicker.Time) == true) {
            Control1Output.Text = string.Format("Thank you. Your appointment is set for {0}.",
               arrivalTimePicker.Time.ToString());
         } else {
            Control1Output.Text = "Sorry, we're only open from 8AM to 5PM.";
         }
      }
      private bool VerifyTimeIsAvailable(TimeSpan time) {
         // Set open (8AM) and close (5PM) times. 
         TimeSpan openTime = new TimeSpan(8, 0, 0); 
         TimeSpan closeTime = new TimeSpan(17, 0, 0);
		
         if (time >= openTime && time < closeTime) { 
            return true; // Open 
         }
         return false; // Closed 
      }
   }
}

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ hiển thị kết quả sau. Khi thời gian được chọn từ 8 giờ sáng đến 5 giờ chiều, nó sẽ hiển thị thông báo sau:

Nếu không, thông báo sau sẽ được hiển thị:

XAML – ToggleButton

Nút bật tắt là một điều khiển có thể chuyển đổi trạng thái, chẳng hạn như CheckBox và RadioButton. Sự kế thừa phân cấp của lớp ToggleButton như sau:

Đặc tính

Dưới đây là các thuộc tính thường được sử dụng trong lớp ToggleButton.

Sự kiện

Dưới đây là các Sự kiện thường được sử dụng trong lớp ToggleButton.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng ToggleButton trong một ứng dụng XAML. Đây là mã XAML để tạo và khởi tạo một ToggleButton với một số thuộc tính.

<Page x:Class = "XAMLToggleButton.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "using:XAMLToggleButton" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d">
	
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <StackPanel Orientation = "Vertical"> 
         <ToggleButton x:Name = "cb2" Content = "Toggle"
            Checked = "HandleCheck" Unchecked = "HandleUnchecked" 
            Margin = "100" Width = "100" HorizontalAlignment = "Center"/>
         
         <TextBlock x:Name = "text2" Margin = "10" Width = "300"
            HorizontalAlignment = "Center" Height = "50" FontSize = "24"/>
      </StackPanel>
   </Grid> 
	
</Page>

Đây là cách triển khai C # của các sự kiện Đã kiểm tra và Không được kiểm tra –

using System; 
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace XAMLToggleButton {
   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage() { 
         this.InitializeComponent(); 
      }
      private void HandleCheck(object sender, RoutedEventArgs e) {
         text2.Text = "Button is Checked"; 
      }
      private void HandleUnchecked(object sender, RoutedEventArgs e) {
         text2.Text = "Button is unchecked."; 
      } 
   }
}

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau:

XAML – công cụ

ToolTip là một điều khiển tạo ra một cửa sổ bật lên hiển thị thông tin cho một phần tử trong GUI. Sự kế thừa phân cấp của lớp ToolTip như sau:

Đặc tính

Dưới đây là các thuộc tính thường được sử dụng của lớp ToolTip.

Sự kiện

Dưới đây là các Sự kiện thường được sử dụng của lớp ToolTip.

Thí dụ

Ví dụ sau đây cho thấy cách sử dụng ToolTip trong ứng dụng XAML. Đây là mã XAML trong đó ToolTip được tạo với một số thuộc tính để hiển thị ToolTip trên Button và TextBlock.

<Window x:Class = "XAMLToolTip.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">

   <Grid> 
      <StackPanel Orientation = "Vertical">
         <Button Content = "Button with a simple ToolTip."
            ToolTipService.ToolTip = "Simple ToolTip" Width = "200" Margin = "50" />
         
         <!-- A TextBlock with an offset ToolTip. -->
         <TextBlock Text = "TextBlock with an offset ToolTip." Width = "200" Margin = "50"> 
            <ToolTipService.ToolTip> 
               <ToolTip Content = "Offset ToolTip." HorizontalOffset = "20" VerticalOffset = "30"/> 
            </ToolTipService.ToolTip>
         </TextBlock> 
      </StackPanel> 
   </Grid> 
	
</Window>

Khi đoạn mã trên được biên dịch và thực thi bằng ToolTip on Button và TextBlock, nó sẽ tạo ra kết quả sau:

XAML – Cửa sổ (xem thêm)

The post XAML – TimePicker appeared first on Dongthoigian.net.

Đặc tính

Dưới đây là các thuộc tính thường được sử dụng của lớp SearchBox.

Sự kiện

Dưới đây là các sự kiện thường được sử dụng của SearchBox.

Phương pháp

Dưới đây là các phương pháp thường được sử dụng của SearchBox.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng SearchBox trong ứng dụng XAML. Đây là mã XAML để tạo và khởi tạo một SearchBox với một số thuộc tính và sự kiện.

<Page x:Class = "XAML_SearchBox.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "using:XAML_SearchBox" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d">
	
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
      <SearchBox x:Name = "mySearchBox"
         FocusOnKeyboardInput = "False"
         QuerySubmitted = "mySearchBox_QuerySubmitted" 
         Height = "35" Width = "400" Margin = "234,132,732,601"/>
   </Grid> 
	
</Page>

Đây là cách triển khai trong C # cho truy vấn tìm kiếm

using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 
using System.Runtime.InteropServices.WindowsRuntime; 

using Windows.Foundation; 
using Windows.Foundation.Collections;

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Controls.Primitives; 
using Windows.UI.Xaml.Data; 
using Windows.UI.Xaml.Input; 
using Windows.UI.Xaml.Media; 
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=2344387

namespace XAML_SearchBox { 
   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage() { 
         this.InitializeComponent(); 
      } 
      private void mySearchBox_QuerySubmitted(SearchBox sender,
         SearchBoxQuerySubmittedEventArgs args) { 
         
         this.Frame.Navigate(typeof(SearchResultsPage1), args.QueryText);
      } 
   }
}

Trong dự án Ứng dụng Windows cho ví dụ này, hãy thêm Trang kết quả tìm kiếm với tên SearchResultsPage1.xaml . Việc triển khai mặc định là đủ để chạy Ứng dụng này. Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau:

XAML – Thanh trượt

Slider là một điều khiển với sự trợ giúp mà người dùng có thể chọn từ một loạt các giá trị bằng cách di chuyển một điều khiển Ngón cái dọc theo một bản nhạc. Sự kế thừa phân cấp của lớp Slider như sau:

Đặc tính

Dưới đây là các thuộc tính thường được sử dụng của Slider.

Sự kiện

Dưới đây là các sự kiện thường được sử dụng trong lớp Slider.

Phương pháp

Dưới đây là các phương thức thường được sử dụng trong lớp Slider.

Thí dụ

Ví dụ sau đây cho thấy cách sử dụng Slider trong ứng dụng XAML. Đây là mã XAML để tạo Slider và các khối văn bản với một số thuộc tính và sự kiện.

<Window x:Class = "XAMLSlider.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "525">
	
   <Grid>
      <StackPanel> 
         <TextBlock Text = "Slider with ValueChanged event handler:" Margin = "10"/> 
         <Slider x:Name = "slider2" Minimum = "0" Maximum = "100"
            TickFrequency = "2" TickPlacement = "BottomRight"
            ValueChanged = "slider2_ValueChanged" Margin = "10"/>
         <TextBlock x:Name = "textBlock1" Margin = "10" Text = "Current value: 0" />
      </StackPanel>
   </Grid> 
	
</Window>

Đây là cách triển khai trong C # cho sự kiện ValueChanged

using System; 
using System.Windows; 
using System.Windows.Controls;

namespace XAMLSlider {
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window {
      public MainWindow() { 
         InitializeComponent(); 
      } 
      //private void slider2_ValueChanged(object sender,RangeBaseValueChangedEventArgs e)
      //{ 
         // string msg = String.Format("Current value: {0}", e.NewValue); 
         // this.textBlock1.Text = msg; 
      //}
      
      private void slider2_ValueChanged(object sender,RoutedPropertyChangedEventArgs<double> e) {
         int val = Convert.ToInt32(e.NewValue);
         string msg = String.Format("Current value: {0}", val);
         this.textBlock1.Text = msg; 
      } 
   }
}

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau:

XAML – TextBlock

TextBlock cung cấp một điều khiển nhẹ để hiển thị một lượng nhỏ văn bản chỉ đọc. Sự kế thừa phân cấp của lớp TextBlock như sau:

Đặc tính

Dưới đây là các thuộc tính thường được sử dụng của lớp TextBlock.

Sự kiện

Dưới đây là các sự kiện thường được sử dụng của lớp TextBlock.

Phương pháp

Dưới đây là các phương thức thường được sử dụng trong lớp TextBlock.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng TextBlock trong ứng dụng XAML. Đây là mã XAML để tạo và khởi tạo TextBlock với một số thuộc tính.

<Window x:Class = "XAMLTextBlock.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Grid> 
      <StackPanel> 
         <TextBlock FontFamily = "Verdana" 
            LineStackingStrategy = "MaxHeight" 
            LineHeight = "10" Width = "500" TextWrapping = "Wrap">
				
            Use the <Run FontSize = "30"> LineStackingStrategy</Run> 
            property to determine how a line box is created for each line. 
            A value of <Run FontSize = "20">MaxHeight</Run> 
            specifies that the stack height is the smallest value 
            that contains all the inline elements on that line 
            when those elements are properly aligned. 
            A value of <Run FontSize = "20">BlockLineHeight</Run> 
            specifies that the stack height is determined by 
            the block element LineHeight property value.
         </TextBlock>
      </StackPanel> 
   </Grid>
   
</Window>

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau:

XAML – TimePicker (xem thêm)

The post XAML – SearchBox appeared first on Dongthoigian.net.