ListViewItem won't stretch to the width of a ListView - windows-8

I'm currently designing a windows 8 store app using XAML but I have a minor sizing issue. I have a ListView with a DataTemple.
The code for my ListView & DataTemplate are below:
<ListView x:Name="listPageItems"
Grid.Row="1"
SelectionMode="Extended"
IsSwipeEnabled="False"
ItemsSource="{Binding Mode=OneWay, Source={StaticResource items}}"
ItemTemplate="{StaticResource NavigationItemTemplate}"
ScrollViewer.VerticalScrollBarVisibility="Visible">
</ListView>
<DataTemplate x:Key="NavigationItemTemplate">
<Grid Height="75">
<Grid.RowDefinitions>
<RowDefinition Height="1.6*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Fill="White" />
<Rectangle Fill="{StaticResource SSEGreenBrush}"
Grid.Row="1" />
<Border BorderThickness="2"
BorderBrush="{StaticResource SSEGreenBrush}"
Grid.RowSpan="2" />
<TextBlock x:Name="textTitle"
Text="{Binding ClientName}"
Style="{StaticResource TitleTextStyle}"
Foreground="{StaticResource SSEBlueBrush}"
Margin="10,5,5,5" />
<StackPanel Orientation="Horizontal"
Grid.Row="1"
HorizontalAlignment="Stretch">
<TextBlock Text="Last Edit :"
Style="{StaticResource SubtitleTextStyle}"
Foreground="{StaticResource SSEBlueBrush}"
Margin="3,0,0,3"
VerticalAlignment="Center" />
<TextBlock Text="SurveyDate"
Style="{StaticResource SubtitleTextStyle}"
Foreground="{StaticResource SSEBlueBrush}"
Margin="3,0,0,3"
VerticalAlignment="Center" />
</StackPanel>
</Grid>
</DataTemplate>
The listview is within a grid column with a fixed width of 240.
When the view is displayed the ListViewItems don't stretch to the width of the ListView. I've tried setting numerous properties including the HorizontalContentAlignment but I can't seem to get the ListViewItem to stretch!
Can anybody help?
I'm using Visual studio 2012, C# 4.5 and developing a Windows store app.

Try adding the following to your ListView definition
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>

The easiest thing to do is just adding HorizontalContentAlignment="Stretch" to the ListView. There normally is no need for anything more.

Related

UWP ListView with no scrolling

For some reason, scrolling simply doesn't work on this ListView, and I really don't know why. The items display properly, just the list isn't scrollable. Using grids isn't viable (from what I know, anyway) since the items that are set to appear are pulled from a web source (don't know how many there will be, nor am I very willing to use hacky methods to get a scrollable list).
<Page
x:Class="Hello_World.News_Feed"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Hello_World"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">
<ListView x:Name="NewsFeedList" x:FieldModifier="public"
Padding="15,15,15,15"
FontFamily="Segoe UI Variable Display"
SelectionMode="None"
VerticalAlignment="Top"
Margin="10,0,0,0">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0, 10, 0, 10"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Frame
BorderThickness="1"
Padding="10,10,10,10"
CornerRadius="5"
Height="Auto">
<Frame.BorderBrush>
<SolidColorBrush Color="Gray" Opacity="0.2" />
</Frame.BorderBrush>
<Frame.Background>
<SolidColorBrush Color="Gray" Opacity="0.05" />
</Frame.Background>
<Grid>
<Grid Padding="0,5,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Margin="3,3,0,0" CornerRadius="100" Height="50" Width="50" VerticalAlignment="Top">
<Border.Background>
<ImageBrush Stretch="Fill" ImageSource="{Binding AuthorPicture}"/>
</Border.Background>
</Border>
<TextBlock x:Name="Author" Margin="15,5,0,0" Height="Auto" Grid.Column="1" FontSize="17" FontFamily="Segoe UI Variable Text" FontWeight="Semibold" Text="{Binding Author}" TextWrapping="WrapWholeWords">
<TextBlock.Foreground>
<SolidColorBrush>#353535</SolidColorBrush>
</TextBlock.Foreground>
</TextBlock>
<TextBlock x:Name="Time" Margin="15,28,0,0" Height="Auto" Grid.Column="1" FontSize="15" FontFamily="Segoe UI Variable Text" FontWeight="Normal" Text="{Binding Time}" TextWrapping="WrapWholeWords">
<TextBlock.Foreground>
<SolidColorBrush>#656565</SolidColorBrush>
</TextBlock.Foreground>
</TextBlock>
</Grid>
<Grid Padding="10,5,10,10">
<TextBlock x:Name="Heading" Margin="0,70,0,0" Height="Auto" Grid.Column="1" FontSize="18" FontFamily="Segoe UI Variable Text" FontWeight="Semibold" Text="{Binding Title}" TextWrapping="WrapWholeWords"/>
<TextBlock x:Name="Body" Margin="0,100,0,0" Height="Auto" Grid.Column="1" FontFamily="Segoe UI Variable Text" FontWeight="Normal" Text="{Binding Body}" TextWrapping="WrapWholeWords"/>
</Grid>
</Grid>
</Frame>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Page>
Even after conducting some research online, I couldn't find a solution to this annoying issue. Any ideas?
After conducting more tests, I finally found that it was the automatic height of the frame which I call NavigateTo on which causes this issue. Manually setting the height fixes the problem, but the problem with is I want the size to be dynamic but also know when content stops fitting on the screen. What could I do about that?
Edit: Fixed this - realised the frame was under a StackPanel (forgot that they break auto height/width).

Adaptive rendering of ListView items for UWP app

I'm writing a UWP app and have several areas where searches are performed and results are rendered in a ListView where the ItemTemplate is defined inside a DataTemplate. Nothing fancy is going on here - just returns a list of items in a single "column", if you will.
There are three supported screen states (or widths), 320, 640, and 1024. I'd like to render these search results in two "columns" when the screen state is 640 or 1024 (wide states).
I'd like to use adaptive triggers for this task, but I'm at a loss of how to do this intelligently. There are examples of creating different views for each device family, but they seem too dependent on checking the device family. Best practices dictate using screen width thresholds instead. Either way, it seems this could easily be accomplished using adaptive triggers.
Any insight or examples of where this is done would be appreciated. The code is included to provide more context and to act as my starting point.
<Page.Resources>
<ResourceDictionary>
<Style x:Key="TextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource LargeTextBlockStyle}">
<Setter Property="Foreground" Value="{StaticResource TitleBrush}" />
</Style>
<DataTemplate x:Key="SearchResult">
<StackPanel Width="{Binding ActualWidth, ElementName=Parent}">
<Border Background="Gray" MinWidth="235">
<Grid Height="155">
<Image Source="{Binding SearchResultImage}"
Style="{StaticResource ImageStyle}" />
<Rectangle Fill="{StaticResource BackgroundBrush}" />
<StackPanel Margin="10,10,15,10" VerticalAlignment="Center">
<TextBlock Text="{Binding SearchResultName}"
Style="{StaticResource TextBlockStyle}"
VerticalAlignment="Center" />
</StackPanel>
</Grid>
</Border>
<Button Style="{StaticResource ButtonStyle}"
Command="{Binding ViewRecipeCommand, Source={StaticResource Locator}}"
CommandParameter="{Binding}">
<StackPanel Margin="0" Orientation="Horizontal" HorizontalAlignment="Center">
<SymbolIcon Symbol="Calendar" Margin="0,0,10,0" />
<TextBlock x:Uid="ViewRecipeCommandTextBlock"
Text="View Recipe"
Style="{StaticResource TextBlockStyle}" />
</StackPanel>
</Button>
</StackPanel>
</DataTemplate>
</ResourceDictionary>
</Page.Resources>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel x:Name="HeaderStackPanel" Grid.Row="0" Margin="10">
<TextBlock x:Uid="RecipesTitle" Text="All Recipes"
Style="{StaticResource TextBlockStyle}"
Margin="0,0,0,10" />
</StackPanel>
<ListView x:Name="ResultsListView" Grid.Row="2"
ItemsSource="{Binding AllRecipes}"
ItemTemplate="{StaticResource SearchResult}" />
</Grid>
What I'd do to use a GridView instead a ListView, and change the GridView's ItemsPanel based on the width changes.
By using a GridView with an item width as wide as the screen size (320) you can get it to behave like a ListView, and if the GridView get's wider the content will automatically produce two columns for you. The only thing not to forget is to change the default scrolling direction of the ItemsPanel from horizontal to vertical.

WrapPanel inside ListBox in UWP

I am looking to add WrapPanel inside my ListBox so that it's item wrap both vertically and horizentally. I was able to achieve this in Windows Phone 8 Sliverlight with Microsoft toolkit with below code;
Windows Phone 8
<ListBox x:Name="ListSection" ItemsSource="{Binding Section}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="20">
<Image Source="{Binding ImagePath}" Width="80" Height="80"></Image>
<TextBlock Style="{StaticResource PhoneTextBlockBase}"
HorizontalAlignment="Center"
Foreground="Black"
Text="{Binding Header}"
FontWeight="Bold"
VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
I understand that Microsoft toolkit it not available in UWP, is there any possibility I could achieve such behavior in UWP?
UWP not working
<ListBox x:Name="ItemsListBox" ItemsSource="{Binding Section}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding ImagePath}" Width="80" Height="80"></Image>
<TextBlock HorizontalAlignment="Center"
Foreground="Black"
Text="{Binding Header}"
FontWeight="Bold"
VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thanks!
You must use ListView and ItemsWrapGrid as ItemsPanel
you can check the MSDN docs here with examples
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemswrapgrid.aspx
This example is for GridView but is the same for ListView
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
you can use the property Orientation to set your items vertically or horizontally.
There is a port of the Toolkit's WrapPanel for UWP in the project WinRTXamlToolkit.
You can get it from NuGet.
Then in your Page add this prefix:
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
Now you can use <toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel> as it was before.
#ARH you need to create a custom Panel class which inherits panel class and override MeasureOverride and ArrangeOverride methods.check out following links for reference.
https://msdn.microsoft.com/en-us/library/windows/apps/mt228347.aspx
http://www.visuallylocated.com/post/2015/02/20/Creating-a-WrapPanel-for-your-Windows-Runtime-apps.aspx
The WrapPanel is available from the Microsoft UWP Toolkit.
Here's some sample code (using v5.0.0):
...
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
...
<ListView
Name="WrapPanelContainer"
Width="310" Height="200"
Margin="0,40,0,0"
HorizontalAlignment="Left"
Background="LightBlue"
IsItemClickEnabled="True"
>
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="MinWidth" Value="0"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</ListView.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel VerticalSpacing="10" HorizontalSpacing="10" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<Rectangle Fill="Red" Width="100" Height="50"/>
<Rectangle Fill="Blue" Width="200" Height="50"/>
<Rectangle Fill="Green" Width="50" Height="50"/>
<Rectangle Fill="Yellow" Width="150" Height="50"/>
</ListView>
NOTE: The ListItemView style here removes superfluous padding, allowing the WrapPanel spacing properties to be the control points for layout.

Different XAML Hub content aligment in design mode and in emulator

I have a StackPanel representing the top bar and a Hub representing books items. Both wrapped in the grid with two rows.
The problem is that in design mode hub content aligned properly to the top, just below my top bar. But in emulator it looks like all content aligned to the center of the hub.
In design time it looks like this:
But in emulator it looks like this:
Here is my XAML code:
<Page.Resources>
<DataTemplate x:Key="HubSectionHeaderTemplate">
<TextBlock Margin="0,0,0,-10" Text="{Binding}" FontSize="19" FontFamily="Open Sans" FontWeight="Light" FontStretch="ExtraExpanded" Foreground="#FF30323E">
<!--<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>-->
</TextBlock>
</DataTemplate>
<!-- Grid-appropriate item template as seen in section 2 -->
<DataTemplate x:Key="Standard200x180TileItemTemplate">
<Grid Margin="0,0,15,15" Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" VerticalAlignment="Top">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="165" Width="115"/>
<!--<TextBlock Text="{Binding Title}" VerticalAlignment="Bottom" Margin="9.5,0,0,6.5" Style="{ThemeResource BaseTextBlockStyle}"/>-->
</Grid>
</DataTemplate>
</Page.Resources>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="0,-25,0,0">
<StackPanel.Background>
<ImageBrush ImageSource="Assets/CatalogTopBar.png" Stretch="UniformToFill"/>
</StackPanel.Background>
<Button x:Name="searchButton" Margin="0,25,-30,0" Height="15" Width="10" Content="" HorizontalAlignment="Right" VerticalAlignment="Center" BorderThickness="0" >
<Button.Background>
<ImageBrush ImageSource="Assets/noun_23695_cc.png" Stretch="Uniform"/>
</Button.Background>
</Button>
</StackPanel>
<Hub x:Name="Hub" x:Uid="Hub" Grid.Row="1" Background="White" Margin="0,25,0,0" VerticalContentAlignment="Top" VerticalAlignment="Top">
<HubSection x:Uid="HubSection2" Header="Популярные книги" Width="Auto"
DataContext="{Binding Groups[0]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}" >
<DataTemplate>
<GridView
Margin="0,-10,0,0"
ItemsSource="{Binding Items}"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
ItemTemplate="{StaticResource Standard200x180TileItemTemplate}"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
</Page>
Ho-ho-ho... I finally managed to find the problem. After spending WEEKS!!! WEEKS, Carl! After spending few weeks I found out by accident that there is a MASSIVE "application name" <Hub.title> above my <Grid>.
It was not visible because of the white background and white font color of the text. By accidentally changing <RequestedTheme="Light"> I was finally able to see this text, because default font color changed to black. The text "application name" itself was not in my XAML source file, it was attached by localization facilities with x:Uid ="Hub" and corresponding value in resources.resw. After deleting x:Uid my layout returned to normal...

Windows phone Horizontal Listbox image center-lock

I have a ListBox with images as items, I need each image to take the full width of the screen, and to be center-locked (like ViewPager in android)
this is what I have so far:
<Grid x:Name="ContentPanel" Grid.Row="1" VerticalAlignment="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListBox Grid.Row="1" ItemsSource="{Binding Zones[0].listBannieres}" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding banniere}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
thank you.
SOLVED
<phone:PivotItem Header="Zone 1" Margin="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" VerticalAlignment="Bottom" >
<phone:Pivot ItemsSource="{Binding Zones[0].listBannieres}">
<phone:Pivot.HeaderTemplate>
<DataTemplate />
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemContainerStyle>
<Style TargetType="phone:PivotItem">
<Setter Property="Margin" Value="0"/>
</Style>
</phone:Pivot.ItemContainerStyle>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding banniere}"/>
</StackPanel>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
</StackPanel>
</Grid>
</phone:PivotItem>
I would recommend using Pivot as suggested in the comments or a Panorama control, if you place those inside another control, you can have them visible at the bottom only. Here is an example with pivot:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<phone:Pivot Grid.Row="1" ItemsSource="{Binding Images}" Margin="0">
<phone:Pivot.HeaderTemplate>
<DataTemplate></DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemContainerStyle>
<Style TargetType="phone:PivotItem">
<Setter Property="Margin" Value="0" />
</Style>
</phone:Pivot.ItemContainerStyle>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<Image Source="{Binding ImagePath}" Stretch="Fill" />
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
</Grid>
Here only the bottom part is scrolled to as you wanted. It will also "snap" to the images when scrolling, which I also think the Android viewpager does. :)
If you instead change Pivot to Panorama and PivotItem to PanoramaItem you can get another nice result, where you see a small part of the next image. Here is an image of the result:
Edit: To remove the margin and headers, make sure you set the HeaderTemplate to an empty one and the Margin on PivotItem to 0. See the updated code above.