Control Canvas

Canvas có thể là Panel đơn giản nhất trong số chúng. Nó thực sự không làm bất cứ thứ gì theo mặc định, nó chỉ cho phép bạn đặt điều khiển trong nó và đặt vị trí của chúng một mình sử dụng tọa độ rõ ràng

Nếu bạn đã từng sử dụng một thư viện UI khác như WinForms, điều này có thể sẽ khiến bạn cảm thấy tốt như đang ở nhà bạn vậy, nhưng trong khi việc kiểm soát tuyệt đối tất cả các child control, điều đó cũng có nghĩa là panel sẽ không làm gì cho bạn một khi người dùng bắt đầu thay đổi kích thước cửa sổ của bạn, nếu bạn bản địa hóa văn bản được định vị tuyệt đối hoặc nếu nội dung được thu nhỏ.

Nói thêm về điều đó sau, hãy lấy một ví dụ đơn giản. Điều này chủ yếu là về việc hiển thị cho bạn cách Canvas ít làm theo mặc định:

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Canvas>
</Window>

Như bạn có thể thấy, mặc dù chúng tôi có hai nút, cả hai nút đều được đặt ở cùng một vị trí, vì vậy chỉ có nút cuối cùng được nhìn thấy. Canvas hoàn toàn không làm gì cho đến khi bạn bắt đầu cung cấp tọa độ cho các child control. Điều này được thực hiện bằng cách sử dụng các thuộc tính được đính kèm Trái, Phải, Trên và Dưới từ Canvas.

Các thuộc tính này cho phép bạn chỉ định vị trí liên quan đến bốn cạnh của Canvas. Theo mặc định, tất cả chúng đều được đặt thành NaN (Không phải là Số), điều này sẽ khiến Canvas đặt chúng ở góc trên bên trái, nhưng như đã đề cập, bạn có thể dễ dàng thay đổi điều này:

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button Canvas.Left="10">Top left</Button>
		<Button Canvas.Right="10">Top right</Button>
		<Button Canvas.Left="10" Canvas.Bottom="10">Bottom left</Button>
		<Button Canvas.Right="10" Canvas.Bottom="10">Bottom right</Button>
	</Canvas>
</Window>

Lưu ý cách tôi chỉ đặt thuộc tính hoặc thuộc tính mà tôi cần. Đối với hai nút đầu tiên, tôi chỉ muốn chỉ định một giá trị cho trục X, vì vậy tôi sử dụng các thuộc tính Trái và Phải để đẩy các nút về phía trung tâm, từ mỗi hướng.

Đối với các nút dưới cùng, tôi sử dụng cả Trái / Phải và Dưới để đẩy chúng về phía trung tâm theo cả hai hướng. Bạn thường sẽ chỉ định giá trị Trên cùng hoặc Dưới cùng và / hoặc Giá trị Trái hoặc Phải.

Như đã đề cập, vì Canvas cung cấp cho bạn quyền kiểm soát hoàn toàn các vị trí, nên sẽ không thực sự quan tâm liệu có đủ chỗ cho tất cả các control của bạn hay nếu một vị trí nào đó nằm trên vị trí khác. Điều này làm cho nó trở thành một lựa chọn tồi cho hầu hết mọi loại thiết kế hộp thoại, nhưng Canvas, đúng như tên gọi, tuyệt vời cho ít nhất một điều: Vẽ tranh. WPF có một loạt các control mà bạn có thể đặt bên trong Canvas, để tạo ra các minh họa đẹp.

Thuộc tính Z-Index

Trong ví dụ tiếp theo, chúng tôi sẽ sử dụng một vài điều khiển liên quan đến hình dạng của WPF để minh họa một khái niệm rất quan trọng khác khi sử dụng Canvas: Z-Index. Thông thường, nếu hai control trong một Canvas phủ chồng lên nhau, thì một control được xác định cuối cùng trong đánh dấu sẽ được ưu tiên và chồng lên một hoặc nhiều control khác. Tuy nhiên, bằng cách sử dụng thuộc tính Z Index đính kèm trên lớp panel, điều này có thể dễ dàng thay đổi.

Đầu tiên, một ví dụ mà chúng tôi không sử dụng thuộc tính z-index:

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

Lưu ý rằng vì mỗi hình chữ nhật được xác định sau hình tròn, tất cả chúng đều chồng lên hình tròn và mỗi hình chữ nhật sẽ chồng lên hình chữ nhật được khai báo trước đó. Hãy thử thay đổi điều đó:

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Panel.ZIndex="2" Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Panel.ZIndex="3" Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="2" Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="4" Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

Giá trị Z Index mặc định là 0, nhưng chúng tôi gán một giá trị mới cho mỗi hình. Quy tắc là phần tử có chỉ số z cao hơn sẽ nằm chồng lên các phần tử có giá trị thấp hơn. Nếu hai hình có giá trị giống nhau, phần tử được xác định cuối cùng sẽ "thắng". Như bạn có thể thấy từ ảnh chụp màn hình, việc thay đổi thuộc tính ZIndex mang lại một cái nhìn hoàn toàn khác