UWP reference control outside of data template - xaml

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

Related

Silverlight Accordion doesn't resize

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>

Listview incorrect displays columns

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>

Windows phone 8.1 Textblock width to Fill

I want to create the layout as shown in the following image's first section.
But with the code attached, I can only get the layout output as show in the bottom section of the image attached.
<ListView Grid.Row="1"
ItemsSource="{Binding Items}"
Margin="0,20,0,0">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="NoWrap"
TextTrimming="WordEllipsis"
Grid.Column="0"
Text="{Binding Name}"
Style="{ThemeResource ListViewItemTextBlockStyle}" />
<Image Grid.Column="1"
Source="image.png"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You don't need the StackPanel in the DataTemplate - the Grid you have is enough for this.
Also, in order to get the items to stretch, define a simple ListView.ItemContainerStyle in your ListView:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
So, full code:
<ListView Grid.Row="1"
ItemsSource="{Binding Items}"
Margin="0,20,0,0">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="NoWrap"
TextTrimming="WordEllipsis"
Grid.Column="0"
Text="{Binding Name}"
Style="{ThemeResource ListViewItemTextBlockStyle}" />
<Image Grid.Column="1"
Source="image.png"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
Try it
<ColumnDefinition Width="100" />
instead of Width="*"

ListView first item missing when binding width

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

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.