Develop Reference

How do I add a Header row in WPF in a ListView of Grid with ColumnDefintions?

I am using a ViewModel to bind the data to the view in every textblock. I shortened the code to the most important parts.
Now, I wanna add a Header row into this structure. So every Column defined below in Grid.RowDefinitions shoudl have a constant header text. Any idea how I can realise this?
<Grid>
<ListView DockPanel.Dock="Top" Margin="10" ItemsSource="{Binding CurrentView}">
<ListView.ItemTemplate>
<DataTemplate DataType="viewModel:ViewModel">
<Border BorderBrush="Black" BorderThickness="1" Margin="1">
<Expander ToolTip="Expand" ExpandDirection="Down" Foreground="Black">
<Expander.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Width="20" Text="{Binding Model.Number, StringFormat='#{0}', Mode=OneWay}" TextAlignment="Left" Margin="5" />
<Image Grid.Column="1" />
<TextBlock Grid.Column="2" TextAlignment="Center" Margin="5" Width="50">
<Hyperlink />
</TextBlock>
<TextBlock Grid.Column="3" TextAlignment="Left" Margin="5" TextWrapping="Wrap" />
<TextBlock Grid.Column="4" TextAlignment="Center" Margin="5" Width="100" />
<Button Grid.Column="5" />
</Grid>
</Expander.Header>
<GroupBox Header="Description" FontWeight="Bold">
<TextBlock Text="{Binding Model.Description, Mode=OneWay}" TextWrapping="Wrap" FontWeight="Normal" TextAlignment="Left" Margin="5" />
</GroupBox>
</Expander>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
OK, you guys are a good help :) i changed the structure to the code below and the headers are working fine!
But in my original code, there is this expander. Everywhere in the row, i could click to expand the description. The expander now won't work with the new design. Any ideas?
Basically i want something like this:
<ListView Name="test2" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Items}">
<ListView.View>
<GridView>
<Expander>
<Expander ToolTip="Expand" ExpandDirection="Down" Foreground="Black">
<Expander.Header>
<GridView.Columns>
<GridViewColumn Header="Column1">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}"> </TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Column2">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Test}"></TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView.Columns>
</Expander.Header>
<TextBlock Text="Here goes the Description" />
<Expander>
</GridView>
</ListView.View>
</ListView>
How it should look like (please ignore my paint skills)

This would give every column a header but im not sure if this is what your intentions are:
<ListView x:Name="test" DockPanel.Dock="Top" Margin="10" ItemsSource="{Binding CurrentView}">
<ListView.ItemTemplate>
<DataTemplate DataType="viewModel:ViewModel">
<Border BorderBrush="Black" BorderThickness="1" Margin="1">
<Expander ToolTip="Expand" ExpandDirection="Down" Foreground="Black">
<Expander.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Column="0">Column 1</Label>
<Label Grid.Column="1">Column 2</Label>
<Label Grid.Column="2">Column 3</Label>
<Label Grid.Column="3">Column 4</Label>
<TextBlock Grid.Column="0" Width="20" Text="{Binding Model.Number, StringFormat='#{0}', Mode=OneWay}" TextAlignment="Left" Margin="5" />
<Image Grid.Column="1" />
<TextBlock Grid.Column="2" TextAlignment="Center" Margin="5" Width="50">
<Hyperlink />
</TextBlock>
<TextBlock Grid.Column="3" TextAlignment="Left" Margin="5" TextWrapping="Wrap" />
<TextBlock Grid.Column="4" TextAlignment="Center" Margin="5" Width="100" />
<Button Grid.Column="5" />
</Grid>
</Expander.Header>
</Expander>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
a better structure should look more like this (example you should modify it to satisfy you own needs):
<ListView Name="test2" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Items}">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn Header="Column1">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}"></TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Column2">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Test}"></TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
I think that i now understand what you're trying to achive
I tested this solution and it works fine, please try this with your own data:
<CollectionViewSource x:Key='key' Source="{Binding Source={StaticResource MyData}}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="#Catalog" />
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</Window.Resources>
<ListView ItemsSource='{Binding Source={StaticResource key}}' BorderThickness="0,0,0,0">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0,0,0,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True"
BorderBrush="Gray"
BorderThickness="0,0,0,1">
<Expander.Header>
<DockPanel>
<TextBlock Text="{Binding Path=Name}" Margin="5,0,0,0" Width="100"/>
<TextBlock Text="{Binding Path=Item}"/>
</DockPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
<ListView.View>
<GridView>
<GridViewColumn Header="ID"
DisplayMemberBinding="{Binding ID}"
Width="100" />
<GridViewColumn Header="Titel"
DisplayMemberBinding="{Binding This}"
Width="100" />
<GridViewColumn Header="Date"
DisplayMemberBinding="{Binding Should}"
Width="100" />
<GridViewColumn Header="Something"
DisplayMemberBinding="{Binding Work}"
Width="100" />
</GridView>
</ListView.View>
</ListView>
How it looks:

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:

Enable field of a Listbox from combobox (C#-xaml)

I would like to enable or disable a field when a specific value in the combobox is selected:
In my xaml, I have a ListBox (ListToTransfert)wich is filled by dragging items from another Listbox (ListViewContents).
The ListToTransfert got 3 fields: Name, Gapand Time.
The field Namecannot be edited while the 2 others can be.
When the combobox has its value changed to Gapor to Time, I want the appropriate column to be enabled while the other one is disabled.
Here is the code of my XAML:
<!-- ListViewContents -->
<Label Content="Contents" Background="White" HorizontalContentAlignment="Center" HorizontalAlignment="Left" Margin="11,16,0,0" VerticalAlignment="Top" Width="400" Height="31"/>
<ListView Background="#bdc3c7" x:Name="ListViewContents" SelectionMode="Single" Margin="11,51.826,0,11" HorizontalAlignment="Left" Width="400">
<ListView.View>
<GridView >
<GridViewColumn Header="Name" Width="350" DisplayMemberBinding="{Binding Name}"/>
</GridView>
</ListView.View>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<command:EventToCommand Command="{Binding TransferContent}"
CommandParameter="{Binding SelectedItem, ElementName=ListViewContents}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<Label Content="Label" Height="100" Width="100"/>
</ListView>
<!-- ListToTransfert -->
<TextBox Style="{StaticResource {x:Static ToolBar.TextBoxStyleKey}}"
HorizontalContentAlignment="Center"
HorizontalAlignment="Left" Margin="851,16,0,0"
VerticalAlignment="Top" Width="400" Height="31" Text="{Binding groupName}" />
<ListView Background="#bdc3c7" x:Name="ListToTransfert" ItemsSource="{Binding ContentsToTransfer}" HorizontalAlignment="Right" Width="400" Margin="0,51.826,21,11">
<ListView.View>
<GridView>
<GridViewColumn Header="Amount" >
<GridViewColumn.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
</Grid.ColumnDefinitions>
<TextBlock Foreground="Black" Background="AliceBlue" Text="{Binding}"/>
</Grid>
</DataTemplate>
</GridViewColumn.HeaderTemplate>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
</Grid.ColumnDefinitions>
<TextBlock Foreground="Black" Background="AliceBlue" HorizontalAlignment="Right" Text="{Binding Path=Name}"/>
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Gap"></GridViewColumn>
<GridViewColumn Header="Time"></GridViewColumn>
</GridView>
</ListView.View>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<command:EventToCommand Command="{Binding DeleteContent}"
CommandParameter="{Binding SelectedItem, ElementName=ListToTransfert}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</ListView>
My combobox is not yet created since i'm not sure if there is a solution for this problem, tho there is always one.
Can you propose me a XAML solution to do that?

This can be done either via a group of RadioButtons or a single ComboBox.
RadioButton
If you don't need to control this behavior from the view model, you can use the following :
<RadioButton x:Name="TimeRadioButton" Content="Time" />
<GridViewColumn Header="Gap">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<TextBlock IsEnabled="{Binding IsChecked, ElementName=GapRadioButton}"/>
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
Alternatively, you can add EnableGapColumn/EnableTimeColumn on your view model. However, it would be better if you create an enum to define this behavior :
public enum TransfertViewType
{
Gap, Time
}
And change your bindings with EnumToBooleanConverter:
<!-- put this in a resource -->
<converter:EnumToBooleanConverter x:Key="EnumToBooleanConverter" />
<RadioButton Content="Time" IsChecked="{Binding ViewType, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter={x:Static vm:YourViewModel.TransfertViewType}}"/>
<TextBlock IsEnabled="{Binding ViewType, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter={x:Static vm:YourViewModel.TransfertViewType}}"/>
ComboBox
It would pretty much the same as the second part of RadioButton section, except that you will need to create an IEnumerable<TransfertViewType> as the ItemsSource for the ComboBox. Or, an IDictionary<TransfertViewType, string> if you like to customize the description a little bit.
<!-- for ienumerable -->
<ComboBox ItemsSource="{Binding TransfertViewTypes}"
SelectedValue="{Binding ViewType}" />
<!-- for idictionary -->
<ComboBox ItemsSource="{Binding TransfertViewTypes}"
DisplayMemberPath="Value" SelectedValuePath="Key"
SelectedValue="{Binding ViewType}" />

ListView in WPF not filling all available space

How do I make a ListView in WPF fill all of the available space? I have tried lots and lots of things but none of them work.
Most recently I tried nesting the ListView in a DockPanel and then using a binding on the ListView to grab the DockPanel's ActualHeight. This works well but there are other controls in the container and they need to be accommodated.
I don't really want to have to write OnControlLoaded() and OnControlResized() events and resize the ListView in code. What can I do?
Here is the XAML with the offending SortableListView on line 10.
<DockPanel>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="15 5 5 5">
<Button x:Name="btnAddCost" Padding="3" ToolTip="Add Cost" Margin="0 0 5 0" Click="btnAddCost_Click" >
Add Cost
</Button>
<Button x:Name="btnDeleteCost" Padding="3" ToolTip="Delete Cost" Margin="0 0 5 0" Click="btnDeleteCost_Click" IsEnabled="{Binding ElementName=lvCosts, Path=SelectedItem, Converter={StaticResource falseWhenNullConverter}}" >
Delete Cost
</Button>
</StackPanel>
<ctrls:SortableListView DockPanel.Dock="Top" x:Name="lvCosts" Margin="1" SelectionMode="Single" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
ContextMenuOpening="lvCosts_ContextMenuOpening"
DefaultActionSelected="lvCosts_DefaultActionSelected" MouseDoubleClick="lvCosts_MouseDoubleClick"
ItemsSource="{Binding Booking.AdditionalCosts}">
<ListView.View>
<GridView>
<GridViewColumn Header="Category" Width="100" DisplayMemberBinding="{Binding Path=Category.Name}" ctrls:SortableListView.SortPropertyName="Category">
</GridViewColumn>
<GridViewColumn Header="Supplier" Width="110" DisplayMemberBinding="{Binding Path=Supplier}" ctrls:SortableListView.SortPropertyName="Supplier">
</GridViewColumn>
<GridViewColumn Header="Buy Currency" Width="100" DisplayMemberBinding="{Binding Path=BuyCurrency.Name}" ctrls:SortableListView.SortPropertyName="BuyCurrency">
</GridViewColumn>
<GridViewColumn Header="Buy Price" Width="110" DisplayMemberBinding="{Binding Path=BuyPrice}" ctrls:SortableListView.SortPropertyName="BuyPrice">
</GridViewColumn>
<GridViewColumn Header="Sell Currency" Width="100" DisplayMemberBinding="{Binding Path=SellCurrency.Name}" ctrls:SortableListView.SortPropertyName="SellCurrency">
</GridViewColumn>
<GridViewColumn Header="Sell Price" Width="110" DisplayMemberBinding="{Binding Path=SellPrice}" ctrls:SortableListView.SortPropertyName="SellPrice">
</GridViewColumn>
<GridViewColumn Header="Margin" Width="180" DisplayMemberBinding="{Binding Path=Margin}" ctrls:SortableListView.SortPropertyName="Margin">
</GridViewColumn>
</GridView>
</ListView.View>
<ListView.ContextMenu>
<ContextMenu x:Name="mnuCostOptions" >
<MenuItem x:Name="mniAddCost" Header="_Add Cost" Click="mniAddCost_Click" ></MenuItem>
<MenuItem x:Name="mniEditCost" Header="View/_Edit Cost" Click="mniEditCost_Click" IsEnabled="False"></MenuItem>
<MenuItem x:Name="mniDeleteCost" Header="_Delete Cost" Click="mniDeleteCost_Click" IsEnabled="False"></MenuItem>
</ContextMenu>
</ListView.ContextMenu>
</ctrls:SortableListView>
<StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" Margin="0,0,0,5">
<TextBlock Grid.Row="3" Grid.Column="0">Total Buy Price:</TextBlock>
<rdf:NumericTextBox Grid.Row="3" Grid.Column="1" IsEnabled="False" MinWidth="50" Margin="0,0,10,0">
<rdf:NumericTextBox.Text>
<Binding Path="Booking.AdditionalCostsBuyPriceConvertedTotal" UpdateSourceTrigger="PropertyChanged"
Converter="{StaticResource currencyStringConverter}" ConverterParameter="#0.00" Mode="OneWay">
</Binding>
</rdf:NumericTextBox.Text>
</rdf:NumericTextBox>
<TextBlock Grid.Row="3" Grid.Column="0">Total Sell Price:</TextBlock>
<rdf:NumericTextBox Grid.Row="3" Grid.Column="1" IsEnabled="False" MinWidth="50" Margin="0,0,10,0">
<rdf:NumericTextBox.Text>
<Binding Path="Booking.AdditionalCostsSellPriceConvertedTotal" UpdateSourceTrigger="PropertyChanged"
Converter="{StaticResource currencyStringConverter}" ConverterParameter="#0.00" Mode="OneWay">
</Binding>
</rdf:NumericTextBox.Text>
</rdf:NumericTextBox>
<TextBlock Grid.Row="3" Grid.Column="0">Total Margin:</TextBlock>
<rdf:NumericTextBox Grid.Row="3" Grid.Column="1" IsEnabled="False" MinWidth="50" Margin="0,0,10,0">
<Binding Path="Booking.AdditionalCostsMarginConvertedTotal" UpdateSourceTrigger="PropertyChanged"
Converter="{StaticResource currencyStringConverter}" ConverterParameter="#0.00" Mode="OneWay">
</Binding>
</rdf:NumericTextBox>
<TextBlock Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" Text="{Binding Path=Booking.SellPriceCurrency.Name, Mode=OneWay}" Margin="0,0,0,0"/>
</StackPanel>
</DockPanel>
Thanks, M

You have a DockPanel containing:
StackPanel
a SortableListView and
another StackPanel
1 & 2 are both docked to the Top; 3 is docked to the Bottom. That means you have nothing in the middle, ie. between 2 & 3. Rearrange the order of the elements to place the SortableListView third, and remove its DockPanel.Dock property so it takes up the remaining space.
In other words, instead of what you have now:
<DockPanel>
<StackPanel DockPanel.Dock="Top" ... >
<ctrls:SortableListView DockPanel.Dock="Top" ... >
<StackPanel DockPanel.Dock="Bottom" ... >
</DockPanel>
change it to this:
<DockPanel>
<StackPanel DockPanel.Dock="Top" ... >
<StackPanel DockPanel.Dock="Bottom" ... >
<ctrls:SortableListView ... >
</DockPanel>

XAML Get data from binded elements

I have this XAML code:
<ListView Name="ListBoxWithNews" ItemsSource="{Binding News}" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding imageURL}" Width="75" Height="75" />
<StackPanel>
<TextBox Text="{Binding Title}" Width="200" />
<TextBox Text="{Binding Body}" Width="200" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The controls are binded using the MVVM pattern. The user can change the content of the two text boxes. Is there a possible way to get the updated text from these text boxes at some point when I need them?

Your ViewModel should implement INotifyPropertyChanged and Use TwoWay Binding as below
<ListView Name="ListBoxWithNews" ItemsSource="{Binding News,Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding imageURL,Mode=TwoWay}" Width="75" Height="75" />
<StackPanel>
<TextBox Text="{Binding Title,Mode=TwoWay}" Width="200" />
<TextBox Text="{Binding Body,Mode=TwoWay}" Width="200" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>