为WPF项选择布局控件

Question

我正在尝试学习WPF ..虽然，我在布局方面遇到了麻烦，可以选择哪一个。我不想使用canvas，因为重点是获得WPF的支持..

我决定将我的一个简单程序（在Windows窗体中）转移到WPF ..

我附上了简单的1页表单的图片。有人可以建议我如何在WPF中复制这个吗？

Answer 1

表单布局是一个有趣的困境。它们通常涉及很多样板，有许多技术可以在表单布局中删除样板代码，但它们是相当高级的WPF概念。

最简单的解决方案将是StackPanel，用于布置您的部分并将Grid放入GroupBox控件中。

Grid可以设置4个colunms：

1. Col 1 Label
2. Col 1 Body
3. Col 2 Label
4. Col 2 Body

在堆栈面板的资源中使用全局样式，您可以定义默认的可视行为，以便项目最终不会触及：

<Style TargetType="TextBox">
  <Setter Property="Margin" "0,0,5,5" />
</Style>

以上风格将在右侧和右侧放置5px的余量。在可视化树下的所有TextBox控件的底部。

这是在WPF中制作这个ui的绝对最简单（读取：直接）方法。它绝不是最好的，也不是最易维护的，但它最多可以在大约10分钟内完成。

还有其他方法可以使用WPF like this one或使用其他基本布局组件组合来模拟表单布局。

例如：

<StackPanel>
  <!-- Vertical Stack Panel, Stacks Elements on top of each other -->
  <StackPanel Orientation="Horizontal">
    <!-- Horizontal Stack Panel, Stacks Elements left to right -->
    <Label Width="100">This Label is 100units Wide</Label>
    <TextBox />
  </StackPanel>
</StackPanel>

不同的方法有不同的缺点，有些是弹性宽度，有些不是，有些与colunms很好地搭配，有些则没有。我建议尝试使用Panel的许多子类来查看它们的所有内容，或者甚至可以roll your own。

Answer 2

使用Grid作为容器，TextBlock为只读文字，Textbox作为可修改文字和Button。

使用这些元素并使用（例如）XAML：

<Window
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"
x:Class="MainWindow"
Width="640" Height="480" Background="White">

<Grid>
    <TextBlock HorizontalAlignment="Left" Height="20" Margin="34,30,0,0" 
        TextWrapping="Wrap" Text="Connection String" VerticalAlignment="Top" 
        Width="107" Foreground="Black"/>

    <TextBox HorizontalAlignment="Left" Height="18" Margin="170,32,0,0" 
        TextWrapping="Wrap" VerticalAlignment="Top" Width="379"/>

    <Button Content="Save" HorizontalAlignment="Left" Height="26" 
        Margin="529,387,0,0" VerticalAlignment="Top" Width="69"/>        
</Grid>

您可以将所有对象放入Window。但如果您愿意，可以通过编程方式添加元素。这是结果：

Here WPF布局简介。