Border extending too far

Question

I got this xaml code:

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

It looks something like this:

Before i had the BorderThickness from the button just on 1 but then the borders were overlaying and it looked not so nice.

Now i tried to set the buttons borders thickness to "0,0,1,1" and put a border around the itemscontrol which is "1,1,0,0". The problem is that when i resize the window or in generall the border from the itemscontrol just extends too far and that doesn't look nice either.

How to achieve something like this: ?

Answer 1

You can do something like below. Essentially, you use negative margins to meld all the borders together. On a parent border set a Padding="1" so that the negative margins along the edges can be seen.

The Border around your Button in your DataTemplate would look like this:

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

The Border around your ItemsControl in your ScrollViewer would have a Padding="1" and look like this:

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