We Keep Coding

Add Styling to First Item in ListView XAML

I have a ListView as such:
<ListView ItemsSource="{Binding SourceItems}" Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1, 1, 0, 0">
<Grid>
<Label Content="{Binding PropertyName}" FontSize="15"/>
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}"
HorizontalAlignment="Right"
VerticalAlignment="Center"/>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This listview sets up each row to have a Label and Checkbox as included above. What I want to do is add styling so that the first item in the listview has a different color background so that it distinguishes the start of the listview items.
I have tried adding this ItemContainerStyle, which works in changing the color of the first item, but it affects the styling of the borderbrush and checkbox alignment.
<ListView ItemsSource="{Binding SourceItems}" Grid.Row="0">
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1, 1, 0, 0">
<Grid>
<Label Content="{Binding PropertyName}" FontSize="15"/>
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}"
HorizontalAlignment="Right"
VerticalAlignment="Center" />
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter Property="Background" Value="Blue" />
<Setter Property="Foreground" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Is there a way to change this xaml so that the Checkbox styling is as used in the DataTemplate?

In your source Data "SourceItems" can you add a property
public Color BackgroundColorValue { get; set; }
And set it while the data is fetched from the source.
Then bind the background property directly
<ListView ItemsSource="{Binding SourceItems}" Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1, 1, 0, 0">
<Grid Background={Binding BackgroundColorValue}>
<Label Content="{Binding PropertyName}" FontSize="15"/>
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}"
HorizontalAlignment="Right"
VerticalAlignment="Center"/>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

WPF: Prevent ComboBox from displaying selected item

I have a ComboBoxthat I have templated to look like this:
Here is the XAML for this ComboBox:
<ComboBox Name="StateInclusionRules_ComboBox"
ItemsSource="{Binding StateInclusionRules}"
Height="25"
Width="155"
Margin="0"
Grid.Column="7">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"
Margin="0">
<Label Content="{Binding State}"
Margin="0,0,0,0"
Width="30" />
<CheckBox IsChecked="{Binding StateTax}"
Margin="20,0,0,0"/>
<CheckBox IsChecked="{Binding StateChildSupport}"
Margin="30,0,0,0"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Is there a way to prevent the selected item from being displayed in the ComboBox ContentPresenter (the red bordered area, i.e, the area you see when the ComboBox is closed)?

First you need 2 DataTemplates, 1 for the selected item and 1 for the drop down item.
The selected we are going to leave empty because this is your requirment.
The drop down item DataTemplate will have the exact DataTemplate you wanted.
When item is selected a DataTrigger will change it's template to the SelectedTemplate, like so:
<Window.Resources>
<DataTemplate x:Key="DropDownItemTemplate" DataType="wpfApplication1:ItemSourceModel">
<StackPanel Orientation="Horizontal"
Margin="0">
<Label Content="{Binding Value}"
Margin="0,0,0,0"
Width="30" />
<CheckBox IsChecked="{Binding Value}"
Margin="20,0,0,0"/>
<CheckBox IsChecked="{Binding Value}"
Margin="30,0,0,0"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="SelectionBoxTemplate">
</DataTemplate>
<DataTemplate x:Key="ComboBoxTemplate">
<ContentPresenter x:Name="Presenter"
Content="{Binding}"
ContentTemplate="{StaticResource DropDownItemTemplate}" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor,ComboBoxItem,1}}" Value="{x:Null}">
<Setter TargetName="Presenter" Property="ContentTemplate" Value="{StaticResource SelectionBoxTemplate}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
And set your ComboBox with the ComboBoxTemplate:
<ComboBox Name="StateInclusionRules_ComboBox"
ItemsSource="{Binding YourItemSource}" ItemTemplate="{StaticResource ComboBoxTemplate}"
Height="25"
Width="155"
Margin="0"
/>

Retrieve GroupName in Listview Grouping in WPF

I've setup a ListView with grouping and I would like to retrieve the GroupName when I right click on the group in MVVM. I've placed a ContextMenu on my group style, and I was trying to use the EventToCommand from System.Windows.Interactivity to get the underlying item.
Here the relevant part:
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander IsExpanded="False" Template="{StaticResource CustomizedExpander}" Background="#FFEBEBEB" BorderThickness="0" ContextMenu="{StaticResource GroupContextMenu}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseRightButtonDown">
<i:InvokeCommandAction Command="{Binding Path=OnCategorySelected}" CommandParameter="{Binding Name}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Expander.Header>
<StackPanel Orientation="Horizontal">
<!--N.B. The "Name" property is part of the CollectionViewSource-->
<TextBlock Text="{Binding Name}" FontWeight="Bold" Foreground="#FF767676" VerticalAlignment="Bottom" />
<TextBlock Text="{Binding ItemCount}" Foreground="#FF454545" FontWeight="Bold" FontStyle="Italic" Margin="10,0,0,0" VerticalAlignment="Bottom" />
<TextBlock Text=" item(s)" Foreground="#FF767676" FontStyle="Italic" VerticalAlignment="Bottom" />
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
I don't know if it's the right way to do it but it seems the command is not triggered at all.
Any suggestion?
UPDATE:
The whole thing was much simpler than I thought. The interaction part was not required at all. Fixing the binding is enough to get the underlying category when the context menu is shown:
<ListView ItemsSource="{Binding Modifications}" SelectedItem="{Binding SelectedItem}">
<ListView.Resources>
<ContextMenu x:Key="ItemContextMenu">
<MenuItem Header="Execute" Command="{Binding Path=DataContext.OnExecuteScript, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListView}}" Background="WhiteSmoke" Visibility="{Binding CanExecute, Converter={StaticResource BooleanToVisibilityConverter}}" />
<MenuItem Header="Execute up to this" Command="{Binding Path=DataContext.OnExecuteScriptUpToThis, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListView}}" Background="WhiteSmoke" Visibility="{Binding CanOnlyBeExecutedSequentially, Converter={StaticResource BooleanToVisibilityConverter}}" />
<MenuItem Header="Drop" Command="{Binding Path=DataContext.OnExecuteDrop, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListView}}" Visibility="{Binding Drop, Converter={StaticResource BooleanToVisibilityConverter}}" Background="WhiteSmoke" />
<MenuItem Header="Dump" Command="{Binding Path=DataContext.OnExecuteDump, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListView}}" Visibility="{Binding CanDump, Converter={StaticResource BooleanToVisibilityConverter}}" Background="WhiteSmoke" />
</ContextMenu>
<ContextMenu x:Key="GroupContextMenu">
<MenuItem Header="Dump all" Command="{Binding Path=DataContext.OnExecuteDumpAll, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListView}}" CommandParameter="{Binding Name}" Background="WhiteSmoke" />
</ContextMenu>
</ListView.Resources>
<ListView.View>
<GridView>
<GridViewColumn Header="Type" Width="120" DisplayMemberBinding="{Binding Type}" />
<GridViewColumn Header="Object Name" Width="Auto" DisplayMemberBinding="{Binding DisplayName}" />
<GridViewColumn Header="" Width="50">
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding Deploy}" IsHitTestVisible="False" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Object Name" Width="300" DisplayMemberBinding="{Binding ObjectName}" />
</GridView>
</ListView.View>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource MetroListViewItem}" >
<Setter Property="ContextMenu" Value="{StaticResource ItemContextMenu}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Drop}" Value="True">
<Setter Property="Foreground" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="ContextMenu" Value="{StaticResource GroupContextMenu}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander IsExpanded="False" Template="{StaticResource CustomizedExpander}" Background="#FFEBEBEB" BorderThickness="0">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<!--N.B. The "Name" property is part of the CollectionViewSource-->
<TextBlock Text="{Binding Name}" FontWeight="Bold" Foreground="#FF767676" VerticalAlignment="Bottom" />
<TextBlock Text="{Binding ItemCount}" Foreground="#FF454545" FontWeight="Bold" FontStyle="Italic" Margin="10,0,0,0" VerticalAlignment="Bottom" />
<TextBlock Text=" item(s)" Foreground="#FF767676" FontStyle="Italic" VerticalAlignment="Bottom" />
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
</ListView>

First of all, i think i've figured out why your Command isnt firing.
Since you are in an Template, the DataContext has Changed. Therefore your CommandBinding should look like this:
<i:InvokeCommandAction Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView}}, Path=DataContext.OnCategorySelected}" CommandParameter="{Binding}"/>
Also, your CommandParameter should not be Name because you'll only get a string in the end instead the whole Object.
If you use my above code you will get the whole CollectionViewGroup instead. In said CollectionViewGroup you'll find all the Items in the group. If you are fine with getting just the Groupname you can proceed with you implementation of course.
I dont really understand why you are using a ContextMenu and what it does (Since you dont posted that code), but if you are interested in how you can display the grouped Items in such a ContextMenu, you can do it like this:
<Expander IsExpanded="False" Background="#FFEBEBEB" BorderThickness="0" >
<Expander.ContextMenu>
<ContextMenu ItemsSource="{Binding Items}"/>
</Expander.ContextMenu>
</Expander>
Since we now know, what we have to deal with (It's still an CollectionViewGroup) we can set the Items of it as ItemsSource of the ContextMenu.
Hope this helps!

WPF how to detect listviewitem has been selected

I have DataTemplate for my ListView control, which contains few textblocks and a button. I want the button to be visible only when the item is selected.
Here's my DataTemplate code:
<ListView.ItemTemplate>
<DataTemplate>
<Grid Background="AliceBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="90" />
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left" Margin="10,0,10,0"
VerticalAlignment="Center" FontFamily="Verdana" FontSize="16"
FontWeight="Black" Grid.Column="0" Text="{Binding name}"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.Column="1">
<TextBlock FontFamily="Verdana" FontSize="10" Grid.Column="1"
VerticalAlignment="Center" HorizontalAlignment="Center"
Text="Number of Chapters: " />
<TextBlock FontFamily="Verdana" FontSize="12" Grid.Column="1"
VerticalAlignment="Center" HorizontalAlignment="Center"
Text="{Binding chaptersCount}" />
</StackPanel>
<Button HorizontalAlignment="Center" Height="50" Width="80" Content="Read"
Grid.Column="2" Visibility="Hidden" Click="Button_Click_3" Name="ReadButton"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
How can I do that?

You can achieve this with DataTrigger in DataTemplate which will check for IsSelected property of Templated parent:
<ListView.ItemTemplate>
<DataTemplate>
.....
<Button HorizontalAlignment="Center" Height="50"
Width="80" Content="Read"
Grid.Column="2" Visibility="Hidden" Name="ReadButton"/>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected,
RelativeSource={RelativeSource Mode=TemplatedParent}}"
Value="True">
<Setter TargetName="ReadButton" Property="Visibility"
Value="Visible"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListView.ItemTemplate>

You need to slightly change your Button: A quick XAML way would be to add a Trigger on its Visibility to make it hidden when not selected (note: code written here, hopefully there's no typo):
<Button HorizontalAlignment="Center" Height="50" Width="80" Content="Read"
Grid.Column="2" Click="Button_Click_3" Name="ReadButton">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListViewItem}}" Value="False">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>

Listbox Separator in WPF and Omission of Final Separator

I have two things I'm trying to achieve:
Add a horizontal separator between listbox items in WPF.
Don't show the separator at the bottom of the final listbox item.
My current layout is pictured 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:

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>