Fatal编程技术网
  • csharp/
  • C# WPF表单XAML：如何正确定位这些控件（并使按钮在单击时正常运行）

C# WPF表单XAML：如何正确定位这些控件（并使按钮在单击时正常运行）

c# wpf xaml

C# WPF表单XAML：如何正确定位这些控件（并使按钮在单击时正常运行）,c#,wpf,xaml,C#,Wpf,Xaml,所以，我是WPF的新手。实际上，这是我的第一个WPF项目。我来自unix桌面（和Web）编程背景，所以我对编程或标记语言并不陌生 Q1:首先，我的应用程序是一个简单的对话框，不能最小/最大化或调整大小（为简单起见），所以我不介意修改（即硬编码）我的布局 使用HTML进行解释，这就是我希望我的“表单”的外观： <div> <div> <span>This is my Left Adjusted Title</span>

所以，我是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>


这是我的左标题
一些合适的东西
这是父容器
选项1的标题
选项1的单选按钮
选项2的标题
选项2的单选按钮
右浮动按钮


这些是结果
这里的垂直滚动文本（如果可以使用下划线等进行颜色格式化，则很好）。。。
另一方面，这是我的XAML（我从可视化设计器中拼凑而成）：


第一组
备选案文1-1
备选案文1-2
备选案文1-3
点击这里
如何修复此XAML，使其以HTML代码段中显示的方式呈现

Q2:为什么WPF渲染按钮的行为不像按钮？。这真是太奇怪了，点击时它不会压抑，我如何才能获得“正常”的按钮点击行为？

我（大部分）更新了您的XAML，附在下面，让您从正确的方向开始。值得注意的是，正如布拉德利·乌夫纳（Bradley Uffner）所提到的，请注意元素如何通过
行定义和
网格.Row
附加属性在
网格中排列

此外，当您在WPF中取得进展时，请查看MVVM模式，因为它创建了更干净、更逻辑的代码，更易于维护。为此，您需要开始熟悉WPF中的
绑定
表达式，如

我已经保留了大多数静态的
高度
定义，但您也可以通过
行定义
上的
高度
和
列定义
上的
宽度
的任意组合动态调整这些控件，以及控件本身的
水平对齐
和
垂直对齐


<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>




第一组
备选案文1-1
备选案文1-2
备选案文1-3



编辑：我忘了指出这一点，因为您是通过
边距来安排所有内容的，并且有些元素有一些奇怪的大小和布局（即“单击此处”链接）您的
按钮
没有按预期运行的原因是它的顶部覆盖了其他控件。
您的控件都没有实际使用它们所属的
网格
，它们都是静态定位的。网格应该有列和行定义，每个控件都应该有grid.Column和grid.Row属性。您可能需要嵌套一些内部网格或堆栈面板以获得所需的精确布局。请为您面临的每个单独问题创建一个单独的SO问题。@BradleyUffner提供了您需要的内容。我可以进一步向您展示，但我不确定包含“单击此处”超链接的
TextBlock
是怎么回事，它涵盖了窗口中的所有其他内容。实际上应该是什么样子的？请记住，如果您使用MVVM模式，您将与WPF相处得更好。事情会变得更好，即使如果你不习惯的话，这可能会让你的思维有点混乱。这意味着重复项（如单选按钮）不应硬编码为3个单独的项，而应为绑定到视图模型上列表的单个重复项类型控件。+1太棒了！，谢谢不知何故，我现在可以在XAML和HTML之间建立心理联系。代码片段中的“单击此处”部分是个麻烦，我只是在尝试用XAML呈现不同的控件。这就是当时的布局。最后但并非最不重要的一点，您知道为什么按钮的行为与普通按钮不同吗？。HomunculusReticulli添加了一个编辑，为什么点击时它不会变得“沮丧”，我该如何解决这个问题。当我最初去更新布局时，我就想到了这一点，但在我发布答案时，我忘记了包含该注释。我刚刚测试了您提供的XAML，但是按钮行为保持不变。所谓“正常”，我的意思是，当点击按钮时，我希望（期望）按钮在视觉上看起来是被按下的（我认为添加了阴影效果），这样当点击按钮时，它看起来像是被按下的。这对视力受损的用户很有帮助，否则，当他们将鼠标按在b上时，可能不会意识到按钮点击

<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>