Listbox Separator in WPF and Omission of Final Separator

7
votes

I have two things I'm trying to achieve:

  1. Add a horizontal separator between listbox items in WPF.
  2. Don't show the separator at the bottom of the final listbox item.

My current layout is pictured here:

enter image description here

This shows 2 listbox items (though I have no way of knowing how many items could potentially be generated). I would like them separated by a horizontal separator, except on the last listbox item so there isn't a spare separator at the bottom of the pane. How can I achieve this in XAML? See my current XAML here:

 <TabItem Header="Third Party Updates">
            <Grid>
                <TextBlock Name="ThirdPartyNoManifestTextBox" Width="Auto" HorizontalAlignment="Left" Margin="267,22,0,0" TextWrapping="Wrap" Text="{Binding Path=WindowsUpdateCompliance, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" FontSize="14" Foreground="DarkSlateBlue"/>
                <Button Name="CheckforThirdPartyUpdatesButton" Content="Check for Third Party Updates" Margin="10,11,339,304" Click="CheckforThirdPartyUpdatesButton_Click" MaxWidth="200" Grid.Column="1" Grid.Row="1"/>
                <ListBox Name="ThirdPartyListBox" ItemsSource="{Binding}" Margin="0,70,0,0">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Button Name="ThirdPartyInstallButton" Content="Install" Click="InstallThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
                                <Button Name="ThirdPartyPostoneButton" Content="Postpone" Click ="PostponeThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition />
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                        <RowDefinition />
                                        <RowDefinition />
                                        <RowDefinition />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>
                                    <Label Content="•" Grid.Row="1" VerticalContentAlignment="Center"/>
                                    <Label Content="•" Grid.Row="2" VerticalContentAlignment="Center"/>
                                    <Label Content="•" Grid.Row="3" VerticalContentAlignment="Center"/>
                                    <Label Content="•" Grid.Row="4" VerticalContentAlignment="Center"/>
                                    <StackPanel Orientation="Horizontal" Grid.Column="1">
                                        <Label Name="MissingRequiredAppGenericTextBlock" VerticalAlignment="Center" Content="Required application update detected:" FontWeight="SemiBold" FontSize="12"/>
                                        <Label Name="RequiredAppNameTextBlock" VerticalAlignment="Center" Content="{Binding Item2.Name}" Foreground="MidnightBlue" FontSize="13"/>
                                        <Label Grid.Column="1" Grid.Row="1" Name="RequiredAppVersionTextBlock" Content="{Binding Item2.RequiredVersion}" VerticalAlignment="Center" Foreground="MidnightBlue" FontSize="13"/>
                                    </StackPanel>
                                    <TextBlock Grid.Column="1" Grid.Row="1" Name="RequiredAppCustomUIMessageTextBlock" Text="{Binding Item2.CustomUIMessage}" TextWrapping="Wrap" VerticalAlignment="Center"/>
                                    <TextBlock Grid.Column="1" Grid.Row="2" VerticalAlignment="Center">
                                    <Hyperlink Name="Link" NavigateUri="{Binding Item2.TT}" RequestNavigate="Hyperlink_RequestNavigate">
                                        <TextBlock Text="{Binding Item2.TT}"/>
                                    </Hyperlink>
                                </TextBlock>
                                    <StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="3">
                                        <TextBlock Text="The following processes will be closed prior to install: " VerticalAlignment="Center" />
                                        <TextBlock Text="{Binding Item2.ListOfProcessesToClose}" FontWeight="SemiBold" Foreground="Red" VerticalAlignment="Center"/>
                                    </StackPanel>
                                    <StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="4">
                                        <TextBlock Text="You have used " VerticalAlignment="Center" />
                                        <TextBlock Text="{Binding Item3.UsedDeferrals}" VerticalAlignment="Center"/>
                                        <TextBlock Text=" of " VerticalAlignment="Center"/>
                                        <TextBlock Text="{Binding Item2.MaxDefferals}" VerticalAlignment="Center"/>
                                        <TextBlock Text=" deferrals for this update." VerticalAlignment="Center"/>
                                    </StackPanel>
                                </Grid>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="{x:Type ListBoxItem}">
                            <Style.Triggers>

                                <DataTrigger Binding="{Binding PostponeClicked}" Value="1">
                                    <Setter Property="Visibility" Value="Hidden"></Setter>
                                </DataTrigger>

                                <Trigger Property="Control.IsMouseOver" Value="True">
                                    <Setter Property="Control.BorderBrush" Value="SteelBlue" />
                                    <Setter Property="Control.BorderThickness" Value="1" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </ListBox.ItemContainerStyle>
                </ListBox>
            </Grid>
        </TabItem>

Update

Added suggested separator code. Separator is now present but does not fill the available horizontal space:

enter image description here

1
c#wpfxamllistbox

1 Answers

11
votes

You can try to put Separator at the top of each item. With that you don't have unwanted Separator after the last item.

Then use DataTrigger with {RelativeSource PreviousData} binding to hide separator at the top of the first item :

<StackPanel>
    <Separator>
        <Separator.Style>
            <Style TargetType="Separator">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
                        <Setter Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Separator.Style>
    </Separator>
    <StackPanel Orientation="Horizontal">
        <Button Name="ThirdPartyInstallButton" Content="Install" Click="InstallThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
        <Button Name="ThirdPartyPostoneButton" Content="Postpone" Click ="PostponeThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
        <Grid>
            .........
            .........
        </Grid>
    </StackPanel>
</StackPanel>

UPDATE :

I can't tell for sure what causes the separator not stretching accross listbox width. Maybe try to set listboxitem's HorizontalContentAlignment to Stretch :

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</ListBox.ItemContainerStyle>