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

您似乎已将所有BigGrid元素放置到该布局网格的单个单元格中，并且阻止它们彼此叠加的唯一因素是您已定义边距的事实。您没有为边框定义边距，但为其子项定义了边距，这意味着它们会被抵消。

实际上，为了获得最佳布局，您希望尽可能避免边距，并将BigGrid划分为行和列。然后将UI放入这些单元格中。如果您的边框位于自己的单元格中，则不会显示包裹所有内容。

Answer 2

我建议您不要像以前一样继续使用Visual Studio Designer。它创建我们实际想要的XAML的工作非常糟糕。例如，你的UI元素都有一个精确的Margin设置（感谢我想象的VS设计器），这可能会让你以后感到尴尬。

WPF旨在使开发人员能够使用可调整大小的控件，以便UI可以在用户调整应用程序大小时自行调整大小。不同的Panel为其子控件提供不同的大小调整功能，您可以从MSDN上的Panels Overview页面了解更多信息。但是，请回到有关Grid class。

的问题

因为您使用过Visual Studio Designer，所以您的控件不最终会出现在您想要的Grid单元格中，而只是放置在＆＃39;之上;或者＆＃39;在＆＃39;之前他们。要将控件放入特定的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>

在WPF中包装错误元素的边框

2 个答案: