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>

Check box for Column listview Wpf

How to create Check box for Column inside Listview. i was able to make checkbox for listview items. but i want to have checkbox for Column itself.like in windows:
here is code in XAML
<ListView HorizontalAlignment="Left" Grid.Row="1" Width="400">
<ListView.View>
<GridView>
<GridViewColumn Width="140" Header="Column1 With Checkbox">
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox Tag="{Binding}" IsThreeState="False" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="140" Header="Column2" />
<GridViewColumn Width="115" Header="Column3" />
</GridView>
</ListView.View>
</ListView>
Note that this will only make checkboxes for items not Column itself. so how to make this happen?

You can make the header a custom control by defining it under the GridViewColumn.Header property.
<ListView HorizontalAlignment="Left" Grid.Row="1" Width="400">
<ListView.View>
<GridView>
<GridViewColumn Width="140">
<GridViewColumn.Header>
<StackPanel Orientation="Horizontal">
<Checkbox IsChecked="{Binding YourCheckedProperty}" />
<TextBlock Text="Column1" />
</StackPanel>
<GridViewColumn.Header>
</GridViewColumn>
<GridViewColumn Width="140" Header="Column2" />
<GridViewColumn Width="115" Header="Column3" />
</GridView>
</ListView.View>
</ListView>

Binding collection of Threads to ListBox

There probably was a topic in which lays the solution for my problem but I've spend too much hours on this so I've decided to ask.
I have a ListView to which I've binded a collection of processes. And I have a ListBox in which I want to place Threads of a selected process. Binding in ListView works, but analogical in ListBox doesn't.
Here's my .xaml:
<Window x:Class="TaskManager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window" Height="453" Width="533" Icon="/TaskManager;component/Images/taskmgr.png">
<Grid>
<ListView Height="276" HorizontalAlignment="Left" Name="processesView" VerticalAlignment="Top" Width="503" ItemsSource="{Binding ProcessList}">
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn DisplayMemberBinding="{Binding ProcessName}">
<GridViewColumn.Header>
<GridViewColumnHeader Click="nameColumnHeader_Click">
Name
</GridViewColumnHeader>
</GridViewColumn.Header>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Id}">
<GridViewColumn.Header>
<GridViewColumnHeader Click="IDColumnHeader_Click">
ID
</GridViewColumnHeader>
</GridViewColumn.Header>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding BasePriority}">
<GridViewColumn.Header>
<GridViewColumnHeader Click="priorityColumnHeader_Click">
Priority
</GridViewColumnHeader>
</GridViewColumn.Header>
</GridViewColumn>
<GridViewColumn Header="Keep alive">
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox x:Name="keepAliveBox" IsChecked="{Binding EnableRaisingEvents}" Checked="keepAliveBox_Checked" Unchecked="keepAliveBox_Unchecked" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
<ListBox Height="120" HorizontalAlignment="Left" Margin="93,282,0,0" Name="threadBox" VerticalAlignment="Top" Width="200" ItemsSource="{Binding ElementName=processesView, Path=SelectedItem.Threads}">
<ListBox.ItemTemplate>
<DataTemplate>
<!--<ListBoxItem Content="{Binding}"/>-->
<Label Content="{Binding Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
After execution I can't see anything in the ListBox but if I click inside something is selected. So if I change the above to Content="TEST" I can see several Labels with "TEST" value. So it seems that I'm binding the name somehow incorrectly.
Here's the .cs part where I set the context:
public MainWindow()
{
InitializeComponent();
processesView.DataContext = this;
threadBox.DataContext = this;
...
}

Items were invisible but selectable so it was probable that I was binding the wrong thing. And that's the reason. I was binding to Name property of Thread whilst Process has a collection of ProcessThreads which don't have that property. Here's the fix in .xaml:
<ListBox Height="120" HorizontalAlignment="Left" Margin="93,282,0,0" Name="threadBox" VerticalAlignment="Top" Width="200" ItemsSource="{Binding ElementName=processesView, Path=SelectedItem.Threads}">
<ListBox.ItemTemplate>
<DataTemplate>
<Label Content="{Binding Path=Id}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Can't wait for XAML debugger in Visual Studio 2015.

WPF bind control width to ListBox column width

I wrote XAML as follows:
<UserControl.Resources>
<GridViewColumnCollection x:Key="gvcc">
<GridViewColumn Header="Klient"
DisplayMemberBinding="{Binding CustomerName}"
Width="80">
</GridViewColumn>
<GridViewColumn Header="Budżet"
DisplayMemberBinding="{Binding Budget, StringFormat={}{0:C}}"
Width="80">
</GridViewColumn>
<GridViewColumn Header="Zysk. zakł."
DisplayMemberBinding="{Binding ExpectedProfability, StringFormat={}{0:C}}"
Width="80">
</GridViewColumn>
<GridViewColumn Header="Zysk. real."
DisplayMemberBinding="{Binding RealProfability, StringFormat={}{0:C}}"
Width="80">
</GridViewColumn>
<GridViewColumn Header="Miejsce"
DisplayMemberBinding="{Binding Place}"
Width="80" />
<GridViewColumn Header="Nr proj."
DisplayMemberBinding="{Binding Number}"
Width="80">
</GridViewColumn>
</GridViewColumnCollection>
</UserControl.Resources>
...
<Grid>
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Visible">
<ItemsControl ItemsSource="{Binding GroupedProjects}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Red" >
<TextBlock FontSize="13" Text="{Binding Month}" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<GridViewHeaderRowPresenter Name="hrp" Columns="{StaticResource gvcc}" Grid.Column="1" Grid.Row="0" />
<ListBox ItemsSource="{Binding Details}" Grid.Column="1" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Disabled"
GotFocus="ListBox_GotFocus"
PreviewMouseWheel="ListBox_PreviewMouseWheel"
SelectedItem="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.SelectedProject}">
<ListBox.ItemTemplate>
<DataTemplate>
<GridViewRowPresenter Columns="{StaticResource gvcc}" Height="24" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<!-- HERE IS THE PROBLEM -->
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
Data are grouped in the ListBox, underneath the ListBox I want to display something like a summary row. I wanted to do this row as the StackPanel with TextBlock controls. The problem is - how to relate the width of the TextBox controls with the widths of columns in the ListBox.
Let's say the "summary row" is something like that:
<StackPanel Orientation="Horizontal">
<TextBlock Width="bind to ListBox.Column1.Width + ListBox.Column2.Width">some data</TextBlock>
<TextBlock Width="bind to ListBox.Column3.Width">other data</TextBlock>
<TextBlock Width="bind to ListBox.Column4.Width">etc.</TextBlock>
</StackPanel>
As you can see - first TextBlock width is something like "ColumnSpan = 2". The width of the other TextBlocks is simply the width of a column to which I would like to pair them.
Is such a thing is even possible in XAML? Can anyone of you knows how to implement a similar solution in different way?

If you are doing this through MVVM, you can easily use property binding to get it done. Just set the width of each of the ListBox columns to properties in your ViewModel. The textBox controls widths will be bound to a seperate readonly property which takes the appropriate widths, manipulates them in some way, and returns a value. You will have to implement INotifyPropertyChanged and call it on each of the textbox width properties every time a listboxwidth property is changed.
So something like so:
Private _Column1Width As Double
Public Property Column1Width() As Double
Get
Return _Column1Width
End Get
Set(ByVal value As Double)
_Column1Width = value
OnPropertyChanged("TextBox1Width")
End Set
End Property
Private _Column2Width As Double
Public Property Column2Width() As Double
Get
Return _Column2Width
End Get
Set(ByVal value As Double)
_Column2Width = value
OnPropertyChanged("TextBox1Width")
End Set
End Property
Public ReadOnly Property TextBox1Width() As Double
Get
Return Column1Width + (Column2Width * 2)
End Get
End Property
And bindings like so:
<GridViewColumnCollection x:Key="gvcc">
<GridViewColumn Header="Klient"
DisplayMemberBinding="{Binding CustomerName}"
Width="{Binding Column1Width, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"}">
</GridViewColumn>
<GridViewColumn Header="Budżet"
DisplayMemberBinding="{Binding Budget, StringFormat={}{0:C}}"
Width="{Binding Column2Width, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
</GridViewColumn>
<GridViewColumn Header="Zysk. zakł."
DisplayMemberBinding="{Binding ExpectedProfability, StringFormat={}{0:C}}"
Width="80">
</GridViewColumn>
<GridViewColumn Header="Zysk. real."
DisplayMemberBinding="{Binding RealProfability, StringFormat={}{0:C}}"
Width="80">
</GridViewColumn>
<GridViewColumn Header="Miejsce"
DisplayMemberBinding="{Binding Place}"
Width="80" />
<GridViewColumn Header="Nr proj."
DisplayMemberBinding="{Binding Number}"
Width="80">
</GridViewColumn>
</GridViewColumnCollection>
<TextBlock Width="{Binding TextBox1Width}">some data</TextBlock>
Everything resizes just as it should continuously updating as you resize the columns.