Develop Reference

How can I group GridViewColumns in WPF, so the expander fills the whole width

I am new to WPF and try to do the following:
I have a ListView with a ItemsSource using a ViewModel.
Inside, there is a GridView with Columns. Each Column represents a Preoperty of the View Model. But the Description is optional and can be rather long. So I want to use a Expander. My Problem is, that I can only manage the expander to be as big as the Name-Column. But I want the expander to be as big as the whole row.
Here are 2 Images to clarify what I want.
My current State:
https://i.stack.imgur.com/ZNA4v.png
What I want to achieve:
https://i.stack.imgur.com/ZmFq1.png
I tried "grouping the GridView" but without success... See here
http://technico.qnownow.com/grouping-gridview-wpf/
Here's my Code
<Window ...>
<Window.Resources>
...
</Window.Resources>
<DockPanel>
<StackPanel DockPanel.Dock="Top">
...
</StackPanel>
<Grid>
<ListView Grid.RowSpan="4" DockPanel.Dock="Top" Margin="10" ItemsSource="{Binding MyView}">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="BorderBrush" Value="Black"></Setter>
<Setter Property="BorderThickness" Value="0,0,0,1"></Setter>
<Setter Property="Focusable" Value="False" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Top"></Setter>
<Setter Property="VerticalContentAlignment" Value="Top"></Setter>
</Style>
</ListView.ItemContainerStyle>
<!-- New GridView -->
<ListView.View>
<GridView>
<!--Number-->
<GridViewColumn Header="#">
<GridViewColumn.CellTemplate>
<DataTemplate DataType="viewModel:MyViewModel">
<TextBlock Text="{Binding Model.Number, StringFormat='#{0}', Mode=OneWay}"
Width="20" TextAlignment="Left" Margin="5" VerticalAlignment="Top" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<!--ErrorLevel-->
<GridViewColumn Header="" Width="45">
<GridViewColumn.CellTemplate>
<DataTemplate DataType="viewModel:MyViewModel">
<Image Source="{Binding Model.ErrorLevel, Converter={StaticResource ErrorLevelToImageConverter}, Mode=OneWay}"
ToolTip="{Binding Model.ErrorLevel, Mode=OneWay}" Width="20" Margin="5" VerticalAlignment="Top" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<!--ID-->
<GridViewColumn Header="ID">
<GridViewColumn.CellTemplate>
<DataTemplate DataType="viewModel:MyViewModel">
<TextBlock TextAlignment="Center" Margin="5" Width="50" VerticalAlignment="Top" >
<Hyperlink NavigateUri="{Binding Model.Hyperlink, Mode=OneWay}"
Command="{Binding HyperlinkCommand}">
<TextBlock Text="{Binding Model.Id, Mode=OneWay}" />
</Hyperlink>
</TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<!--Name-->
<GridViewColumn Header="Name" Width="500" >
<GridViewColumn.CellTemplate>
<DataTemplate DataType="viewModel:MyViewModel">
<Expander ToolTip="Expand" ExpandDirection="Down" Foreground="Black" VerticalAlignment="Top">
<Expander.Header>
<TextBlock Text="{Binding Model.Name, Mode=OneWay}"
HorizontalAlignment="{Binding HorizontalAlignment, RelativeSource={RelativeSource AncestorType=ContentPresenter}, Mode=OneWayToSource}"
TextAlignment="Left" Margin="5" TextWrapping="Wrap" VerticalAlignment="Top" />
</Expander.Header>
<GroupBox Header="Description" FontWeight="Bold" >
<TextBlock Text="{Binding Model.Description, Mode=OneWay}" TextWrapping="Wrap"
FontWeight="Normal" TextAlignment="Left" Margin="5" />
</GroupBox>
</Expander>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<!-- Module-->
<GridViewColumn Header="Module" >
<GridViewColumn.CellTemplate>
<DataTemplate DataType="viewModel:MyViewModel">
<TextBlock Text="{Binding Model.Module, Mode=OneWay}"
TextAlignment="Center" Margin="5" Width="100" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>
</DockPanel>
Once again, i am new to WPF, MVVM, DataBinding and all this. So please try to make your answer as detailed as possible. I tried many things, but they didn't work out.

You could add the following GridViewColumn at the left side (top in XAML) to your GridView
<GridViewColumn Header="" Width="30">
<GridViewColumn.CellTemplate>
<DataTemplate DataType="viewModel:MyViewModel">
<Expander Margin="-5,2,-5000,0" HorizontalAlignment="Left" Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ItemsPresenter}}}">
<GroupBox Header="Description" FontWeight="Bold" Margin="0,0,5,0">
<TextBlock Text="{Binding Model.Description}" FontWeight="Normal" TextWrapping="Wrap" />
</GroupBox>
</Expander>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
This is GridViewColumncontains an empty Header which simply shows the Expander-Arrow in the GridViewRows.
The Expander itself is left aligned and has a huge negative Margin on the right side, so it can draw its content outside of the right boundary. The width is set to the ActualWidth of the ItemsPresenter of your GridView. With this Width you can limit the content to the current visible Width of the GridView (Or you can set it to an absolute value like 500).
And finally a preview of this Column

OK, the fact that the expander is not stretchable is because of the non stretchable parent control. You have a column 'Name' in your gridview with a fixed width and a expander added as a child. As far as i know the child control cannot extend beyond the parent control if this is not truth im sure someone will correct this. I don't know what the best way is to achieve your goal but to give you some inspiration i made a small example.
So, to give you a example if how this could work:
Edit: You can just set negative margins on your expander like so:
<Expander ToolTip="Expand" ExpandDirection="Down" Margin="-100,0,-300,0" Foreground="Black" VerticalAlignment="Top">
Thanks to #LittleBit for this tip.
<ListView x:Name="lsttest" ItemsSource="{Binding persons}">
<ListViewItem>
<StackPanel>
<ListView>
<ListView.View>
<GridView>
<GridViewColumn Header="#1" Width="50">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"
Width="20" TextAlignment="Left" Margin="5" VerticalAlignment="Top" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Test 2" Width="50">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"
Width="20" TextAlignment="Left" Margin="5" VerticalAlignment="Top" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
<Expander ToolTip="Expand" ExpandDirection="Down" Foreground="Black" VerticalAlignment="Top">
<Expander.Header>
<TextBlock Text="{Binding Model.Name, Mode=OneWay}"
HorizontalAlignment="{Binding HorizontalAlignment, RelativeSource={RelativeSource AncestorType=ContentPresenter}, Mode=OneWayToSource}"
TextAlignment="Left" Margin="5" TextWrapping="Wrap" VerticalAlignment="Top" />
</Expander.Header>
<GroupBox Header="Description" FontWeight="Bold" Width="{Binding ActualWidth, ElementName=lsttest}">
<TextBlock Text="{Binding Name, Mode=OneWay}" TextWrapping="Wrap"
FontWeight="Normal" TextAlignment="Left" Margin="5" />
</GroupBox>
</Expander>
</StackPanel>
</ListViewItem>
</ListView>
The result:

Wrap text in ListView item in Grid

How do I wrap text in a Grid?
In MainWindow.xaml
<Grid>
<ListView Margin="10" Name="Users" >
<ListView.View>
<GridView>
<GridViewColumn Header="Name" Width="300" DisplayMemberBinding="{Binding Name}" />
<GridViewColumn Header="Age" Width="200" DisplayMemberBinding="{Binding Age}" />
</GridView>
</ListView.View>
</ListView>
</Grid>
In MainWindow.xaml.cs
public ObservableCollection<User> items = new ObservableCollection<User>();
items.Add(new User() { Name = "John", Age = 42 });
Users.ItemsSource = items;

You should create DataTemplate for the GridViewColumn and place TextBlock. Then it is possible to use TextWrapping property. Work example:
<ListView Name="Users">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" Width="385">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding Name}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Age" Width="385">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding Age}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>

Horizontal line after list view item in grid

How do I insert a horizontal line after each list view item in a grid?
<Grid>
<ListView Margin="10" Name="Users">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" Width="300">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock TextWrapping="Wrap" TextTrimming="WordEllipsis" Height="32" Text="{Binding Name}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Age" Width="200">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock TextWrapping="Wrap" TextTrimming="WordEllipsis" Height="32" Text="{Binding Age}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>
I tried defining Border after DataTemplate
<DataTemplate>
<Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue">
but that only added a border around each of the data template items. How do I insert a horizontal separator after each row?

I think you ought to be able to set a row style via the ItemContainerStyle:
https://stackoverflow.com/a/4474474/424129
You'd want to set a BorderThickness="0,0,0,1" to have only a bottom border.

Focus move to first textbox of second row in Grid view

I have designed a wpf page. But I not able to set Proper Tab Navigation on Grid view. Controls (grid view) on the page are not following tab index. Page contain Grid and Save,Cancel button.
There is a gridview. This grid has rows and columns. Each row contains 2 autocompletebox and 6 textboxes. When first i enter the value on the first autocompletebox,then enter tab it move to next box and so on. I enter the value in last text box and press enter button, then a new row will be formed in the grid. Then i press the tab it focus move on the outside button(Save button).
I want to move the focus on the next box( first autocomplete box,not on the save button) in the second row in the grid.Pls help...
XAML
<GridView KeyboardNavigation.IsTabStop="False" >
<GridViewColumn Header="Id" Width="0" DisplayMemberBinding="{Binding Path=PurchaseItemId}"></GridViewColumn>
<GridViewColumn Header="No." Width="20" DisplayMemberBinding="{Binding Path=No, NotifyOnValidationError=True, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"></GridViewColumn>
<GridViewColumn Header="ItemId" Width="0" DisplayMemberBinding="{Binding Path=ItemId}"></GridViewColumn>
<GridViewColumn HeaderContainerStyle="{StaticResource hcs}" Header="Item Code" Width="60">
<GridViewColumn.CellTemplate >
<DataTemplate>
<StackPanel>
<!--<TextBox x:Name="txtItemCode" Width="60" Text="{Binding Path=ItemCode, NotifyOnValidationError=True, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}" TabIndex="2" />-->
<my:AutoCompleteBox Canvas.Left="295" Canvas.Top="393" Name="txtItemCode" Text="{Binding Path=ItemCode, NotifyOnValidationError=True, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" ItemsSource="{Binding Path=AutoCompleteBoxCodes, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedItem="{Binding Path=AutoCompleteBoxSelectedCode1, NotifyOnValidationError=True, ValidatesOnDataErrors=True,UpdateSourceTrigger=LostFocus, Mode=TwoWay}" IsTextCompletionEnabled="True" TextChanged="txtItemCode_TextChanged" KeyDown="txtItemCode_KeyDown" SelectionChanged="txtItemCode_SelectionChanged" />
<!--<ListBox x:Name="lstItemCodes" Width="250" Height="100" ItemsSource="{Binding Path=PurchaseItemCodes}" Visibility="{Binding Path=IsItemCodeListVisible}" SelectedItem="{Binding Path=SelectedItemCode1, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Code}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>-->
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn HeaderContainerStyle="{StaticResource hcs}" Header="Item Name" Width="120">
<GridViewColumn.CellTemplate >
<DataTemplate>
<StackPanel>
<my:AutoCompleteBox Canvas.Left="295" Canvas.Top="393" Name="txtItemName" Text="{Binding Path=ItemName, NotifyOnValidationError=True, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" ItemsSource="{Binding Path=AutoCompleteBoxNames, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedItem="{Binding Path=AutoCompleteBoxSelectedName1, Mode=TwoWay, UpdateSourceTrigger=LostFocus}" IsTextCompletionEnabled="True" Width="100" TextChanged="txtItemName_TextChanged" PreviewKeyDown="txtItemName_PreviewKeyDown" IsHitTestVisible="True" />
<!--<TextBox Name="txtItemName" Width="120" Text="{Binding Path=ItemName, NotifyOnValidationError=True, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"/>
<ListBox x:Name="lstItemNames" Width="250" Height="70" ItemsSource="{Binding Path=PurchaseItems}" Visibility="{Binding Path=IsItemListVisible}" SelectedItem="{Binding Path=SelectedItem1, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Bottom" AllowDrop="False">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Path=Name}" FontWeight="ExtraBlack" />
<TextBlock Text="{Binding Path=Category.CategoryName}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>-->
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn HeaderContainerStyle="{StaticResource hcs}" Header="Qty" Width="50" >
<GridViewColumn.CellTemplate >
<DataTemplate>
<TextBox x:Name="txtQuantity" Width="45" Text="{Binding Path=Quantity, NotifyOnValidationError=True, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}" TextChanged="txtQuantity_TextChanged" PreviewTextInput="txtQuantity_PreviewTextInput" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn HeaderContainerStyle="{StaticResource hcs}" Header="Purchase Price" Width="80">
<GridViewColumn.CellTemplate >
<DataTemplate>
<TextBox x:Name="txtPurchasePrice" Width="60" Text="{Binding Path=Purchaseprice, NotifyOnValidationError=True, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}" PreviewTextInput="txtPurchasePrice_PreviewTextInput" TextChanged="txtPurchasePrice_TextChanged" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn HeaderContainerStyle="{StaticResource hcs}" Header="Unit" Width="70">
<GridViewColumn.CellTemplate >
<DataTemplate>
<ComboBox Canvas.Left="10" Canvas.Top="10" Height="23" Name="cmbUnit" Width="55" ItemsSource="{StaticResource UnitData }" SelectedItem="{Binding Path=Unit}">
</ComboBox>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn HeaderContainerStyle="{StaticResource hcs}" Header="ProfitAmount" Width="75">
<GridViewColumn.CellTemplate >
<DataTemplate>
<TextBox Name="txtProfitAmount" Width="70" Text="{Binding Path=ProfitAmount, NotifyOnValidationError=True, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}" TextChanged="txtProfitAmount_TextChanged" PreviewTextInput="txtProfitAmount_PreviewTextInput" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn HeaderContainerStyle="{StaticResource hcs}" Header="Profit %" DisplayMemberBinding="{Binding Path=ProfitPercent, NotifyOnValidationError=True, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}" Width="50">
<!--<GridViewColumn.CellTemplate >
<DataTemplate>
<TextBox Name="txtProfitPercent" Width="80" Text="{Binding Path=ProfitPercent, NotifyOnValidationError=True, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}" IsEnabled="False" />
</DataTemplate>
</GridViewColumn.CellTemplate>-->
</GridViewColumn>
<GridViewColumn HeaderContainerStyle="{StaticResource hcs}" Header="Selling Price" DisplayMemberBinding="{Binding Path=SellingPrice, NotifyOnValidationError=True, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}" Width="70">
<!--<GridViewColumn.CellTemplate >
<DataTemplate>
<TextBox Name="txtSellingPrice" Width="100" Text="{Binding Path=SellingPrice, NotifyOnValidationError=True, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}" IsEnabled="False" />
</DataTemplate>
</GridViewColumn.CellTemplate>-->
</GridViewColumn>
<GridViewColumn HeaderContainerStyle="{StaticResource hcs}" Header="Tax" Width="40">
<GridViewColumn.CellTemplate >
<DataTemplate>
<TextBox Name="txtTax" Width="35" Text="{Binding Path=Tax, NotifyOnValidationError=True, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}" TextChanged="txtTax_TextChanged" PreviewTextInput="txtTax_PreviewTextInput" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn HeaderContainerStyle="{StaticResource hcs}" Header="Description" Width="80">
<GridViewColumn.CellTemplate >
<DataTemplate>
<TextBox Name="txtDescription" Width="75" Text="{Binding Path=Description, NotifyOnValidationError=True, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn HeaderContainerStyle="{StaticResource hcs}" Header="ShelfLocation" Width="100">
<GridViewColumn.CellTemplate >
<DataTemplate>
<TextBox Name="txtShelfLocation" Width="120" Text="{Binding Path=ShelfLocation, NotifyOnValidationError=True, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}" KeyDown="txtShelfLocation_KeyDown" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Total" Width="80" DisplayMemberBinding="{Binding Path=Total, UpdateSourceTrigger=PropertyChanged}"></GridViewColumn>
</GridView >
Thank you...

If you want TabNavigation to be cycle within the GridView and shouldn't leave the GridView, set KeyboardNavigation.TabNavigation="Cycle" on your GridView.
Possible enumeration modes for KeyboardNavigation.TabNavigation attached property can be found here.
For reference:

Set the IsTabStop=false for the buttons.

How to make GridView support multiple selection in wpf

This is my wpf file. I want the GridView to support multiple selections.
<ListView Name="deviceListBox"
Width="630"
Height="282"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ItemsSource="{Binding Items}"
SelectionChanged="deviceListBox_SelectionChanged"
SelectionMode="Single">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn>
<GridViewColumn.HeaderTemplate>
<DataTemplate>
<Label Width="15"
Height="25"
Margin="10,0,0,0"
HorizontalAlignment="center"
VerticalAlignment="Center" />
</DataTemplate>
</GridViewColumn.HeaderTemplate>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<controls:PresenceIndicator Width="35"
Height="30"
Margin="7,0,0,0"
HorizontalAlignment="center"
VerticalAlignment="Center"
PhotoDisplayMode="Large"
SingleClickAction="ShowContactDetails"
Source="{Binding Path=SipURI}" />
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>
<GridViewColumn.HeaderTemplate>
<DataTemplate>
<Label Width="95"
Height="25"
Margin="10,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="Username"
Foreground="Black" />
</DataTemplate>
</GridViewColumn.HeaderTemplate>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<Label Height="30"
Margin="7,0,0,0"
HorizontalAlignment="left"
VerticalAlignment="Center"
Content="{Binding Path=Username}"
Foreground="Black" />
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>

Change your SelectionMode to Multiple or Extended. See this MSDN post

Set the DataGrid.SelectionMode:
<DataGrid SelectionMode="Single" ...