Блог

Главная - Вопросы по программированию - Размещение панелей стека рядом

Размещение панелей стека рядом

#c# #wpf #xaml

#c# #wpf #xaml

Вопрос:

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

Комментарии:

1. Удалите все это и используйте ItemsControl .

Ответ №1:

Вы можете создать новую панель стека со свойством ориентации, установленным на «Horizontal», поместить эту панель во вторую строку вашей сетки, а затем поместить обе панели стека внутрь нее.

В основном:

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

Ответ №2:

вы должны использовать столбец для параллельного размещения элементов управления.

проверьте приведенный ниже код

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

Ответ №3:

Поскольку ваши стековые панели находятся в границе, эта граница определяет их расположение, а не сетку.

Если вы поместите свои панели стека в одну и ту же строку и столбец сетки (и, не указывая, они оба используют нулевой столбец по умолчанию), они будут визуально перекрываться.

Вместо этого вам следует сделать одну из двух вещей

Во-первых, вы могли бы поместить свойства границы из вашего элемента Border в сетку и использовать столбцы вместо строк.

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

Ответ №4:

Спасибо, ребята, видимо, я сделал это сложнее, чем я думал. Я изменил все ориентации в панелях стека на «Горизонтальные», и это переместило мою панель в ту же строку, что и другая. Мне даже не пришлось добавлять сетки. Урок усвоен.