WPF Remove Listview border where item is selected

Question

I am trying to add functionality to selected ListViewItems. Where if the Item is selected it should flow into the view/pane next to it (removing the ListViews right hand border).

for Example: this selected items behaves as should but the right hand border should not be there.

This is what it should look like

Here is my coding:

View:

<ListView x:Name="myListView" HorizontalAlignment="Left" Height="352" Margin="23,19,0,0" VerticalAlignment="Top" Width="432" Style="{DynamicResource ListViewStyle1}" ItemContainerStyle="{DynamicResource ListViewItemStyle1}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding Name}" Padding="5 5 5 5"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.GroupStyle>
            <GroupStyle ContainerStyle="{StaticResource GroupCustomStyle1}">
                <GroupStyle.HeaderTemplate>
                    <DataTemplate/>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListView.GroupStyle>
    </ListView>

ViewModel:

public partial class MainWindow : Window
{
    private List<Employee> employees;

    public MainWindow()
    {
        InitializeComponent();
        employees = new List<Employee>();
        employees.Add(new Employee { Id = "Header One", Name = "First" });
        employees.Add(new Employee { Id = "Header Two", Name = "Second" });
        employees.Add(new Employee { Id = "Header Three", Name = "Third" });
        employees.Add(new Employee { Id = "Header Four", Name = "Fourth" });
        employees.Add(new Employee { Id = "Header Five", Name = "Fifth" });

        this.DataContext = this;
        myListView.ItemsSource = employees;

        CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(myListView.ItemsSource);
        PropertyGroupDescription groupDescription = new PropertyGroupDescription("Id");
        view.GroupDescriptions.Add(groupDescription);
    }

    public List<Employee> Employees
    {
        get
        {
            return employees;
        }
    }
}

Styling:

<Application.Resources>

    <Style x:Key="ListViewStyle1" TargetType="{x:Type ListView}">
        <Setter Property="Background" Value="LightBlue"/>
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Padding" Value="0 5 0 0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListView}">
                    <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="0" SnapsToDevicePixels="true">
                        <ScrollViewer Focusable="false">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="Bd" Value="Red"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="Black"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsGrouping" Value="true"/>
                                <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ListViewItemStyle1" TargetType="{x:Type ListViewItem}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="Background" Value="White"/>
                            <Setter Property="BorderBrush" Value="Black"/>
                            <Setter Property="BorderThickness" Value="0 1 0 1"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="Selector.IsSelectionActive" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="Gray"/>
                            <Setter Property="Foreground" Value="Pink"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="Aqua"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="BorderBrush" Value="Black"/>
                            <Setter Property="BorderThickness" Value="0 1 0 1"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="GroupCustomStyle1" TargetType="{x:Type GroupItem}">
        <Setter Property="Margin" Value="0 8 0 0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type GroupItem}">
                    <StackPanel>
                        <DockPanel Margin="0,0,0,2">
                            <Border BorderBrush="Black" BorderThickness="0, 0, 0, 1" Width="400" HorizontalAlignment="Center" Padding="5 3 3 5">
                                <TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="Black"/>
                            </Border>
                        </DockPanel>
                        <ItemsPresenter />
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


</Application.Resources>

I do not know what the best way is of accomplishing this, but I am pretty sure it will end up with a dirty hack.

Answer 1

Remove the right border from the ListView and add one to the GroupItem:

<Style x:Key="ListViewStyle1" TargetType="{x:Type ListView}">
    <Setter Property="Background" Value="LightBlue"/>
    <Setter Property="BorderBrush" Value="Black"/>
    <Setter Property="BorderThickness" Value="1 1 0 1"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="Padding" Value="0 5 0 0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListView}">
                <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="0" SnapsToDevicePixels="true">
                    <DockPanel>
                        <ScrollViewer DockPanel.Dock="Top" Focusable="false">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>
                        <Grid Width="1" SnapsToDevicePixels="True" DockPanel.Dock="Bottom" 
                                      HorizontalAlignment="Right" Background="{TemplateBinding BorderBrush}" />
                    </DockPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="Bd" Value="Red"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="Black"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsGrouping" Value="true"/>
                            <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ListViewItemStyle1" TargetType="{x:Type ListViewItem}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="Black" />
    <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListViewItem}">
                <Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" 
                                BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="Background" Value="White"/>
                        <Setter Property="BorderBrush" Value="Black"/>
                        <Setter Property="BorderThickness" Value="0 1 0 1"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true"/>
                            <Condition Property="Selector.IsSelectionActive" Value="false"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="Gray"/>
                        <Setter Property="Foreground" Value="Pink"/>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="Aqua"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="BorderBrush" Value="Black"/>
                        <Setter Property="BorderThickness" Value="0 1 0 1"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


<Style x:Key="GroupCustomStyle1" TargetType="{x:Type GroupItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type GroupItem}">
                <StackPanel>
                    <Border BorderThickness="0 0 1 0" BorderBrush="Black">
                        <DockPanel Margin="0,8,0,2">
                            <Border BorderBrush="Black" BorderThickness="0, 0, 0, 1" Width="400" HorizontalAlignment="Center" Padding="5 3 3 5">
                                <TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="Black"/>
                            </Border>
                        </DockPanel>
                    </Border>
                    <ItemsPresenter />
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>