WPF表单XAML:如何正确定位这些控件(并使按钮在单击时表现正常)
本文关键字：单击 按钮 XAML 表单 何正确 定位 控件 WPF | 更新日期: 2023-09-27 18:21:36
所以，我是WPF的新手。实际上，这是我的第一个WPF项目。我来自unix桌面（和Web）编程背景，所以我对编程或标记语言并不陌生。
Q1:首先，我的应用程序是一个简单的对话框，不能最小化/最大化或调整大小（为了简单起见），所以我不介意修复（即硬编码）我的布局。
使用HTML来解释，这就是我想要的"表单"的样子：
<div>
<div>
<span>This is my Left Adjusted Title</span>
<span>Some Right Adjusted Stuff</span>
</div>
<div>
<div>
<div>This is the parent container</div>
<div>
<div>Title for option 1</div>
<div>
Radio Button for option 1
</div>
<div>Title for option 2</div>
<div>
Radio Buttons for option 2
</div>
</div>
</div>
<div>
<span>Right Floated Button</span>
</div>
<hr />
<div>
<div>These are the Results</div>
<textarea>
Vertically scrollable text here (nice if can be color formatted with underlines etc) ...
</textarea>
</div>
<div id="footer">
<div><a href='http://www.google.com'>Click here</a></div>
</div>
</div>
</div>
另一方面，这是我的XAML（我从Visual Designer中拼凑而成）：
<Window x:Name="wndMain" x:Class="MyApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ews="clr-namespace:ExtraWindowStyles"
ResizeMode="NoResize"
ews:ExtraWindowStyles.CanMinimize="false"
ews:ExtraWindowStyles.CanMaximize="false"
Title="Hello World" Height="501.492" Width="842.285">
<Grid>
<GroupBox Header="Input Parameters" HorizontalAlignment="Left" Height="173" Margin="10,25,0,0" VerticalAlignment="Top" Width="801" >
<StackPanel Orientation="Horizontal" Margin="0,0,96,0">
<StackPanel Margin="10">
<Label FontWeight="Bold">First Group</Label>
<RadioButton x:Name="opt11">Option 1 - 1</RadioButton>
<RadioButton x:Name="opt12">Option 1 - 2</RadioButton>
<RadioButton x:Name="opt13">Option 1 - 3</RadioButton>
</StackPanel>
<StackPanel Margin="10">
<Label FontWeight="Bold" Content="Second Group"/>
<RadioButton x:Name="opt21" Content="Option 2 - 1"/>
<RadioButton x:Name="opt22" Content="Option 2 - 2"/>
<RadioButton x:Name="opt23" Content="Option 2 - 3"/>
</StackPanel>
</StackPanel>
</GroupBox>
<Separator HorizontalAlignment="Left" Height="80" Margin="17,203,0,0" VerticalAlignment="Top" Width="794"/>
<Button x:Name="btnSubmit" Content="Explore" HorizontalAlignment="Left" Height="34" Margin="632,203,0,0" VerticalAlignment="Top" Width="179" Click="btnSubmit_Click" />
<Label Content="Results:" HorizontalAlignment="Left" Height="28" Margin="10,242,0,0" VerticalAlignment="Top" Width="161"/>
<Label Content="My App" HorizontalAlignment="Left" Height="23" Margin="696,439,0,0" VerticalAlignment="Top" Width="130" FontSize="9"/>
<TextBlock>
<Hyperlink NavigateUri="http://www.google.com" RequestNavigate="Hyperlink_RequestNavigate">
Click Here
</Hyperlink>
</TextBlock>
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="162" Margin="17,270,0,0" Stroke="Black" VerticalAlignment="Top" Width="794"/>
<Label x:Name="lblResult" Content="" HorizontalAlignment="Left" Height="157" Margin="17,275,0,0" VerticalAlignment="Top" Width="794"/>
</Grid>
</Window>
如何修复此XAML，使其按照我在HTML片段中显示的方式呈现？
Q2:为什么WPF渲染的按钮的行为不像按钮？。这真的很糟糕，点击时不会按下，我如何获得"正常"按钮点击行为？
我（主要）更新了您的XAML，附在下面，让您朝着正确的方向开始。值得注意的是，正如Bradley Uffner所提到的，要注意元素是如何通过RowDefinitions和Grid.Row附加属性在Grid中排列的。
此外，随着您在WPF中的进展，请研究MVVM模式，因为它创建了更干净、更逻辑的代码，更易于维护。为此，您需要开始熟悉WPF中的Binding表达式，例如可以在数据绑定入门中找到的表达式。
我已经保留了大部分静态Height定义，但您也可以通过RowDefinition上的Height、ColumnDefinition上的Width以及控件本身的HorizontalAlignment和VerticalAlignment的任意组合来允许这些控件动态适应。
<Window x:Name="wndMain" x:Class="MyApp.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:WpfControlPositioning"
mc:Ignorable="d"
ResizeMode="NoResize"
Title="Hello World" Height="501.492" Width="842.285"
WindowStyle="ToolWindow">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GroupBox Grid.Row="0" Header="Input Parameters" Height="173" Margin="10">
<StackPanel Orientation="Horizontal">
<StackPanel Margin="10">
<Label FontWeight="Bold">First Group</Label>
<RadioButton x:Name="opt11">Option 1 - 1</RadioButton>
<RadioButton x:Name="opt12">Option 1 - 2</RadioButton>
<RadioButton x:Name="opt13">Option 1 - 3</RadioButton>
</StackPanel>
<StackPanel Margin="10">
<Label FontWeight="Bold" Content="Second Group"/>
<RadioButton x:Name="opt21" Content="Option 2 - 1"/>
<RadioButton x:Name="opt22" Content="Option 2 - 2"/>
<RadioButton x:Name="opt23" Content="Option 2 - 3"/>
</StackPanel>
</StackPanel>
</GroupBox>
<Separator Grid.Row="1" Height="3" Margin="10,0"/>
<Button Grid.Row="2" x:Name="btnSubmit" Content="Explore" HorizontalAlignment="Right" Height="34" Margin="10" Width="179" Click="btnExplore_Click" />
<Label Grid.Row="3" Content="Results:" HorizontalAlignment="Left" Margin="10,0"/>
<!-- I don't know what to make of this, so I've left it commented out.
<TextBlock>
<Hyperlink NavigateUri="http://www.google.com" RequestNavigate="Hyperlink_RequestNavigate">
Click Here
</Hyperlink>
</TextBlock>
-->
<!-- Note that I've substituted a ReadOnly TextBox in place of the Rectangle + Label here. The TextBox supplies
the bordered look of the rectangle, but has the different behavior of allowing text selection from within
the control, such as for copying your Results to paste elsewhere. -->
<TextBox Grid.Row="4" x:Name="lblResult" Margin="10,0" IsReadOnly="True" Background="#FFF4F4F5" BorderBrush="Black"/>
<Label Grid.Row="5" Content="My App" HorizontalAlignment="Right" Height="23" Margin="0" FontSize="9"/>
</Grid>
</Window>
编辑：我忘了指出，由于您通过Margin排列所有内容，并且某些元素的大小和布局有些奇怪（即"单击此处"链接），因此Button的行为不如预期，是因为它的顶部覆盖了其他控件。