Пограничная упаковка неправильного элемента в WPF

Question

Я пытаюсь добавить границу для некоторых элементов управления в XAML - проблема в том, что всякий раз, когда я применяю обертывание определенного элемента, он обертывает все окно, возможно, на первый элемент сетки?

Это также происходит, когда я пытаюсь использовать его в WebBrowser. Какие-либо предложения?

<Window x:Class="WpfApplication2.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="RAT-t00l" Height="850" Width="700"> 
    <Grid x:Name="BigGrid" HorizontalAlignment="Right" Width="682"> 

     <TextBox Name="txt_Log" HorizontalAlignment="Left" Height="657" Margin="4,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="417" IsReadOnly="True"/> 
     <Button Name="btn" Click="btn_Connect_Click" Background="LightGreen" Content="Connect" HorizontalAlignment="Left" Margin="266,680,0,0" VerticalAlignment="Top" Width="75"/> 
     <Button Name="btn_disc" Click="btn_Disconnect_Click" Background="Pink" Content="Disconnect" HorizontalAlignment="Left" Margin="346,680,0,0" VerticalAlignment="Top" Width="75"/> 
     <Button Name="btn_fetch" Click="btn_Fetch_Click" Content="Fetch data" HorizontalAlignment="Left" Margin="266,707,0,0" VerticalAlignment="Top" Width="155" Height="24"/> 
     <Button Name="btn_eraseLog" Click="btn_EraseLog_Click" Content="Erase log from target" HorizontalAlignment="Left" Margin="266,736,0,0" VerticalAlignment="Top" Width="155" Height="25"/> 



      <WebBrowser 

      Name="map" 
        HorizontalAlignment="Left" 
        Height="347" 
        Margin="426,10,0,0" 
        VerticalAlignment="Top" 
        Width="246" 
        LoadCompleted="wb_LoadCompleted" 

        /> 

Here's the border. Meaning to wrap only the grid inside. 

 <Border Name="mask" CornerRadius="20" Height="auto" Width="auto" BorderThickness="1" BorderBrush="Black"> 
     <Grid x:Name ="GeneralGrid" Margin="426,362,10,291" ShowGridLines="True" Background="LightGray"> 

      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="61*" ></ColumnDefinition> 
       <ColumnDefinition Width="185*"></ColumnDefinition> 
      </Grid.ColumnDefinitions> 


      <Grid.RowDefinitions> 
       <RowDefinition></RowDefinition> 
       <RowDefinition></RowDefinition> 
       <RowDefinition></RowDefinition> 
       <RowDefinition></RowDefinition> 
       <RowDefinition></RowDefinition> 

      </Grid.RowDefinitions> 
      <TextBlock Name="IP">IP</TextBlock> 

      <TextBlock Name="ISP" Grid.Row="1">ISP</TextBlock> 
      <TextBlock Name="Location" Grid.Row="2">Location</TextBlock> 
      <TextBlock Name="Longitude" Grid.Row="3">Longitude</TextBlock> 
      <TextBlock Name="Latitude" Grid.Row="4">Latitude</TextBlock> 

     </Grid> 

    </Border> 

    </Grid> 

</Window> 

Answer 1

Я бы порекомендовал вам, чтобы вы продолжали использовать Visual Studio Designer так, как вы были. Он очень плохо работает над созданием XAML, которого мы на самом деле хотите. Например, у ваших элементов пользовательского интерфейса есть точные Margin, установленные на них (благодаря VS Designer, который я себе представляю), и это может сделать вещи неудобными для вас позже.

WPF был действительно разработан, чтобы позволить разработчику использовать изменяемые размеры элементов управления, чтобы пользовательский интерфейс мог изменять размер, когда пользователь изменяет размер приложения. Различные Panel s предоставляют различные возможности выбора размера для своих дочерних элементов управления, и вы можете узнать больше об этом на странице Panels Overview на MSDN. Однако вернемся к вашему вопросу относительно Grid class.

Поскольку вы использовали студии Визуальный конструктор, ваши элементы управления имеют не оказались в клетках Grid, что вы хотели, а не просто быть размещены «сверху», или «перед» ними. Чтобы разместить элемент управления в определенной ячейке Grid, вам необходимо установить свойства Grid.Row и/или Grid.Column. См. Этот пример, взятый с последней связанной страницы из MSDN:

<Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="250" Height="100"> 
    <Grid.ColumnDefinitions> 
    <ColumnDefinition /> 
    <ColumnDefinition /> 
    <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
    <RowDefinition /> 
    <RowDefinition /> 
    <RowDefinition /> 
    <RowDefinition /> 
    </Grid.RowDefinitions> 

    <TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0">2005 Products Shipped</TextBlock> 
    <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0">Quarter 1</TextBlock> 
    <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1">Quarter 2</TextBlock> 
    <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2">Quarter 3</TextBlock> 
    <TextBlock Grid.Row="2" Grid.Column="0">50000</TextBlock> 
    <TextBlock Grid.Row="2" Grid.Column="1">100000</TextBlock> 
    <TextBlock Grid.Row="2" Grid.Column="2">150000</TextBlock> 
    <TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="3">Total Units: 300000</TextBlock> 
</Grid> 

Answer 2

Вы кажетесь разместили все BigGrid элементы в одну ячейку этого макета сетки, и единственное, что мешает им появляться на верхней части друг друга является факт, что вы определили поля. Вы не определили маржу для своей границы, но затем определили поля для своих детей, что означает, что они будут компенсированы.

Действительно, для лучшей компоновки вы хотите как можно больше избежать полей и разделить свои BigGrid на строки и столбцы. Затем поместите свой пользовательский интерфейс в эти ячейки. Если ваша граница находится в пределах своей собственной ячейки, у вас ее не будет, чтобы она все обернула.