I want something like this:
image
And I try to use ListBox:
<ListBox Name="lapsListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Grid.Column="2" Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding number}" />
<TextBlock Grid.Column="1" Text="{Binding time}" HorizontalAlignment="Right" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
But I can't align elements. How can I do it by another way?
Try this:
<ListBox Name="lapsListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding number}" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Text="{Binding time}" HorizontalAlignment="Right" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Remove the Grid.Column="2" from the Grid.
Place HorizontalAlignment of Left in the first column Textblock
I modified the Widths of the Columns to be "50%" each.
Related
I have an incredible annoying problem with accordion content template.
It shows perfectly, no problem with databinding or something else, but when i resize the browser window the tabControl inside the detail of the accordion doesn't resize at all.
It seems like the width is fixed but acctually it's not.
When the listbox has to change data because of the databinding, the tabcontrol resize perfectly to the new browser window size. Any suggestions please?
My code is:
<layoutToolkit:Accordion.ContentTemplate>
<DataTemplate>
<!--#Sinergia Wave2-->
<Grid>
<sdk:TabControl Grid.Row="1" Grid.ColumnSpan="4" Loaded="ListBox_Loaded" SizeChanged="ListaDetailControlli_SizeChanged">
<sdk:TabItem Header="Controlli">
<Grid Visibility="{Binding HasItems, Converter={StaticResource ConvertBooleanToVisible}}">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="300" />
<!--Colonna del semaforo -->
<ColumnDefinition Width="44" />
<ColumnDefinition Width="300*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.ColumnSpan="4" Orientation="Horizontal">
<Grid SizeChanged="Grid_SizeChanged" Background="#FFC1C1C1" Height="25">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="300" />
<!--Colonna del semaforo -->
<ColumnDefinition Width="44" />
<ColumnDefinition Width="300*" />
</Grid.ColumnDefinitions>
<dataInput:Label Grid.Column="1" FontSize="12" FontWeight="Bold" Content="Controllo" HorizontalAlignment="Left" VerticalAlignment="Center" />
<dataInput:Label Grid.Column="3" FontSize="12" FontWeight="Bold" Content="Dettagli" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</StackPanel>
<ListBox Name="ListaDetailControlli" BorderThickness="0" Grid.Row="1" Grid.ColumnSpan="4" ItemsSource="{Binding ListaControlli}" SelectionMode="Single"
SelectedItem="{Binding SelectedTask, Mode=TwoWay}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="22" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="44" />
<ColumnDefinition Width="300*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" FontSize="10" Margin="2,0,4,0" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Left"
Text="{Binding DescrizioneControllo}" />
<Canvas Grid.Column="1"
Width="22"
Height="22"
Margin="0,0,4,0">
<Image Source="/Image/Traffic-no-light.png"
Width="22"
Height="22"
Margin="0,0,4,0" />
<Ellipse Canvas.Left="7"
Canvas.Top="2"
Width="8"
Height="8"
Fill="{Binding ColoreControllo}" />
<Ellipse Canvas.Left="7"
Canvas.Top="11"
Width="8"
Height="8"
Fill="{Binding ColoreControllo}" />
</Canvas>
<!-- #135162;dv;; Pannello Controlli -->
<TextBlock Grid.Column="2" FontSize="10" Margin="2,0,4,0" TextAlignment="Left" Text="{Binding DettaglioControllo}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</sdk:TabItem>
<sdk:TabItem Header="Task" GotFocus="TabTask_GotFocus">
<Grid VerticalAlignment="Stretch">
<Border BorderThickness="0" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Foreground="Red" FontSize="18" FontWeight="Bold" Text="Non è presente nessun task per il giorno selezionato" TextWrapping="Wrap"
Visibility="{Binding Path=HasTask, Converter={StaticResource ConvertBooleanToVisibleNegato}}" />
</Border>
<ScrollViewer BorderThickness="0" Visibility="{Binding Path=HasTask, Converter={StaticResource ConvertBooleanToVisible}}">
<ListBox x:Name="ListaTask" BorderThickness="0" Tag="{Binding ID_SERBATOIO}" MinWidth="250" Margin="-2,-1,-2,0" HorizontalAlignment="Stretch"
ItemContainerStyle="{StaticResource CheckBoxItemContainerStyleWithStatusDiari}" ItemsSource="{Binding ListaTask}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0">
<StackPanel>
<Border x:Name="BorderDrop" Height="20" Margin="8,0,0,0" Background="Gray" BorderThickness="4" Canvas.ZIndex="-2" CornerRadius="9"
Opacity="0.8" Padding="0" Visibility="Collapsed">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0.2" Color="Black" />
<GradientStop Offset="0.8" Color="#FFCDCCCC" />
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
<controlsLIB:TaskMultiTemp DataContext="{Binding }" PannelloOspitante="{Binding LayoutOspitante,ElementName=panValidazioneOperatori,
Mode=OneWay}"
TemplateTipo="{Binding TemplateMultiTemp,ElementName=panValidazioneOperatori,Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
</sdk:TabItem>
</sdk:TabControl>
</Grid>
</DataTemplate>
I have three columns. I setup header of ListView to display data - its work correct. I similarly setup ListView ItemTemplate but it incorrect displays data.
<Grid>
<ListView x:Name="listView" Grid.Column="0">
<ListView.HeaderTemplate>
<DataTemplate>
<Grid Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Блюдо" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" ></TextBlock>
<TextBlock Text="Цена" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" ></TextBlock>
<TextBlock Text="Количество" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" ></TextBlock>
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding bludo}" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontSize="18" ></TextBlock>
<TextBlock Text="{Binding tsena}" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontSize="18" ></TextBlock>
<TextBlock Text="{Binding kol}" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontSize="18" ></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
The problem here is that in ListViewItem, it's HorizontalContentAlignment property is set to Left by default. This property indicates the horizontal alignment of the control's content. When it is set to Left, the ListViewItem's content i.e the Grid in your DataTemplate will be left aligned. So the Gird won't take the whole width of the ListView and you will see the "strange" layout like your screenshot.
To see this clearly, we can check ListViewItem styles and templates, in its default style, we can see
<Setter Property="HorizontalContentAlignment" Value="Left"/>
To fix this issue, we can set the HorizontalContentAlignment property to Stretch like:
<ListView x:Name="listView" Grid.Column="0">
<ListView.HeaderTemplate>
<DataTemplate>
<Grid Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" FontWeight="Bold" Text="Блюдо" />
<TextBlock Grid.Column="1" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" FontWeight="Bold" Text="Цена" />
<TextBlock Grid.Column="2" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" FontWeight="Bold" Text="Количество" />
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<!-- Add this in your code -->
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" Text="{Binding bludo}" />
<TextBlock Grid.Column="1" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" Text="{Binding tsena}" />
<TextBlock Grid.Column="2" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" Text="{Binding kol}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
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
I'm having trouble with what seems to be a weird issue with a listview in xaml for Windows 8.1. I'm using the Hub sample template that comes with VS 2013 Preview on Windows 8.1. For whatever reason, the first entry in the listview does not show up. I'm binding the listview with the sample JSON data provided in the app. It doesn't make a difference whether I bind to the sample data or to my own data in a sqlite db file either. I'd post a picture, but I dont have enough reputation on stackoverflow just yet... The intent is to represent data in a table with columns. Everything in the xaml works except that it hides the first entry in the listview...
Here's the code.
<Grid x:Name="TransactionGrid" Grid.Column="1" Grid.Row="1"
Background="{ThemeResource AppBarItemBackgroundThemeBrush}"
DataContext="{Binding Group}"
d:DataContext="{Binding Groups[0], Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid x:Name="TransactionHeader" Margin="0,0,0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="1.5*"/>
<ColumnDefinition Width="1.25*"/>
<ColumnDefinition Width="1.75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".25*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="Date"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Center" Margin="0,0,0,5"/>
<TextBlock Grid.Column="1"
Text="Payee"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Left" Margin="0,0,0,5"/>
<TextBlock Grid.Column="2"
Text="Category"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Left" Margin="0,0,0,5"/>
<TextBlock Grid.Column="3"
Text="Description"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Left" Margin="0,0,0,5"/>
<TextBlock Grid.Column="4"
Text="Amount"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Right" Margin="0,0,0,5"/>
<TextBlock Grid.Column="5"
Text="Balance"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Right" Margin="0,0,0,5"/>
</Grid>
<ListView x:Name="TransactionListview"
Grid.Row="1"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
IsSynchronizedWithCurrentItem="False" IsItemClickEnabled="True">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="{Binding ElementName=TransactionListview, Path=ActualWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="1.5*"/>
<ColumnDefinition Width="1.25*"/>
<ColumnDefinition Width="1.75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".25*"/>
</Grid.ColumnDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"
Width="Auto"
Height="40"
Grid.ColumnSpan="7" />
<TextBlock Grid.Column="0"
Text="{Binding Title}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin = "1,0,0,0"
FontSize="17" />
<TextBlock Grid.Column="1"
Text="{Binding Subtitle}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="17"/>
<TextBlock Grid.Column="2"
Text="{Binding ImagePath}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="17"/>
<TextBlock Grid.Column="3"
Text="{Binding Description}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin = "0,0,20,0"
FontSize="17"/>
<TextBlock Grid.Column="4"
Text="{Binding Title}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
FontSize="17"/>
<TextBlock Grid.Column="5"
Text="{Binding Title}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
FontSize="17"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
This was cross-posted to MSDN forum where product team is answering:
http://social.msdn.microsoft.com/Forums/windowsapps/en-US/8b9f3365-97d5-4405-a677-7b8638a32312/xaml-listview-in-win-81-not-showing-first-entry
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.