WPF XAML格式：如何正确放置这些控件（并使按钮在单击时正常运行）

Question

因此，我是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代码段中显示的方式？

问题2：为什么WPF呈现的按钮的行为不像按钮？ 这真的很奇怪，单击时不会压下，如何获得“正常”按钮的单击行为？

Answer 1

我（大部分）更新了下面随附的XAML，以帮助您朝正确的方向入手。 值得注意的是，如Bradley Uffner所述，请注意如何通过RowDefinitions和Grid.Row附加属性在Grid中安排元素。

此外，随着您在WPF中的进展，请查看MVVM模式，因为它创建了更简洁，更多的逻辑代码，并且更易于维护。 为此，您需要开始熟悉WPF中的Binding表达式，例如可以在A Data Binding Primer中找到的 。

我已经离开你的大部分静态Height定义的地方，但你也可以让这些控件通过任意组合动态适应Height上RowDefinition ， Width上ColumnDefinition和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安排所有内容，并且某些元素的尺寸和布局有些奇怪（例如，“ Click Here”链接），因此Button行为不符合预期是因为还有其他控件覆盖在其顶部。