边界延伸太远

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”。问题是，当我调整 window 的大小时，或者通常情况下，itemscontrol 的边框延伸得太远，看起来也不太好。

如何实现这样的目标：?

Answer 1

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

DataTemplate 中 Button 周围的 Border 看起来像这样：

<DataTemplate x:Key="ItemsTemplate">
    <Border
        Margin="-1,-1,0,0"
        BorderBrush="Black"
        BorderThickness="1">
        <Button
            Width="26"
            Height="23"
            HorizontalContentAlignment="Center"
            VerticalContentAlignment="Center"
            BorderThickness="0"
            Content="{Binding TheChar}"
            Style="{StaticResource Flat}"
            ToolTip="{Binding AggregatedTooltip}"
            ToolTipService.BetweenShowDelay="300"
            ToolTipService.InitialShowDelay="800"
            ToolTipService.IsEnabled="True"
            ToolTipService.ShowDuration="10000"
            ToolTipService.ShowOnDisabled="True" />
    </Border>
</DataTemplate>

ScrollViewer 中 ItemsControl 周围的 Border 会有一个 Padding="1"，看起来像这样：

<ScrollViewer x:Name="ScrollViewer"
    Grid.Row="1"
    Margin="10,0,10,10"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch">
    <Border
        Padding="1"
        SnapsToDevicePixels="True">
        <ItemsControl
            Name="CharItemsControl"
            ItemTemplate="{StaticResource ItemsTemplate}"
            ItemsSource="{Binding CharDescriptions}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Border>
</ScrollViewer>

边界延伸太远

Border extending too far

wpf

xaml

border

itemscontrol