将堆叠面板并排放置
本文关键字： | 更新日期: 2023-09-27 18:09:15
在XAML中，我试图将两个堆栈面板(在图像中)并排放置:
![1]
我正在尝试使用网格。排把两个堆栈面板在同一排，但我一直没有成功。
下面是我的代码: <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>
你可以创建一个新的堆栈面板，方向属性设置为"水平"，把这个面板放在网格的第二行，然后把你的两个堆栈面板都放在里面。
基本上:
<StackPanel Grid.Row="2" Orientation="Horizontal">
<YourFirstStackPanel/>
<YourSecondStackPanel/>
</StackPanel>
你可以实现的另一个解决方案是，在你的网格中创建两列，并将你的堆栈面板放在同一行，但一个在第0列，另一个在第1列。
的例子:
<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>
您应该使用列来并排放置控件。
检查下面的代码
<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>
因为你的堆栈面板是在一个边界，边界决定他们的布局，而不是网格。
如果你把你的stackpanel放在完全相同的网格行和列中(并且没有指定，它们都使用默认的0列)，它们将在视觉上重叠。
你应该做的是以下两件事之一
首先，您可以将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替换边框，它将接受相同的边框参数，并将方向设置为水平
<!-- 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>
谢谢大家，显然我让这个比我想象的更困难。我将所有堆叠面板的方向改为"水平"，这将我的面板移动到与其他面板相同的行。我甚至不需要添加网格。教训。