Develop Reference

ColumnDefinition in ListView DataTemplate does not expand to full width

I'm creating a ListView with DataTemplate is a only text and a button. I want the button to be right most side and text is to left most side. However I noticed that it seems like my Grid.ColumnDefinitions not take all the space of the ListViewItem (Or I thought so). I want them to expand to full width.
<ListView Padding="5" x:Name="RecipeList" FontSize="15">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Grid.Column="0"/>
<Button Grid.Column="1">Delete</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

The default content alignment for a ListViewItem (the container of the content which is defined by your data template) is Left, so the Grid will only take as much space as it needs, but does not scale to the available width. Change it to Stretch is an item container style instead.
<ListView Padding="5" x:Name="RecipeList" FontSize="15">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Grid.Column="0"/>
<Button Grid.Column="1">Delete</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Your columns are defined that the TextBlock and the Button take equal proportions in the grid. If you want to align the Button to the right and the TextBlock to take the remaining space, set the Width of the second column to Auto. Then the Button only uses as much space as it needs.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Grid.Column="0"/>
<Button Grid.Column="1">Delete</Button>
</Grid>

UWP Stretch GridView

How to stretch GridViewItem horizontaly? Trying to set property HorizontalContentAlignment or style property in ItemContainerStyle. This does not help.
Here is a code:
<GridView ItemsSource="{x:Bind Banks}" SelectionMode="None" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemTemplate>
<DataTemplate x:DataType="model:Bank">
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}" Grid.Column="0" />
<GridView ItemsSource="{x:Bind Departments}" Grid.Row="1" HorizontalContentAlignment="Stretch" IsItemClickEnabled="True" VerticalContentAlignment="Stretch">
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemTemplate>
<DataTemplate x:DataType="model:Department">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}" Grid.Column="0" />
<TextBlock Text="{Binding Address}" Grid.Column="0" Grid.Row="1" />
<TextBlock Text="{Binding USD.Date}" Grid.Column="1" Grid.RowSpan="2"/>
<TextBlock Text="{Binding USD.Sell}" Grid.Column="2" />
<TextBlock Text="{Binding USD.Buy}" Grid.Column="2" Grid.Row="1"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>

By default,GridView uses ItemsWrapGrid as the panel to position and arrange GridViewItem, you can find this from Live Visual Tree:
Although you've set HorizontalContentAlignment or HorizontalAlignment to Stretch for GridViewItem, but the size of GridViewItem is limited by ItemsWrapGrid.
ItemsWrapGrid positions child elements sequentially from left to right or top to bottom in an ItemsControl that shows multiple items. When elements extend beyond the container edge, elements are positioned in the next row or column.
So in ItemsWrapGrid, items won't be stretched.
If you want to stretch GridViewItem horizontaly, we can use ItemsStackPanel instead of ItemsWrapGrid like following:
In Resources, add a ItemsPanelTemplate with ItemsStackPanel:
<Page.Resources>
<ItemsPanelTemplate x:Key="MyItemsPanelTemplate">
<ItemsStackPanel />
</ItemsPanelTemplate>
</Page.Resources>
Then use this template in GridView:
<GridView HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
ItemsPanel="{StaticResource MyItemsPanelTemplate}"
ItemsSource="{x:Bind Banks}"
SelectionMode="None">
...
<GridView Grid.Row="1"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
IsItemClickEnabled="True"
ItemsPanel="{StaticResource MyItemsPanelTemplate}"
ItemsSource="{x:Bind Departments}">
...
</GridView>
...
</GridView>
Or we can use ListView instead of GridView as ListView's default ItemsPanel is ItemsStackPanel.

Spacing between ListItems on Horizontal Stackpanel

How do I control the amount of space between items coming from the Biding 'Shorthand'? At the moment I have gaps between which seem to be dependent on the size of the value of 'Shorthand' itself (so if the value is 1 character the gap between it and the next value is bigger compared to if the value is 2 characters long).
I have tried putting the margin and padding to zero in various places to no avail.
<ListView ItemsSource="{Binding Rounds}" IsItemClickEnabled="False" ItemClick="ItemView_ItemClick" ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<ListView.ItemTemplate>
<DataTemplate >
<StackPanel>
<TextBlock Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}">
<Run Text="Round "/>
<Run Text="{Binding RoundNumber}" />
</TextBlock>
<ListView ItemsSource="{Binding Formations}" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Shorthand}" Style="{ThemeResource ListViewItemTextBlockStyle}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

I'm not sure where in the Template the margin/padding is set. As a workaround you may try to set a negative Margin to your ItemContainerStyle:
<ListView Name="myList">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="0,0,0,-20" />
</Style>
</ListView.ItemContainerStyle>
// rest of the code

The first occurrence of ItemView of ListView is defined inline. So when ItemSource is set, the ItemTemplate is applied to EVERY item.
ListView.ItemTemplate encompassing Binding Shorthand. Place it in a Grid and define Grid.ColumnDefinitions to Width="Auto" or "*" for DataTemplate.
The StackPanel may help position it better. You will have to adjust Grid defs to your display requirements needed.
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Shorthand}" Style="{ThemeResource ListViewItemTextBlockStyle}" />
</StackPanel>
</Grid>
</DataTemplate>

ListViewItem is not expanding to the width of the page

I am defining a ListView like this:
<DataTemplate x:Key="LibraryItemTemplate">
<Grid Height="191"
UseLayoutRounding="True">
<Grid.Background>
<ImageBrush Stretch="Fill"
ImageSource="Assets/BookShelf.jpg" />
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid x:Name="gridTitle"
Background="{Binding Text, Converter={StaticResource LibraryItemBackgroundConverter}, ElementName=tbTitle}"
Margin="6,4,6,13">
<TextBlock x:Name="tbTitle"
TextWrapping="Wrap"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5"
Width="100"
Margin="0,0,0,0.2"
TextAlignment="Center"
FontSize="24"
FontWeight="Bold"
UseLayoutRounding="False"
d:LayoutRounding="Auto">
<TextBlock.RenderTransform>
<CompositeTransform Rotation="-90" />
</TextBlock.RenderTransform>
<Run Text="{Binding Title}" />
</TextBlock>
</Grid>
<Grid x:Name="gridBooks"
Grid.Column="1"
Margin="0">
<GridView x:Name="booksGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
ItemsSource="{Binding Items}"
ItemTemplateSelector="{StaticResource textbookTemplateSelector}"
SelectionMode="Multiple"
IsItemClickEnabled="True"
ItemClick="booksGridView_ItemClick"
SelectionChanged="booksGridView_SelectionChanged"
IsSwipeEnabled="false"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
</Grid>
</DataTemplate>
<Grid Grid.Row="1"
Margin="80,0,12,0">
<ListView x:Name="libraryListView"
AutomationProperties.AutomationId="VideoListView"
AutomationProperties.Name="Videos"
TabIndex="1"
Padding="0,0,4,0"
ItemsSource="{Binding}"
IsSwipeEnabled="False"
SelectionChanged="LibraryListView_SelectionChanged"
ItemTemplate="{StaticResource LibraryItemTemplate}"
ItemContainerStyle="{StaticResource LibraryListViewItemStyle}">
</ListView>
</Grid>
The problem I am having is that each ListViewItem has different width, based on the number of elements in the GridView.
How can I force each ListViewItem to use the maximum width of the screen (so that the "Assets/BookShelf.jpg" will be the same for each of the ListViewItems).
Please see the attached image to better demonstrate my problem.
Thanks

To give you the best answer I would need a dummy screenshot of the expected layout, but it sound like you want the right column to stretch, which would be accomplished by setting its width to star (*) instead of Auto (which takes up only the space needed).
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" /> <!-- ONLY TAKE UP SPACE NEEDED -->
<ColumnDefinition Width="*" /> <!-- TAKE UP ALL AVAILABLE SPACE -->
</Grid.ColumnDefinitions>

The answer is with this code:
<ListView ..>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalAlignment" Value="Strech" />
.
.
.
.
<Setter Property="HorizontalContentAlignment" Value="Strech" />
</Style>
</ListView.ItemContainerStyle>
...
</ListView>
In this code we set the ItemContainerStyle: HorizontalAlignment = "Strech" and HorizontalContentAlignment = "Strech" and it made the trick.

Text wrapping inside StackPanel (WP7)

I'd like to wrap text contained in three TextBlocks inside a StackPanel without writing TextWrapping="Wrap" for each TextBlock (sometimes there may be more of those):
<ListBox ItemsSource="{Binding Places}" SelectedItem="{Binding SelectedPlace, Mode=TwoWay}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name, Mode=OneWay}" TextWrapping="Wrap" />
<TextBlock Text="{Binding Path=Distance, Mode=OneWay}" TextWrapping="Wrap" />
<TextBlock Text="{Binding Path=Description, Mode=OneWay}" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So if I dynamically add another TextBlock it should wrap automatically (I don't want to do it inside my code-behind file)
In other words - I'd like to write style that would be automatically applied. In CSS it would be something like that:
listbox textblock {
word-wrap:break-word;
}
UPDATE
This contains my ListBox:
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Grid.Column="0" Margin="12,0,12,0">
<views:ListItem Margin="12,6,0,0" />
</Grid>
</Grid>

Did you try adding a style for TextBlock? I.e.
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
</StackPanel.Resources>
...
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>

Unless you specify a Width constraint for the TextBlock, it will not wrap its text content. As the StackPanel does not resize its contents, it will never pass any Width constraints to the TextBlocks inside and so they will never wrap. Setting the TextWrapping property to Wrap is not enough to make the text content wrap, so applying a Style with this property set will not do what you want.