Làm thế nào tôi có thể sắp xếp nhanh các điều khiển trong một cửa sổ WPF?

Question

Tôi nhận thấy rằng các nhà thiết kế WPF làm một công việc rất nghèo trên aligning các điều khiển, so với các nhà thiết kế Windows Forms.

Trong cửa sổ bên dưới, tôi không thể căn chỉnh từng nhãn để văn bản của nó nằm trên cùng một dòng với văn bản trong hộp văn bản bên cạnh. Nhãn đầu tiên được căn chỉnh chính xác, nhưng trình thiết kế WPF không cho tôi bất kỳ đường thẳng nào để căn chỉnh chính xác hàng thứ hai và thứ ba.

Ngoài ra, tôi không thể căn chỉnh nút bằng nhãn. Các dòng snap đặt nút một vài điểm ảnh về phía trái so với các văn bản nhãn.

Tôi không thể tìm thấy cách nhanh chóng để thực hiện liên kết này theo cách thủ công, cũng có thể viết mã XAML. Đặt các điều khiển trong một lưới, và thiết lập lề của mỗi điều khiển là tốn thời gian.

alt text http://img520.imageshack.us/img520/4843/wpfdesigneralignment.png

Bạn có biết một cách nhanh chóng để sắp xếp các điều khiển trong cửa sổ WPF?

Answer 1

Tôi nghĩ tôi có thể tránh thực hiện căn chỉnh với XAML được mã hóa bằng tay. Những gì tôi đã kết thúc với, được này (phong cách có thể được tái sử dụng trong các cửa sổ khác):

<Window x:Class="WpfApplication1.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" SizeToContent="WidthAndHeight"> 
    <Window.Resources> 
     <Style x:Key="ControlStyle" TargetType="Control"> 
      <Setter Property="HorizontalAlignment" Value="Left"/> 
      <Setter Property="VerticalAlignment" Value="Center"/> 
     </Style> 
     <Style BasedOn="{StaticResource ControlStyle}" TargetType="Label"> 
      <Setter Property="Margin" Value="-4,0,0,0"/> 
     </Style> 
     <Style BasedOn="{StaticResource ControlStyle}" TargetType="TextBox"> 
      <Setter Property="Width" Value="120"/> 
     </Style> 
     <Style BasedOn="{StaticResource ControlStyle}" TargetType="Button"> 
      <Setter Property="MinWidth" Value="70"/> 
     </Style> 
     <Style TargetType="Grid"> 
      <Setter Property="Margin" Value="10,10,10,10"/> 
     </Style> 
     <Style x:Key="SeparatorColumn" TargetType="ColumnDefinition"> 
      <Setter Property="Width" Value="10"/> 
     </Style> 
     <Style x:Key="SeparatorRow" TargetType="RowDefinition"> 
      <Setter Property="Height" Value="3"/> 
     </Style> 
    </Window.Resources> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
      <ColumnDefinition Style="{StaticResource SeparatorColumn}"/> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition/> 
      <RowDefinition Style="{StaticResource SeparatorRow}"/> 
      <RowDefinition/> 
      <RowDefinition Style="{StaticResource SeparatorRow}"/> 
      <RowDefinition/> 
      <RowDefinition Style="{StaticResource SeparatorRow}"/> 
      <RowDefinition/> 
     </Grid.RowDefinitions> 
     <Label Grid.Row="0" Grid.Column="0">Label:</Label> 
     <TextBox Grid.Row="0" Grid.Column="2">TextBox</TextBox> 
     <Label Grid.Row="2" Grid.Column="0">Label:</Label> 
     <TextBox Grid.Row="2" Grid.Column="2">TextBox</TextBox> 
     <Button Grid.Row="4" Grid.ColumnSpan="3">Button</Button> 
     <Label Grid.Row="6" Grid.Column="0">Label:</Label> 
     <TextBox Grid.Row="6" Grid.Column="2">TextBox</TextBox> 
    </Grid> 
</Window> 

Answer 2

Sử dụng lưới để bố trí các điều khiển của bạn, sau đó đảm bảo bạn không có bất kỳ phần đệm nào trên các điều khiển ... trừ khi bạn muốn một số đệm và bạn chắc chắn là chúng đều đều.

Một tìm kiếm Google nhanh chóng quay trở lại một hướng dẫn cơ bản:

Introduction to the WPF Grid Control

Answer 3

Cách tốt nhất là sử dụng lưới hoặc DockPanel.
Trong hầu hết các trường hợp, lề không bắt buộc.

Answer 4

Sử dụng điều khiển Bảng điều khiển thích hợp (StackPanel, DockPanel, v.v.) cho căn chỉnh bạn muốn, thay vì sử dụng Lưới mặc định. Điều khiển lưới giúp dễ dàng bắt đầu kéo các điều khiển vào cửa sổ bất cứ nơi nào bạn muốn (không hoàn toàn không có cấu trúc như Canvas), nhưng không đưa ra bất kỳ giả định nào về loại bố cục bạn đang thực sự cố gắng xây dựng.

Nếu bố cục bạn đang cố gắng thiết kế, trên thực tế, một 'lưới' (hoặc bảng, ví dụ như hàng và cột), tôi khuyên bạn nên sử dụng điều khiển UniformGrid (cho các hàng và cột đều nhau) hoặc Lưới với chiều cao/chiều rộng được đặt cho mỗi hàng/cột và lề trên tất cả các phần tử được đặt thành 0 (để điền đầy đủ ô của nó).

Answer 5

Tôi đã viết một bảng điều khiển tùy chỉnh mà không "bố trí hình thức" (nhóm hai cột, tất cả các nhãn cùng kích thước, tất cả điều khiển cùng kích thước, mọi thứ được căn chỉnh, v.v.), trên blog của tôi tại: http://www.nbdtech.com/Blog/archive/2010/07/27/easy-form-layout-in-wpf-part-1-ndash-introducing-formpanel.aspx

Được thiết kế để sử dụng nhanh chóng và dễ dàng khi chỉnh sửa XAML, tôi thậm chí không thử nó trong nhà thiết kế.