在XAML中,我试图将两个堆叠面板(在图像中)并排放置:
![在此处输入图片说明] [1]
我正在尝试使用Grid.Row将两个堆栈面板放在同一行,但是我还没有成功。
以下是我的代码:
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition ></RowDefinition>
</Grid.RowDefinitions>
<Border BorderBrush="Black" BorderThickness="1" Width="auto" Height="auto" Margin="10,0,0,0">
<StackPanel Margin="10,5,279,0" Name="ConnectUpsStackPanel" >
<Label Name="ConnectUpsLabel" Height="28" VerticalAlignment="Top" HorizontalAlignment="Left" Width="93">Connect-Ups</Label>
<Border BorderBrush="Black" BorderThickness="1" Height="235" Grid.Row="1" >
<!--Caution Codes Stack-->
<StackPanel HorizontalAlignment="Left" Margin="0,0,0,10" Name="CautionCodeStackPanel" Height="Auto" Orientation="Horizontal" Grid.Row="1">
<StackPanel Name="CautionCodesReviewStackPanel" >
<GroupBox Header="Caution Codes" Margin="0,0,0,0" HorizontalAlignment="Left" Width="137" BorderThickness="2" Height="217">
<ScrollViewer VerticalScrollBarVisibility="Visible">
<Grid Name="grdCautionCodes" Width="104" Background="SeaShell" Height="203"></Grid>
</ScrollViewer>
</GroupBox>
</StackPanel>
<StackPanel>
<Button ToolTip="Create Connect-Up" Margin="0,0,5,0" Width="0.75 in" Click="btnCreateConnectUp_Click" HorizontalAlignment="Left" Height="72">
<TextBlock FontSize="18" TextAlignment="Center">Add</TextBlock>
</Button>
<Button ToolTip="Delete Connect-Up" Margin="0,0,5,0" Name="btnDeleteConnectUp1" Width="0.75 in" FontSize="11" Click="btnbtnDeleteConnectUp1_Click" Height="0.75 in" >
<TextBlock FontSize="18" TextAlignment="Center">Delete</TextBlock>
</Button>
<Button ToolTip="Delete Connect-Up" Margin="0,0,5,0" Name="btnDeleteConnectUp2" Width="0.75 in" FontSize="11" Click="btnbtnDeleteConnectUp2_Click" Height="0.75 in" f>
<TextBlock FontSize="18" TextAlignment="Center">Delete</TextBlock>
</Button>
</StackPanel>
</StackPanel>
</Border>
<StackPanel Margin="0,0,0,0" Name="ExternalStackPanel" Grid.Row="1" Orientation="Horizontal">
<Border BorderBrush="Black" BorderThickness="1" Height="226" Margin="0,0,0,0" Width="306">
<WrapPanel Margin="0,0,26,0" x:Name="ExternalWrapPanel">
<StackPanel Margin="0,0,5,0" x:Name="NumberStackPanel" Grid.Column="1" >
<Label HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="EternalLabel" VerticalAlignment="Top" Width="52" Content="External"/>
<Label HorizontalAlignment="Left" x:Name="pobLabel" VerticalAlignment="Top" Content="Number"/>
<TextBox HorizontalAlignment="Left" x:Name="NumTextBox1" Height="23" Width="130" Text="{Binding POB}" MaxLength="30" />
<TextBox HorizontalAlignment="Left" Margin="0,5,0,0" x:Name="NumTextBox2" Height="23" Width="130" Text="{Binding POB}" MaxLength="30" />
<TextBox HorizontalAlignment="Left" Margin="0,5,0,0" x:Name="NumTextBox3" Height="23" Width="130" Text="{Binding POB}" MaxLength="30" />
<TextBox HorizontalAlignment="Left" Margin="0,5,0,0" x:Name="NumTextBox4" Height="23" Width="130" Text="{Binding POB}" MaxLength="30"/>
<TextBox HorizontalAlignment="Left" Margin="0,5,0,0" x:Name="NumTextBox5" Height="23" Width="130" Text="{Binding POB}" MaxLength="30"/>
<TextBox HorizontalAlignment="Left" Margin="0,5,0,0" x:Name="NumTextBox6" Height="23" Width="130" Text="{Binding POB}" MaxLength="30" my:SearchProps.SearchType="PersonPlaceOfBirth"/>
</StackPanel>
<StackPanel Margin="5,25,0,0" x:Name="PersonStackPanel" Height="197">
<Label x:Name="PersonLabel" Height="28" VerticalAlignment="Top" HorizontalAlignment="Left" Width="58" Content="Person"/>
<telerik:ComboBox DisplayMemberPath="NAME" Height="23" ItemsSource="{Binding}" x:Name="PersonyComboBox1" />
<telerik:ComboBox Margin="0,5,0,0" DisplayMemberPath="NAME" Height="23" ItemsSource="{Binding}" x:Name="PersonComboBox2" />
<telerik:ComboBox Margin="0,5,0,0" DisplayMemberPath="NAME" Height="23" ItemsSource="{Binding}" x:Name="PersonComboBox3" />
<telerik:ComboBox Margin="0,5,0,0" DisplayMemberPath="NAME" Height="23" ItemsSource="{Binding}" x:Name="PersonComboBox4" />
<telerik:ComboBox Margin="0,5,0,0" DisplayMemberPath="NAME" Height="23" ItemsSource="{Binding}" x:Name="PersonComboBox5" />
<telerik:ComboBox Margin="0,5,0,0" DisplayMemberPath="NAME" Height="23" ItemsSource="{Binding}" x:Name="PersonComboBox6" />
</StackPanel>
</WrapPanel>
</Border>
</StackPanel>
</StackPanel>
</Border>
</Grid>
答案 0 :(得分:2)
您可以创建一个新的堆栈面板,Orientation属性设置为&#34;水平&#34;,将此面板放在网格的第二行,然后将两个堆栈面板放在其中
基本上:
<StackPanel Grid.Row="2" Orientation="Horizontal">
<YourFirstStackPanel/>
<YourSecondStackPanel/>
</StackPanel>
您可以实现的另一个解决方案是在网格中创建两列,并将堆栈面板放在同一行上,但一列放在第0列,另一列放在第一列。
示例:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0">...</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1">...</StackPanel>
</Grid>
答案 1 :(得分:1)
您应该使用列进行并排控制放置。
检查以下代码
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="248*"/>
<ColumnDefinition Width="269*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<Button Content="Button 1"/>
<Button Content="Button 2"/>
</StackPanel>
<StackPanel Grid.Column="1">
<Button Content="Button 3"/>
<Button Content="Button 4"/>
</StackPanel>
</Grid>
答案 2 :(得分:1)
由于您的堆叠面板位于边框中,因此边框确定其布局,而不是网格。
如果您将堆叠面板放在完全相同的网格行和列中(并且未指定,则它们都使用默认的零列),它们会在视觉上重叠。
你应该做的是两件事之一
首先,您可以将Border元素的border属性放入网格中,然后使用Columns而不是Rows。
<Grid.ColumnDefinitions>
<!-- Width="*" to assure that the controls get equals spacing -->
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">...</StackPanel>
<StackPanel Grid.Column="1">...</StackPanel
或者,您可以使用StackPanel替换Border,它将接受相同的边框参数,并将Orientation设置为Horizontal
<!-- Instead of "Border"...-->
<StackPanel BorderBrush="Black" BorderThickness="1" Width="auto" Height="auto" Margin="10,0,0,0"
Orientation="Horizontal">
<StackPanel Margin="10,5,279,0" Name="ConnectUpsStackPanel" Width="*">...</StackPanel>
<StackPanel Margin="0,0,0,0" Name="ExternalStackPanel" Width="*" Orientation="Horizontal">...</StackPanel>
</StackPanel>
答案 3 :(得分:0)
谢谢你们,显然我做的比我想象的要困难。我将堆栈面板中的所有方向更改为“水平”,并将我的面板移动到与另一个相同的行。我甚至不需要添加网格。经验教训。