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

孔雀

因此,我是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呈现的按钮的行为不像按钮?这真的很奇怪,单击时不会压下,如何获得“正常”按钮的单击行为?

迈克·古思里

我(大部分)更新了下面随附的XAML,以帮助您朝正确的方向开始。值得注意的是,如Bradley Uffner所述,请注意元素在Grid通孔RowDefinitionsGrid.Row附加属性中的排列方式

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

我保留了大多数静态Height定义,但是您也可以通过Heighton RowDefinitionWidthon ColumnDefinition,andHorizontalAlignmentVerticalAlignment控件本身的任意组合来使这些控件动态地适应

<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行为不符合预期的原因是因为它具有其他控件叠加在其顶部。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

单击按钮时WPF更改按钮上的xaml图标

来自分类Dev

单击Winforms控件时如何释放WPF控件捕获的鼠标

来自分类Dev

单击按钮在WPF中添加动态控件

来自分类Dev

WPF图像按钮控件

来自分类Dev

使按钮在XAML中以WPF格式旋转

来自分类Dev

如何从XAML设置WPF用户控件属性?

来自分类Dev

WPF按钮单击事件

来自分类Dev

WPF按钮单击事件

来自分类Dev

C# WPF 如何在按钮单击时使用线程运行异步任务

来自分类Dev

WPF Webbrowser控件禁用放置

来自分类Dev

c#WPF,如何在单击按钮时展开表格?

来自分类Dev

单击“ X”按钮时如何关闭WPF应用程序

来自分类Dev

单击WPF上的按钮时如何播放不同的.wav

来自分类Dev

按钮单击wpf时如何验证空文本框?

来自分类Dev

单击按钮时禁用 wpf winow

来自分类Dev

在WPF中单击后如何释放按钮?

来自分类Dev

使用 INotifyPropertyChanged 如何单击 wpf 按钮

来自分类Dev

WPF单击更改按钮背景

来自分类Dev

以编程方式单击WPF按钮

来自分类Dev

WPF单击更改按钮背景

来自分类Dev

以编程方式单击WPF按钮

来自分类Dev

单击行为后的WPF按钮

来自分类Dev

WPF中用户控件内的按钮无法正确触发

来自分类Dev

wpf:如何弹出用户控件?

来自分类Dev

wpf:如何弹出用户控件?

来自分类Dev

如何通过 XAML 在 WPF TabControl 中添加控件

来自分类Dev

WPF ListBox WPF XAML内部的顶部对齐

来自分类Dev

查找放置在ListView Wpf中的控件

来自分类Dev

单击时WPF ContextMenu消失