WPF字符映射控件边框过长：如何优化边框布局？

我明白你遇到的边框布局问题了——一开始按钮边框重叠，调整外层Border后又出现边框随窗口拉伸过长的情况，核心原因是外层Border会跟着ScrollViewer的尺寸拉伸，而不是贴合实际的字符按钮内容。这里有两个实用的解决方案：

修改ScrollViewer内的布局，让外层Border只根据实际内容的大小调整，不再强制拉伸到ScrollViewer的边缘：

<ScrollViewer x:Name="ScrollViewer" Margin="10,0,10,10" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1" >
    <!-- 给Border设置HorizontalAlignment和VerticalAlignment为Left/Top，让它贴合内容 -->
    <Border BorderBrush="Black" BorderThickness="1,1,0,0" SnapsToDevicePixels="True" 
            HorizontalAlignment="Left" VerticalAlignment="Top">
        <ItemsControl ItemsSource="{Binding CharDescriptions}" ItemTemplate="{StaticResource ItemsTemplate}" Name="CharItemsControl">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Border>
</ScrollViewer>

同时保留你原来的ItemTemplate设置：

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

这样调整后，外层Border会随着WrapPanel的实际内容宽度和高度变化，不会再出现边框过长的情况，同时每个Item的右下边框和外层的左上边框组合，刚好形成完整的网格边框，完全没有重叠问题。

另一种更简洁的方式是去掉ItemTemplate中的Border，改用ItemsControl的ItemContainerStyle和自定义模板来统一管理边框逻辑，避免多层Border嵌套带来的问题：

1. 首先简化你的ItemTemplate，移除外层Border：

<DataTemplate x:Key="ItemsTemplate">
    <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" />
</DataTemplate>

2. 给ItemsControl添加ItemContainerStyle和自定义模板，分别处理每个Item的边框和外层补全边框：

<ItemsControl ItemsSource="{Binding CharDescriptions}" ItemTemplate="{StaticResource ItemsTemplate}" Name="CharItemsControl">
    <!-- 给每个Item的容器设置左上边框 -->
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="BorderThickness" Value="1,1,0,0"/>
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ContentPresenter">
                        <Border BorderThickness="{TemplateBinding BorderThickness}" 
                                BorderBrush="{TemplateBinding BorderBrush}">
                            <ContentPresenter Content="{TemplateBinding Content}" 
                                              ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- 自定义ItemsControl模板，补全右下角的边框 -->
    <ItemsControl.Template>
        <ControlTemplate TargetType="ItemsControl">
            <Border BorderThickness="0,0,1,1" BorderBrush="Black" SnapsToDevicePixels="True">
                <ItemsPresenter />
            </Border>
        </ControlTemplate>
    </ItemsControl.Template>
</ItemsControl>

这种方式把边框逻辑统一到ItemsControl的容器和模板中，不仅彻底解决了边框重叠问题，还能让外层边框自动贴合内容尺寸，不会出现拉伸过长的情况，代码结构也更清晰。

如果希望窗口调整大小时，WrapPanel的列数保持稳定，避免出现横向滚动条，可以给WrapPanel绑定ScrollViewer的视口宽度：

<WrapPanel Width="{Binding ElementName=ScrollViewer, Path=ViewportWidth}" />

内容的提问来源于stack exchange，提问作者Flo