How can I get SelectedItem and show Headers using ItemsControl? - wpf

Question

I am working on WPF Windows Application. I'm using ItemsControl to show collection list. Working on this I found there is no SelectedItem property in ItemsControl. Then how can I get the Selected Item from the ItemsControl. And also How can I display the Headers of ItemsControl.
<ItemsControl ItemsSource="{Binding CustomSalesProducts, Mode=TwoWay}">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Border>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel CanHorizontallyScroll="True" CanVerticallyScroll="True" Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="SalesGrid" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<controls:HeaderedContentControl Header="{Binding ProductName, Mode=TwoWay}" Margin="{DynamicResource Margin4}" Style="{DynamicResource HeaderedContentControlStyle}" HorizontalContentAlignment="Right">
</controls:HeaderedContentControl>
<TextBox Text="{Binding OrderQty, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Grid.Row="1" Margin="{StaticResource Margin4}" Style="{DynamicResource MiniTextBoxStyle}" ToolTip="Quantity" />
<TextBlock Text="{Binding UnitSalePrice, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Grid.Row="1" Margin="{StaticResource Margin4}" ToolTip="Price"/>
<TextBox Text="{Binding Discount, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Grid.Column="2" Grid.Row="1" Margin="{StaticResource Margin4}" Style="{DynamicResource MiniTextBoxStyle}" ToolTip="Discount"/>
<TextBlock Text="{Binding TaxAmount, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Grid.Column="3" Grid.Row="1" Margin="{StaticResource Margin4}" ToolTip="Tax Amount"/>
<TextBlock Text="{Binding LineTotal, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Grid.Column="4" Grid.Row="1" Margin="{StaticResource Margin4}" ToolTip="Total"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Thanks,

Answer 1

As you said there is no SelectedItem in the ItemsControl. You can use ListBox instead.

Answer 2

A bit late to the party, but I came across the same problem, and in the hopes that this can help someone else here's how I rolled my own SelectedItem since I didn't want to use a ListBox.
You could expose a SelectedCustomSalesProduct property to the class you are using as your DataContext, and then you can keep track of the selected item yourself by setting it when the item is selected.
In your SalesGrid, you could add event handlers for the MouseLeftButtonDown and for the TouchDown events, and use the Tag property to keep a reference to the item being rendered as such:
Please note that in my case, I was using a StackPanel instead of a Grid, and I didn't compile the code below, use it for illustrative purposes.
By using this example you should be able to get the general idea and set the Selected item in your business service.
<DataTemplate>
<Grid x:Name="SalesGrid" Background="White"
Tag="{Binding}"
TouchDown="DataTemplate_Touch"
MouseLeftButtonDown="DataTemplate_Click">
Then in your UserControl/window's code behind you can keep track of the selected item as such:
/// <summary>
/// MyScreen.xaml
/// </summary>
public partial class MyScreen : UserControl
{
private MyServiceWrapper _serviceWrapper;
public MyScreen()
{
InitializeComponent();
}
public MyScreen(MyServiceWrapper serviceWrapper)
{
//Instrumentation.Log(typeof(MyScreen), LogTypes.Trace, "Creating instance of MyScreen");
this._serviceWrapper = serviceWrapper;
// Set your DataContext, is this the class that would also have your
// CustomSalesProducts property exposed
this.DataContext = this._serviceWrapper;
InitializeComponent();
}
private void DataTemplate_Touch(object sender, System.Windows.Input.TouchEventArgs e)
{
SetSelectedCustomSalesProduct(sender);
}
private void DataTemplate_Click(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
SetSelectedCustomSalesProduct(sender);
}
private void SetSelectedCustomSalesProduct(object sender)
{
_serviceWrapper.SelectedCustomSalesProduct = ((Grid)sender).Tag as CustomSalesProduct;
}
}

Answer 3

I found that for using headers there is HeaderdItemsControl. With this I can add headers and also it is not repeatable. But problem with this is that we have to define static size for header and its item if we define auto size then the UI of headeredItemsControl is not perfect so we have to give its static size.
You can read this for how to use HeaderedItemsControl?