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:

C# WPF Display a Listview Control over a listview item

Ok so I've been looking for a WPF listview that works something like a treeview. I have a Data Model that has an observerableCollection of children of the item. I've looked at a few options using a few treeview with columns controls that have been shown on stackoverflow or on CodeProject but they either aren't bindable or are too slow to be useful.
The list will be update constantly throughout the day any may have more than 50k-100k items in it by the end of the day. A normal listview control seems to be able to handle these updates and still be useful without completely freezing when a resort is needed.
Now, my data objects should really only ever have one layer of children. So what I was thinking about trying is displaying a toggle button on the listview item (if the item has children), but then when the toggle button is clicked I want to display another listview of that item's children within the current listviewitem. I've been searching for more than a week trying to figure out how to do this. Can anyone lead me in the right direction here? I'm thinking I need a ItemTemplate for the listview but I'm not exactly sure how to get the child listview to show in the parent's listviewitem.
Thanks in advance
UPDATE:
Here is a sample of the XAML I'm currently trying to use but it doesn't seem to be working correctly. I want the columns but when I click the toggle button I want the sub listview to be displayed. Currently all I see is the columns and I can't get the sub listview to display.
<ListView ItemsSource="{Binding MyCollection, NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=True, UpdateSourceTrigger=PropertyChanged}" x:Name="lsvMyList">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<ListView ItemsSource="{Binding Children}">
<ListView.View>
<GridView>
<GridViewColumn Header="Column2"
DisplayMemberBinding="{Binding Column2}"
Width="100"/>
<GridViewColumn Header="Column3"
DisplayMemberBinding="{Binding Column3}"
Width="100"/>
<GridViewColumn Header="Column5"
DisplayMemberBinding="{Binding Column5}"
Width="100"/>
<GridViewColumn Header="Column8"
DisplayMemberBinding="{Binding Column8}"/>
</GridView>
</ListView.View>
</ListView>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.View>
<GridView>
<GridViewColumn Width="68" Header="IsExpanded">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ToggleButton Visibility="{Binding ChildCount, Converter={StaticResource Toggle}}"
x:Name="tbnItemExpander"
Content="+"
Height="15"
Width="15"
BorderThickness="0"
Background="Transparent"
IsChecked="{Binding IsExpanded, NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=True, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Click="Toggle_Click"/>
<TextBlock VerticalAlignment="Center"
Text="{Binding ChildCount, NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=True, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource RejectCount2}}"
Margin="2,0,2,0"/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Column2"
DisplayMemberBinding="{Binding Column2, NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=True, UpdateSourceTrigger=PropertyChanged}"
Width="63"/>
<GridViewColumn Header="Column3"
DisplayMemberBinding="{Binding Column2, NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=True, UpdateSourceTrigger=PropertyChanged}"
Width="28"/>
<GridViewColumn Header="Column4"
DisplayMemberBinding="{Binding Column2, NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=True, UpdateSourceTrigger=PropertyChanged}"
Width="68"/>
<GridViewColumn Header=""
Width="110">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Click="Button_Click"
Margin="2" Padding="2"
IsEnabled="{Binding Column5, Converter={StaticResource IsNull}}"
Content="{Binding Converter={StaticResource btnContent}}"
Tag="{Binding NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=True, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>
</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.

How to get ListView SelectedItem while editing?

I'm trying to save record when combination of keys pressed Ctrl + S.
Below code works fine only when i exit TextBox and select line then press Ctrl + S.
How to SelectItem without exiting TextBox? For example: typing text >> Ctrl + S >> continue typing.
Here is my code:
if (Keyboard.IsKeyDown(Key.LeftCtrl) && Keyboard.IsKeyDown(Key.S))
{
sql.saveSoftwareChanges(_list.SelectedItem as Software);
e.Handled = true;
}
and XAML:
<ListView x:Name="_list" Visibility="Visible" KeyDown="_list_KeyDown">
<!--RESOURCES-->
<ListView.Resources>
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="true">
<Setter Property="IsSelected" Value="true" />
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="#FFFFFF9A" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.Resources>
<!--/RESOURCES-->
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button x:Name="_save" Content="Save" MinWidth="20" Width="AUTO" Click="_save_Click" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Product ID">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding productId}" MinWidth="20" Width="AUTO" Padding="2"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Product">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding product}" MinWidth="20" Width="AUTO" Padding="2"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Path">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding path}" MinWidth="20" Width="AUTO" Padding="2"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Master Path">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding master_path}" MinWidth="20" Width="AUTO" Padding="2"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Parameters">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding parameters}" MinWidth="20" Width="AUTO" Padding="2"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Windows Version">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding windowsVersion}" MinWidth="20" Width="AUTO" Padding="2"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>

After a lot of research and trial and error I've got the solution.
It's as simple as moving out of that field, which can be achieved by:
MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));
and entire method looks like:
if (Keyboard.IsKeyDown(Key.LeftCtrl) && Keyboard.IsKeyDown(Key.S))
{
var uie = e.OriginalSource as UIElement;
uie.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));
sql.saveSoftwareChanges(_list.SelectedItem as Software);
uie.Focus();
e.Handled = true;
}
I hope that will help others as well.

You have to place your save code in a function then call this function from any control that may have the focus at that time. (i.e. the text box as well).
Remember that keyboard events only fire when the corresponding control has focus.
Test this:
<ListView x:Name="_list" Visibility="Visible" KeyDown="_list_KeyDown">
<!--RESOURCES-->
<ListView.Resources>
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="true">
<Setter Property="IsSelected" Value="true" />
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="#FFFFFF9A" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.Resources>
<!--/RESOURCES-->
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button x:Name="_save" Content="Save" MinWidth="20" Width="AUTO" Click="_save_Click" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Product ID">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding productId}" MinWidth="20" Width="AUTO" Padding="2" KeyDown="_list_KeyDown"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Product">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding product}" MinWidth="20" Width="AUTO" Padding="2" KeyDown="_list_KeyDown"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Path">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding path}" MinWidth="20" Width="AUTO" Padding="2" KeyDown="_list_KeyDown"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Master Path">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding master_path}" MinWidth="20" Width="AUTO" Padding="2" KeyDown="_list_KeyDown"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Parameters">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding parameters}" MinWidth="20" Width="AUTO" Padding="2" KeyDown="_list_KeyDown"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Windows Version">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding windowsVersion}" MinWidth="20" Width="AUTO" Padding="2" KeyDown="_list_KeyDown"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>

Button Will Not Fire from Style

Yeah, im not sure what i have done. brain feels like swiss cheese
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Command" Value="{Binding CommandButtonClicked}"/>
<Setter Property="CommandParameter" Value="{Binding Mode=OneWay, RelativeSource={RelativeSource Self}}"/>
</Style>
</Window.Resources>
Button that will Fire.
<Grid DockPanel.Dock="Top">
<TextBox BorderBrush="Transparent" BorderThickness="0" x:Name="txtInput" Padding="50,10,15,15" AcceptsReturn="True" TextChanged="txtInput_TextChanged" TextWrapping="Wrap" Foreground="Crimson" Text="{Binding UserInput, Mode=TwoWay}" Background="Transparent"/>
<Button Width="30" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,3,0,0">
<Image Source="Images/Actions list add user.ico" />
</Button>
</Grid>
Buttons that will not fire
<ListView x:Name="ListViewUsers" ItemsSource="{Binding UserNames}" DockPanel.Dock="Top" Foreground="Green" BorderBrush="Transparent">
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.HeaderTemplate>
<DataTemplate>
<Button Margin="3,0,3,0" Width="30">
<Image Source="Images/Actions user group delete.ico"/>
</Button>
</DataTemplate>
</GridViewColumn.HeaderTemplate>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button>
<Image Source="Images/Actions list remove user.ico" Width="25"/>
</Button>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="User ID" DisplayMemberBinding="{Binding}"/>
</GridView>
</ListView.View>
</ListView>
i have also tried adding in a separate DelegateCommand per button, but that doesnt help either. it seems to be anything that inside this ListView and is Generated at runtime after the initial render will not fire.
any ideas ?

In the "cell" DataTemplate it will have its DataContext set to the "item" within the data collection assigned to the ListView for which the "look" is being provided i.e. a "username".
But your style is using a binding that needs to access the object that contains the "CommandButtonClicked" property.
Thus you need a way to get back to the DataContext that is holding your "CommandButtonClicked" property.....so assuming you had set your "ViewModel" onto your Windows DataContext you could do this...
<ListView x:Name="ListViewUsers" ItemsSource="{Binding UserNames}" DockPanel.Dock="Top" Foreground="Green" BorderBrush="Transparent">
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.HeaderTemplate>
<DataTemplate>
<Button Margin="3,0,3,0" Width="30" DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}},Path=DataContext}">
<Image Source="Images/Actions user group delete.ico"/>
</Button>
</DataTemplate>
</GridViewColumn.HeaderTemplate>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}},Path=DataContext}">
<Image Source="Images/Actions list remove user.ico" Width="25"/>
</Button>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="User ID" DisplayMemberBinding="{Binding}"/>
</GridView>
</ListView.View>
</ListView>
There are alternative ways to do what you are doing...just one suggestion...look up routed commands (you could define one and then use it in your style e.g. Command="{x:Static mynamespace::MyCommands.DoSomething}" and then set up a CommandBinding to handle them).