Item controls in wpf mvvm - wpf

Question

I am working on wpf and using an ItemsControl to represent a list of class on the UI.
My code is like this:
<ItemsControl ItemsSource="{Binding Path=UsecaseListItems}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<WrapPanel>
<CheckBox IsChecked="{Binding Path=IsSelected,UpdateSourceTrigger=PropertyChanged, Mode=TwoWay,IsAsync=True}"
Margin="2,5"/>
<Button Content="{Binding UsecaseName}"
Margin="2,5"/>
</WrapPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Now I wand to add a header to both the columns (Select all and UseName) at the top of the list. How can I do it??

Answer 1

Below is the solution (Not a good one but I supposed worse design are also possible) and please change bindings in your code:
XAML:
<ItemsControl ItemsSource="{Binding Path=list}" >
<ItemsControl.Template>
<ControlTemplate>
<StackPanel Orientation="Vertical">
<Border BorderThickness="5" BorderBrush="DarkGray">
<StackPanel Orientation="Horizontal">
<Button Content="Select All" Width="80" HorizontalAlignment="Stretch"/>
<Button Content="User name" Width="80" HorizontalAlignment="Stretch"/>
</StackPanel>
</Border>
<Border BorderThickness="5" BorderBrush="LightGray">
<ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=ItemsSource}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<WrapPanel>
<CheckBox IsChecked="{Binding Path=DeviceState,UpdateSourceTrigger=PropertyChanged, Mode=TwoWay,IsAsync=True}"
HorizontalAlignment="Stretch" Width="100" Margin="2,5"/>
<Button Content="{Binding Name}" HorizontalAlignment="Stretch" Width="100" Margin="2,5"/>
</WrapPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</StackPanel>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
Output
Why do you want buttons as header? can't you just put buttons outside the ItemsControl?

Answer 2

It is preferable to go with ListView control instead of ItemsControl for what you need.
Here is the sample. .
<Grid>
<Grid.Resources>
<DataTemplate x:Key="checkboxHeaderTemplate">
<CheckBox Checked="CheckBox_Checked"> //add command for MVVM
</CheckBox>
</DataTemplate>
<DataTemplate x:Key="CheckBoxCell">
<CheckBox IsChecked="{Binding Path=IsSelected, Mode=TwoWay}" >
</CheckBox>
</DataTemplate>
<DataTemplate x:Key="ButtonCell">
<Button Content="{Binding Path=UsecaseName, Mode=TwoWay}" >
</Button>
</DataTemplate>
</Grid.Resources>
<ListView ItemsSource="{Binding Path=UsecaseListItems}" >
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn HeaderTemplate="{StaticResource checkboxHeaderTemplate}"
CellTemplate="{StaticResource CheckBoxCell}" Width="auto">
</GridViewColumn>
<GridViewColumn HeaderTemplate="{StaticResource checkboxHeaderTemplate}"
CellTemplate="{StaticResource ButtonCell}" Width="auto">
</GridViewColumn>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
</Grid>
Hope that helps.