将堆叠板并排放置

时间:2014-06-19 14:21:50

标签: c# wpf xaml

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

4 个答案:

答案 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设置为Horizo​​ntal

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

谢谢你们,显然我做的比我想象的要困难。我将堆栈面板中的所有方向更改为“水平”,并将我的面板移动到与另一个相同的行。我甚至不需要添加网格。经验教训。