ListView first item missing when binding width - xaml

i have this xaml code:
<ListView Name="MyList" ItemsSource="{Binding MyItems}"
ScrollViewer.HorizontalScrollMode="Disabled" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="{Binding ElementName=MyList, Path=ActualWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Grid.ColumnSpan="2" >
<TextBlock Text="{Binding aaa}" />
<TextBlock Text="{Binding bbb}" />
<TextBlock Text="{Binding ccc}"
TextWrapping="WrapWholeWords" TextTrimming="WordEllipsis" Height="25" MaxHeight="25" Margin="0,0,10,0" />
</StackPanel>
<TextBlock Grid.Column="1" Style="{StaticResource ListTitle}" Text="{Binding restaDaPagare}"
HorizontalAlignment="Right" Margin="0,0,10,0" />
<Canvas Grid.Column="2" Height="50" Width="50" Background="{StaticResource GrayBrush}"></Canvas>
<Image Grid.Column="2" Source="/Images/img.png"
Height="50" Width="50" MinHeight="50" MinWidth="50"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
For some reasons, if i use this instruction (row 5):
<Grid Width="{Binding ElementName=MyList, Path=ActualWidth}">
the first item of MyList disappears.
If i use this code:
<Grid Width="400">
everything works well... except that I don't want to use a static Width.
Thanks for any help!

You can try to not set any width for your Grid (in your template) and add this to your ListView
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
This idea was "taken" from this question

Related

How to divide a grid in ListView, in UWP

<Grid Grid.Row="3" HorizontalAlignment="Stretch">
<ListView x:Name="lvAlert" HorizontalAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70*"/>
<ColumnDefinition Width="30*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="{Binding ColorValue }" >
<TextBlock Text="{Binding AlertType}" Foreground="White" Height="35" HorizontalAlignment="Stretch"/>
</Grid>
<Grid Grid.Column="1" Background="{Binding ColorValue }" >
<TextBlock Text="{Binding AlertTypeValue}" Foreground="Black" Height="35" HorizontalAlignment="Stretch"/>
</Grid>
<TextBlock Grid.Column="0" Text="{Binding AlertType}" Foreground="{Binding ColorValue }" Width="400" Height="40"/>
<TextBlock Grid.Column="1" Text="{Binding AlertTypeValue}" Foreground="{Binding ColorValue }" Width="400" Height="40"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
When I run the above code I got an output as in a single line without getting properly separation in 70% and 30%. Can anyone solve this?
By default, ListView's items don't stretch horizontally, but stick to the left.
Your problem should be solved by this code:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
When I run the above code I got an output as in a single line without getting properly separation in 70% and 30%. Can anyone solve this?
It's because the Height of ColumnDefinitions should be set 7* and 3* instead of 70* and 30*:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
For details of Grid usage, you can refer to Gird Class.

GridView ItemTemplate Full Width

My question is: how can I stretch the DataTemplate to the full width of the screen. I've tried many solutions but they does not work.
I've tried HorizontalContentAlignment, setting GridView.ItemContainerStyle and etc. But nothing works. Can anybody explain me how can I do this?
Here is part of my code:
<Grid Style="{StaticResource GeneralAppBackground}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Pivot x:Name="AccountInfoOptions" Grid.Row="1">
<PivotItem Header="История">
<GridView ItemsSource="{x:Bind CheckoutList}" Margin="5,0,5,0">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:UserCheckout">
<StackPanel Orientation="Horizontal" BorderBrush="Transparent" Background="White" Padding="5" Margin="0,5,0,0">
<StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="Center" Margin="0,0,10,0">
<TextBlock FontSize="14" Text="{x:Bind CheckoutDate}" Foreground="#979797" />
<TextBlock FontSize="14" Text="{x:Bind CheckoutTime}" Foreground="#979797" />
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind CheckoutSum}" FontSize="22" FontWeight="Bold" />
<Image Source="/Assets/TengeIcon.png" Width="20" Margin="5,0,0,0"/>
</StackPanel>
<TextBlock Text="{x:Bind CheckoutTitle}" TextAlignment="Center" />
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</PivotItem>
</Pivot>
The key to making it work, is changing the ItemsPanelTemplate. Define it as a page resource:
<Page.Resources>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate">
<ItemsStackPanel />
</ItemsPanelTemplate>
</Page.Resources>
Now set it as the ItemsPanel for your GridView:
<GridView ItemsSource="{x:Bind CheckoutList}"
Margin="5,0,5,0"
ItemsPanel="{StaticResource ResourceKey=ItemsPanelTemplate}">
This will allow individual items to stretch across the full width. You will still need to replace the root StackPanel in your DataTemplate with a Grid as Nikita suggested:
<DataTemplate x:DataType="local:UserCheckout">
<Grid BorderBrush="Transparent" Background="White" Padding="5" Margin="0,5,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="Center" Margin="0,0,10,0">
<TextBlock FontSize="14" Text="{x:Bind CheckoutDate}" Foreground="#979797" />
<TextBlock FontSize="14" Text="{x:Bind CheckoutTime}" Foreground="#979797" />
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind CheckoutSum}" FontSize="22" FontWeight="Bold" />
<Image Source="/Assets/TengeIcon.png" Width="20" Margin="5,0,0,0"/>
</StackPanel>
<TextBlock Text="{x:Bind CheckoutTitle}" TextAlignment="Center" />
</StackPanel>
</Grid>
</DataTemplate>
You already have the Grid.Column property set correctly for the inner StackPanels. It seems you were attempting to use a Grid there before.

UWP reference control outside of data template

I'm trying to create a listview that has column headers and the lists fields mimics the width of its corresponding header. No bindings fail but the textblocks width in the data template don't match up with their headers width. I'm guessing because the data template can't find the element. Any ideas to get this to work?
<Grid Grid.Column="1" Grid.Row="1" x:Name="listViewHeaders" Height="50" VerticalAlignment="Top" Margin="10,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!--<controls:CustomGridSplitter/>-->
<TextBlock x:Name="nameHeader" Grid.Column="0" Text="Name" />
<TextBlock x:Name="typeHeader" Grid.Column="1" Text="Type" />
<TextBlock x:Name="colorHeader" Grid.Column="2" Text="Color" />
</Grid>
<ListView x:Name="ListView" Grid.Row="1" Grid.Column="1" Background="#FF494949" Margin="10,50,10,0" ItemsSource="{Binding CurrentCardList}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="{Binding ActualWidth, ElementName=ListView}">
<!--<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>-->
<StackPanel Orientation="Horizontal">
<TextBlock Grid.Column="0" Width="{Binding ActualWidth, ElementName=nameHeader}" Text="{Binding Name}" />
<TextBlock Grid.Column="1" Width="{Binding ActualWidth, ElementName=typeHeader}" Text="{Binding Type}" />
<TextBlock Grid.Column="2" Width="{Binding ActualWidth, ElementName=colorHeader}" Text="{Binding Color}" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
The bindings work fine. But you're assuming that TextBlock elements in the header row will fill out the entire table cell, which they won't. They only fill as much space as much text they contain. In your case that's about 30px. You can find this information by using the Live Visual Tree feature of VS 2015.
You can solve the problem by wrapping the header TextBlock elements in another element that will fill out all available space, such as Border. Here's the solution:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="listViewHeaders" Height="50" VerticalAlignment="Top" Margin="10,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!--<controls:CustomGridSplitter/>-->
<Border Background="Blue" HorizontalAlignment="Stretch" Grid.Column="0" x:Name="nameHeader">
<TextBlock Text="Name" />
</Border>
<Border Background="Red" x:Name="typeHeader" Grid.Column="1">
<TextBlock Text="Type" HorizontalAlignment="Stretch" />
</Border>
<Border Background="Yellow" x:Name="colorHeader" Grid.Column="2">
<TextBlock Text="Color" HorizontalAlignment="Stretch" />
</Border>
</Grid>
<ListView x:Name="ListView" Background="#FF494949" Margin="10,50,10,0" ItemsSource="{Binding CurrentCardList}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="{Binding ActualWidth, ElementName=ListView}">
<!--<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>-->
<StackPanel Orientation="Horizontal">
<TextBlock Grid.Column="0" Width="{Binding ActualWidth, ElementName=nameHeader}" Text="{Binding Name}" />
<TextBlock Grid.Column="1" Width="{Binding ActualWidth, ElementName=typeHeader}" Text="{Binding Type}" />
<TextBlock Grid.Column="2" Width="{Binding ActualWidth, ElementName=colorHeader}" Text="{Binding Color}" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>
This will create the following effect, which I believe is what you're after.
Here's the link to the complete solution - http://1drv.ms/1eUzLHl

Universal App ListView Item HorizontalAlignment

I would like to create a ListView that has right aligned items as well as left aligned. So far in all my attempts with DataTemplates and ItemContainerStyles, I am not able to get this working. The left alignment works fine as that is the default, but I cannot figure out how to get some items right-aligned. For example, this would be similar to a chat/conversation type view like the Windows Phone Messaging app.
My current XAML looks like this:
<Page
x:Class="MDControl.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MDControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource x:Name="Messages" Source="{Binding mMessages}"/>
<DataTemplate x:Key="SentMessageTemplate">
<StackPanel Padding="10" Margin="5" Background="Teal" HorizontalAlignment="Right" Width="Auto">
<TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap" Foreground="White"/>
<TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap" Foreground="White" />
<TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" Foreground="White" FontStyle="Italic" FontSize="12"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="ReceivedMessageTemplate">
<StackPanel Padding="10" Margin="5" Background="LightGray">
<TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap"/>
<TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" TextAlignment="Right" FontStyle="Italic" FontSize="12"/>
</StackPanel>
</DataTemplate>
<Style TargetType="ListViewItem" x:Key="SentMessageStyle">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
<Style TargetType="ListViewItem" x:Key="ReceivedMessageStyle">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
<local:MessageListTemplateSelector x:Key="MessageListTemplateSelector"
SentMessageTemplate="{StaticResource SentMessageTemplate}"
ReceivedMessageTemplate="{StaticResource ReceivedMessageTemplate}">
</local:MessageListTemplateSelector>
<local:MessageListContainerStyleSelector x:Key="MessageListContainerStyleSelector"
SentMessageStyle="{StaticResource SentMessageStyle}"
ReceivedMessageStyle="{StaticResource ReceivedMessageStyle}">
</local:MessageListContainerStyleSelector>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView x:Name="messageList" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemContainerStyleSelector="{StaticResource MessageListContainerStyleSelector}" ItemsSource="{Binding Source={StaticResource Messages}}" ItemTemplateSelector="{StaticResource MessageListTemplateSelector}" Margin="10,120,10,50" VerticalAlignment="Bottom" IsDoubleTapEnabled="False"/>
</Grid>
What can I change to get the "Sent" messages to be right aligned? Currently they show up with a Teal background which I want, but they are still Left aligned instead of Right. I am a little new to XAML, so forgive me if I'm way off here.
UPDATE: Solution
Grids were the key, I ended up having to use multiple grids to achieve the correct right-alignment, in conjunction with an ItemContainerStyle setting the HorizontalContentAlignment.
<Page
x:Class="MDControl.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MDControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource x:Name="Messages" Source="{Binding mMessages}"/>
<DataTemplate x:Key="SentMessageTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="Auto" Grid.Row="1" Margin="5" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Padding="10" Background="Teal">
<TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap" Foreground="White" />
<TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap" Foreground="White" />
<TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" Foreground="White" FontStyle="Italic" FontSize="12" HorizontalAlignment="Right"/>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
<DataTemplate x:Key="ReceivedMessageTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="Auto" Grid.Row="1" Margin="5" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Padding="10" Background="LightGray">
<TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap" />
<TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap" />
<TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" FontStyle="Italic" FontSize="12" HorizontalAlignment="Right"/>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
<local:MessageListTemplateSelector x:Key="MessageListTemplateSelector"
SentMessageTemplate="{StaticResource SentMessageTemplate}"
ReceivedMessageTemplate="{StaticResource ReceivedMessageTemplate}">
</local:MessageListTemplateSelector>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView x:Name="messageList" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemsSource="{Binding Source={StaticResource Messages}}" ItemTemplateSelector="{StaticResource MessageListTemplateSelector}" Margin="10,120,10,50" VerticalAlignment="Bottom" IsDoubleTapEnabled="False">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>
The problem is in your DataTemplates , not in styles or etc.You must use Grid instead of Stackpanel in your DataTemplate to achieve that.
Stackpanels won't stretch to parent.They'll only get the width / height of all controls inside it.Try something like
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
You should use HorizontalAlignment property which defines the position of the element inside a parent element.<Grid x:Name="simpleGrid" height = 50 width = 100 HorizontalAlignment="right" />

Windows 8 XAML ListView with Header and Item Template columns should have same dynamic width

I am using a Listview with an Itemtemplate and a Headertemplate.
Both templates contain 6 Columns. Everything is ok if i set a fixed column width for the templates - like in figure one.
But i want to set the width to "Auto" for the items - but then i get figure 2...
How to handle this?
Is it possible to set the Header Column width with c#? - or any other solution?
Figure 1:
Figure 2:
Code Listview:
<ListView x:Name="DayanalyseListView"
HorizontalAlignment="Center"
VerticalAlignment="Top"
ItemTemplate="{StaticResource DataTemplate}"
HeaderTemplate="{StaticResource HeaderTemplate}">
</ListView>
Headertemplate:
<DataTemplate x:Key="HeaderTemplate" >
<Grid Height="36" Background="DarkGray" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="95"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="*" MinWidth="900"/>
</Grid.ColumnDefinitions>
<TextBlock x:Uid="DayProject" TextWrapping="Wrap" Text="Project" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
<TextBlock x:Uid="DayTask" TextWrapping="Wrap" Text="Task" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
<TextBlock x:Uid="DayFrom" TextWrapping="Wrap" Text="From" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
<TextBlock x:Uid="DayTill" TextWrapping="Wrap" Text="Till" Grid.Column="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
<TextBlock x:Uid="DaySum" TextWrapping="Wrap" Text="Sum" Grid.Column="4" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
<TextBlock x:Uid="DayNote" TextWrapping="Wrap" Text="Note" Grid.Column="5" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
</Grid>
</DataTemplate>
Itemtemplate:
<DataTemplate x:Key="DataTemplate">
<Grid d:DesignHeight="50" Margin="0,5,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="95"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding ProjectName}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="0" ToolTipService.ToolTip="{Binding ProjectName}"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding TaskName}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="1" ToolTipService.ToolTip="{Binding TaskName}"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding StartTimeString}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="2"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding StopTimeString}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="3"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding Sum}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="4"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding Note}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" ToolTipService.ToolTip="{Binding Note}" Grid.Column="5"/>
</Grid>
</DataTemplate>
The following works perfectly in my case:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid x:Name="ListViewHeaders" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Title Col 1" />
<TextBlock Grid.Column="1" Text="Title Col 2" />
<TextBlock Grid.Column="2" Text="Title Col 3" />
<TextBlock Grid.Column="3" Text="Title Col 4" />
<TextBlock Grid.Column="4" Text="Title Col 5" />
</Grid>
<ListView x:Name="myTable" Grid.Row="1" ItemsSource="{Binding SomeCollection}" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="{Binding ElementName=myTable, Path=ActualWidth}" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding ItemProperty1}" />
<TextBlock Grid.Column="1" Text="{Binding ItemProperty2}" />
<TextBlock Grid.Column="2" Text="{Binding ItemProperty3}" />
<TextBlock Grid.Column="3" Text="{Binding ItemProperty4}" />
<TextBlock Grid.Column="4" Text="{Binding ItemProperty5}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
ListView does not operate like a DataGrid. ListView only understands rows and doesn't understand columns. You can simulate columns like you are by using a Grid, but the important thing to understand is that the item and the header are two completely separate UI elements.
Meaning there is no easy to have the size of the columns in the item change the size of the columns in the header. Even if you were to name them, they are part of a template so the names won't be of any use (remember, there will be multiple items created).
I recommend you stay with fixed widths, use * widths or use an actual DataGrid control.
The following worked for me. The key was to set the HorizontalContentAlignment property to Stretch.
<ListView Grid.Row="6" Name="lvMembersSearchResults" Background="LightGray" ItemClick="lvMembersSearchResults_ItemClick" IsItemClickEnabled="True" Margin="5,5,5,5">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.Header>
<Style TargetType="ListViewHeaderItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListView.Header>
<ListView.HeaderTemplate>
<DataTemplate>
<Grid Height="30" Background="DarkGray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<TextBlock x:Uid="tbRank" TextWrapping="Wrap" Text="Rank" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
<TextBlock x:Uid="tbName" TextWrapping="Wrap" Text="Name" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
<TextBlock x:Uid="tbTaxId" TextWrapping="Wrap" Text="Tax ID" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
<TextBlock x:Uid="tbCommand" TextWrapping="Wrap" Text="Cmd" Grid.Column="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="30" Background="DarkBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="NoWrap" Text="{Binding Rank}" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" />
<TextBlock TextWrapping="NoWrap" Text="{Binding Name}" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18"/>
<TextBlock TextWrapping="NoWrap" Text="{Binding TaxId}" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18"/>
<TextBlock TextWrapping="NoWrap" Text="{Binding Command}" Grid.Column="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Adding a UserControl worked for me.
<ListView x:Name="listView" ItemsSource="{Binding SomeCollection}" >
<ListView.ItemTemplate>
<DataTemplate>
<UserControl Width="{Binding ElementName=listView, Path=ActualWidth}">
<Grid>
....
</Grid>
</UserControl>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>`
For stretching items to full ListView width try this:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Number}" />
<TextBlock Grid.Column="1" Text="{Binding Text}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can try to create your own UserControl with properties that calculates width for each column and bind to this properties in template. May be this help.