边界延伸得太远

Question

我有这个xaml代码：

<UserControl x:Class="CharacterMap.CharacterMapControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:CharacterMap"
             xmlns:cxml="clr-namespace:CharacterMap.Xml">
    <UserControl.Resources>
        <ResourceDictionary>
            <Style x:Key="Flat">
                <Setter Property="Control.Background" Value="White" />
                <Setter Property="Control.FontWeight" Value="DemiBold" />
                <Setter Property="Control.FontFamily" Value="Arial" />
            </Style>
            <DataTemplate x:Key="ItemsTemplate">
                <Border  BorderThickness="0,0,1,1" BorderBrush="Black">
                <Button  Width="26" Height="23" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Content="{Binding TheChar}" 
                             Style="{StaticResource Flat}" BorderThickness="0"
                             ToolTipService.InitialShowDelay="800" ToolTipService.ShowDuration="10000" ToolTipService.BetweenShowDelay="300" 
                             ToolTipService.ShowOnDisabled="True" ToolTip="{Binding AggregatedTooltip}" ToolTipService.IsEnabled="True"  />
                </Border>
            </DataTemplate>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <Border BorderBrush="{x:Null}" Height="25" Margin="10,0,20,0">
                <TextBlock Text="Filtern nach Buchstabe: " TextWrapping="Wrap" VerticalAlignment="Center"/>
            </Border>
            <TextBox Text="{Binding FilterString, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="125" Height="25" VerticalContentAlignment="Center" />
        </StackPanel>
        <ScrollViewer x:Name="ScrollViewer"  Margin="10,0,10,10" VerticalAlignment="Stretch"  HorizontalAlignment="Stretch" Grid.Row="1" >
            <Border BorderBrush="Black" BorderThickness="1,1,0,0" SnapsToDevicePixels="True" >
                <ItemsControl ItemsSource="{Binding CharDescriptions}" ItemTemplate="{StaticResource ItemsTemplate}" Name="CharItemsControl">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>                    
                            <WrapPanel />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </Border>
        </ScrollViewer>
    </Grid> 
</UserControl>

看起来像这样：

在我刚刚从按钮1获得BorderThickness之前，然后边界被覆盖了，看起来不太好。

现在，我尝试将按钮的边框粗细设置为“ 0,0,1,1”，并在itemscontrol周围放置边框，即“ 1,1,0,0”。问题是，当我调整窗口大小或一般情况下，itemscontrol的边框延伸得太远，而且看起来也不好。

如何实现这样的目标：？

Answer 1

您可以执行以下操作。本质上，您使用负边距将所有边界融合在一起。在父边界上设置Padding =“ 1”，以便可以看到沿边缘的负边距。

<Border Padding="1">
    <WrapPanel Orientation="Horizontal">
        <Border BorderBrush="Black" BorderThickness="1" Margin="-1,-1,0,0">
            ...
        </Border>
        <Border BorderBrush="Black" BorderThickness="1" Margin="-1,-1,0,0">
            ...
        </Border>
    </WrapPanel>
</Border>