GridView scroll in Metro application doesn't work - xaml

I trying to build a winRT metro application that use a GridView. I get the GridView and it looks like I want it to do. But the horizontal scroll doesn't work. When I drag the content it move but when I release it, it will return to start.
Anyone that know why it doesn't work?
<Page
x:Class="WR.Levels"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Wordy"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:uc="using:Wordy.UserControls"
mc:Ignorable="d">
<UserControl.Resources>
<CollectionViewSource x:Name="cvsLevels" IsSourceGrouped="True"/>
<CollectionViewSource x:Name="cvsCategories" IsSourceGrouped="True" ItemsPath="Levels"/>
</UserControl.Resources>
<Canvas x:Name="innertialCanvas"
Grid.Row="1"
Background="#FF3D6E4F"
>
<uc:BG HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="84"/>
<RowDefinition Height="700"/>
</Grid.RowDefinitions>
<StackPanel Margin="20,20,0,0" Grid.Row="0" Orientation="Horizontal">
<Button x:Name="backButton" Style="{StaticResource BackButtonStyle}" Margin="10" VerticalAlignment="Center" >Back</Button>
<TextBlock Name="appName" Text="WR" FontSize="48" VerticalAlignment="Center" />
</StackPanel>
<GridView ItemsSource="{Binding Source={StaticResource cvsCategories}}" Margin="0,0,0,0"
IsItemClickEnabled="True" SelectionMode="None" MaxHeight="700" Grid.Row="1"
AutomationProperties.AutomationId="LevelsGrid">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Width="150" Height="130" Margin="10" AutomationProperties.AutomationId="Level">
<StackPanel.Background>
<SolidColorBrush Color="White" Opacity="0.2" />
</StackPanel.Background>
<StackPanel Orientation="Horizontal" Margin="10">
<uc:Stars Height="50" Width="50" />
<uc:Stars Height="50" Width="50" />
</StackPanel>
<TextBlock Text="{Binding Name}" Margin="0,10,0,0" FontSize="24" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0">
<TextBlock Text='{Binding Name}'
Foreground="White" Margin="20"
Style="{StaticResource HeaderTextStyle}" AutomationProperties.AutomationId="LevelGroup"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.ContainerStyle>
<Style TargetType="GroupItem">
<Setter Property="Margin" Value="3,0"/>
</Style>
</GroupStyle.ContainerStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</Grid>
</Canvas>
</Page>

When I removed the canvas tag it worked!

Related

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.

Listiview Item not highlighting when hovering over - UWP (Windows 10)

I have a UserControl used as an item template in a ListView and when I hover a specific item it doesn't highlight it yet I have other ListViews in my project where the specific item is highlighted over.
I've removed the code from my UserControl and copy/pasted it directly in my DataTemplate to check if it was related to the fact that I was using a UserControl but no difference.
This ListView is contained in a SemanticZoom, so again I removed the SemanticZoom to check if the behaviour would change, but to no avail! Still doesn't get highlighted.
All my ListViews have their SelectionMode set to Single and I've got a style defined at the app level which is applied to all my ListViews
This is the code in my UserControl:
<UserControl
x:Class="MyApp.UserControls.ZoomedIn"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp.UserControls"
xmlns:converters="using:MyApp.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="470">
<UserControl.Resources>
<converters:WrapOnConverter x:Key="WrapOnConverter"/>
</UserControl.Resources>
<Grid x:Name="Details"
Background="White"
Grid.Column="0"
Grid.Row="0"
Margin="12,5,12,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image x:Name="Image"
Source="{Binding Image}"
Width="100"
Height="100"
Stretch="UniformToFill"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<Image x:Name="Image2"
Source="{Binding Image2}"
Width="30"
Height="30"
Margin="67,67,0,0"
Stretch="UniformToFill"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<Image x:Name="Image3"
Source="{Binding Image3}"
Width="30"
Height="30"
Margin="32,67,0,0"
Stretch="UniformToFill"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<StackPanel Margin="5,0,5,0"
Grid.Row="0"
Grid.Column="1"
VerticalAlignment="Top">
<TextBlock x:Name="Title"
Text="{Binding Title}"
Foreground="{ThemeResource
SystemControlForegroundAccentBrush}"
FontWeight="SemiBold"
VerticalAlignment="Top"
TextWrapping="{Binding
Converter={StaticResource WrapOnConverter}}" />
<TextBlock x:Name="Time"
Text="{Binding Time}"
Foreground="DarkCyan"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="0,5,0,5" />
<TextBlock x:Name="Description"
Text="{Binding Description}"
Foreground="Black"
TextWrapping="Wrap"
VerticalAlignment="Top"
HorizontalAlignment="Left"
MaxLines="2"/>
</StackPanel>
</Grid>
</UserControl>
And my ListView is defined as follows:
<ListView ItemsSource="{Binding Source={StaticResource cvsDetails}}"
SelectionMode="Single"
SelectedIndex="{Binding SelectedDetailIndex}"
SelectedItem="{Binding SelectedDetail, Mode=TwoWay}"
ItemContainerStyle="{StaticResource ListViewItemStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<usercontrols:ZoomedIn DataContext="{Binding}" />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock FontSize="20"
Text="{Binding CategoryName}"
Foreground="{ThemeResource
SystemControlForegroundAccentBrush}"
FontWeight="SemiBold" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Tapped">
<Core:InvokeCommandAction
Command="{Binding ItemClickCommand}"
CommandParameter="{Binding SelectedDetail}" />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</ListView>
Does anyone have any ideas why one ListView would be behaving differently to the others?
Thanks.
The item is not highlighted because you have the Background="White" set, and this color will always be above the highlight color. The UserControl background needs to be set to Transparent.
To make it work the way you want, you need to change the ItemContainerStyle of your ListView. If you have different elements in your ListView you can use ItemContainerStyleSelector.
You can read more about ListViewItem here.
You need the change the Background property of list view items, for example:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Background" Value="White"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>

Set ContentDialog to show on bottom of page in UWP

I have several ContentDialogs in a RelativeLayout and want them to appear or have the the vertical alignment to "bottom". But it seems that no matter what I try the dialogs always appear on the top of the screen.
This is how they look now
Any ideas?
Here is a xaml code snippet:
<RelativePanel Height="{Binding ActualHeight, ElementName=Page}" >
<ContentDialog x:Name="EntrepriseDialog"
VerticalAlignment="Bottom"
Title="Vælg entreprise"
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" Grid.ColumnSpan="2" Margin="30,194,-71,-194">
<ListView Name="ListEntreprises" VerticalAlignment="Bottom" SelectionChanged="ListEntreprises_SelectionChanged">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="Margin" Value="0,0,0,1"></Setter>
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Padding" Value="5"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel>
<TextBlock>
<Run FontSize="15" Text="{Binding Name}"/>
</TextBlock>
<TextBlock Visibility="Collapsed">
<Run Text="{Binding Id}"/>
</TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentDialog>
<ContentDialog x:Name="SaveChooseDialog"
VerticalAlignment="Bottom"
Title=""
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" Grid.ColumnSpan="2" Margin="30,148,-71,-148">
<ListBox Name="ListBoxSaveMode" SelectionChanged="ListBoxSaveMode_SelectionChanged">
<ListBoxItem>
<TextBlock Name="TxtLocally" Text="Gem lokalt"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtServer" Text="Gem på server"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtCancel" Text="Annullér"/>
</ListBoxItem>
</ListBox>
</ContentDialog>
<ContentDialog x:Name="AddPictureDialog"
VerticalAlignment="Bottom"
Title=""
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" Grid.ColumnSpan="2" Margin="30,142,-71,-142">
<ListBox Name="ListBoxAddPicture" SelectionChanged="ListBoxAddPicture_SelectionChanged">
<ListBoxItem>
<TextBlock Name="TxtFromCamera" Text="Tag et nyt"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtFromStorage" Text="Vælg fra kamerarulle"/>
</ListBoxItem>
</ListBox>
</ContentDialog>
</RelativePanel>
EDIT: XAML for entire Page
<Page
Name="Page"
x:Class="...Pages.Documentation.DocumentationCreatePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:...Pages.Documentation"
xmlns:userControl="using:...Pages.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="#8FBC3E">
<Grid>
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="/Assets/Images/mainBg.png" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel>
<Grid Height="40" Background="#8FBC3E" >
<StackPanel Orientation="Horizontal">
<Button Name="BtnBack" Click="BtnBack_Click" Margin="20 0 20 0" >
<Button.Template>
<ControlTemplate>
<TextBlock FontSize="20" Foreground="White" FontFamily="Segoe MDL2 Assets" Text=""></TextBlock>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Name="TxtTitle" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" FontSize="18"/>
</StackPanel>
</Grid>
<userControl:SyncDataControl></userControl:SyncDataControl>
</StackPanel>
<Grid Grid.Row="1" Name="StackPanel">
<ProgressRing Name="SaveProgressRing" IsActive="False" Foreground="#8FBC3E" Width="40" Height="40" Margin="152,239,87,321" />
<StackPanel Grid.ColumnSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ListView Name="ListViewDocumentationItems" ScrollViewer.VerticalScrollMode="Disabled" SelectionChanged="ListViewDocumentationItems_SelectionChanged">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Height" Value="80"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalContentAlignment" Value="Center"></Setter>
<Setter Property="Margin" Value="0,0,0,1"></Setter>
<Setter Property="Background" Value="White"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Center">
<StackPanel Padding="0 0 10 0" Orientation="Horizontal" >
<Image Source="{Binding ImageSource}" VerticalAlignment="Center" Height="40" Margin="5 0 5 0"></Image>
<TextBlock Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Center">
<Run FontWeight="Bold" FontSize="20" Text="{Binding Name}"/>
</TextBlock>
</StackPanel>
<Grid HorizontalAlignment="Right">
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Black" VerticalAlignment="Center" Padding="0 0 20 0">
<Run FontSize="15" Text="{Binding Count}"/>
</TextBlock>
<Image Width="15" Height="15" VerticalAlignment="Center" Source="/Assets/Images/rightarrow.png" />
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<TextBlock Name="TxtDocDesc" TextWrapping="Wrap" Foreground="Gray" Height="53" />
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel Name="PicturePanel" Orientation="Horizontal" Margin="15 0 15 0" />
</ScrollViewer>
</StackPanel>
<Button Name="BtnSave" Grid.Row="2" VerticalAlignment="Bottom" FontSize="25" Click="BtnSave_Click" Background="#8FBC3E" Foreground="White" Height="60" Content="Gem" HorizontalAlignment="Stretch" Margin="5 5 5 5"/>
<RelativePanel VerticalAlignment="Stretch" >
<ContentDialog x:Name="EntrepriseDialog" VerticalContentAlignment="Bottom"
RelativePanel.AlignBottomWithPanel="True"
Title="Vælg entreprise"
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" >
<ListView Name="ListEntreprises" VerticalAlignment="Bottom" SelectionChanged="ListEntreprises_SelectionChanged">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="Margin" Value="0,0,0,1"></Setter>
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Padding" Value="5"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel>
<TextBlock>
<Run FontSize="15" Text="{Binding Name}"/>
</TextBlock>
<TextBlock Visibility="Collapsed">
<Run Text="{Binding Id}"/>
</TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentDialog>
<ContentDialog x:Name="SaveChooseDialog"
RelativePanel.AlignBottomWithPanel="True"
Title=""
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}">
<ListBox Name="ListBoxSaveMode" SelectionChanged="ListBoxSaveMode_SelectionChanged">
<ListBoxItem>
<TextBlock Name="TxtLocally" Text="Gem lokalt"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtServer" Text="Gem på server"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtCancel" Text="Annullér"/>
</ListBoxItem>
</ListBox>
</ContentDialog>
<ContentDialog x:Name="AddPictureDialog"
Title=""
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" >
<ListBox Name="ListBoxAddPicture" SelectionChanged="ListBoxAddPicture_SelectionChanged">
<ListBoxItem>
<TextBlock Name="TxtFromCamera" Text="Tag et nyt"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtFromStorage" Text="Vælg fra kamerarulle"/>
</ListBoxItem>
</ListBox>
</ContentDialog>
<ContentDialog x:Name="DialogDownloadProgress"
VerticalAlignment="Stretch"
Title=""
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}">
<StackPanel Padding="0,50">
<TextBlock Name="ProgressTitle" Text="Test test" HorizontalAlignment="Center" Padding="0 0 0 20"/>
<ProgressBar x:Name="ProgressBarDownload" HorizontalAlignment="Stretch" IsEnabled="True"></ProgressBar>
</StackPanel>
</ContentDialog>
</RelativePanel>
</Grid>
</Grid>
It seems the positioning of ContentDialog instances is not in the hands of the developer, at least not without custom versions of it. Afaik the OS will decide where to place the dialog for you.
See here for more information:
http://www.reflectionit.nl/blog/2015/windows-10-xaml-tips-messagedialog-and-contentdialog
So if positioning of the dialog is critical then you might have to create a custom control.

StackPanel Orientation stops page load

First to explain what I am doing here, I want to create a page that list a large number of grouped objects. Selecting an object binds that information to a display on the left. Everything works fine till I change the MainStack Orientation to Horizontal. Once that is changed the page no longer loads. No errors are thrown. When stepping through the process the code behind steps through as it should.
I know its the XAML but am baffled by the cause. It works fine under two circumstances.
If I drop the mainstack stack panel and instead make the display group the header of the GridView it works.
If I put the MainStack orientation to Vertical it loads fine.
Here is the code that does not load:
<StackPanel Name="MainStack" Orientation="Horizontal" Grid.Row="2" >
<StackPanel Name="Stack" Width="480" >
<TextBlock Text="{Binding Nname}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<TextBlock Text="{Binding Nset}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<Image Source="{Binding url}" Height="Auto" Margin="0,0,102,55" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
<ScrollViewer Margin="0,0,0,0" MaxHeight="200">
<TextBlock Text="{Binding Nruling}" Margin="0,0,0,0" Style="{StaticResource BodyTextBlockStyle}"/>
</ScrollViewer>
</StackPanel>
<SemanticZoom x:Name="semanticZoom" Width="Auto" >
<SemanticZoom.ZoomedOutView>
<GridView Foreground="White"
ScrollViewer.IsHorizontalScrollChainingEnabled="False">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Group.Key}"
FontFamily="Segoe UI" FontWeight="Light" FontSize="24" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid ItemWidth="100" ItemHeight="100" MaximumRowsOrColumns="4"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="4" />
<Setter Property="Padding" Value="10" />
<Setter Property="Background" Value="#FF25A1DB" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
TabIndex="1"
Padding="120,126,120,50"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionMode="Single"
ScrollViewer.IsHorizontalScrollChainingEnabled="False" SelectionChanged="itemGridView_SelectionChanged">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="8" GroupHeaderPlacement="Top" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="110" Width="480" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
<Image Source="{Binding url}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Nname}"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Nname}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Nset}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Nruling}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="52,0,0,2"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Margin="10">
<TextBlock Text='{Binding Key}' Foreground="{StaticResource ApplicationForegroundThemeBrush}" FontSize="25" Margin="5" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<!-- Horizontal scrolling grid -->
</StackPanel>

is there any limit for items in a listbox for windows phone 8?

i have a listbox with around 150 items in it. the problem is that it is not taking any events. other listboxes have less than 90 items and they are working fine.
is there any limit or something which is preventing event handeling??
<ScrollViewer HorizontalAlignment="Left" Height="170" Margin="0,421,0,0" VerticalAlignment="Top" Width="480" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
<ListBox Name="thirdList" Tap="firstList_SelectionChanged_1" Height="170" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragCompleted="GestureListener_DragCompleted"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0 0 0 0 " />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="170" Width="150" Background="Transparent">
<!--Replace rectangle with image-->
<Image Source="{Binding image}" Stretch="UniformToFill" Margin="0,20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="140" Width="119"></Image>
<Grid Margin="0,-335,0,0" HorizontalAlignment="Center" Background="Transparent" Height="30">
<TextBlock TextAlignment="Center" Text="{Binding brandName}" HorizontalAlignment="Center" FontSize="15" TextWrapping="NoWrap" Foreground="#FFAA1F17" />
</Grid>
<StackPanel Width="165" Margin="0,-65,0,0" Background="Transparent">
<Grid HorizontalAlignment="Stretch" Height="55" Background="#FF9B9A9A">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent">
<TextBlock TextAlignment="Center" Text="{Binding productName}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="White" FontSize="15" />
<TextBlock TextAlignment="Center" Text="{Binding price}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="#99FFFFFF" FontSize="15" />
</StackPanel>
</Grid>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
vjamit please consider using LongListSelector for Windows Phone 8 applications and not the old ListBox.
I have tested LLS with more than 5k items and it loads and plays just fine.
Also there is no need at all to wrap LLS in a ScrollViewer. Check below example:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="LLSTemplate">
<Grid Tap="firstList_SelectionChanged_1">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragCompleted="GestureListener_DragCompleted"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<StackPanel Orientation="Vertical" Height="170" Width="150" Background="Transparent">
<!--Replace rectangle with image-->
<Image Source="{Binding image}" Stretch="UniformToFill" Margin="0,20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="140" Width="119"></Image>
<Grid Margin="0,-335,0,0" HorizontalAlignment="Center" Background="Transparent" Height="30">
<TextBlock TextAlignment="Center" Text="{Binding brandName}" HorizontalAlignment="Center" FontSize="15" TextWrapping="NoWrap" Foreground="#FFAA1F17" />
</Grid>
<StackPanel Width="165" Margin="0,-65,0,0" Background="Transparent">
<Grid HorizontalAlignment="Stretch" Height="55" Background="#FF9B9A9A">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent">
<TextBlock TextAlignment="Center" Text="{Binding productName}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="White" FontSize="15" />
<TextBlock TextAlignment="Center" Text="{Binding price}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="#99FFFFFF" FontSize="15" />
</StackPanel>
</Grid>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector x:Name="thirdList" Height="170" ItemTemplate="{StaticResource LLSTemplate}"/>
</Grid>
Let me know if the above works.
EDITED:
Try applying the following changes on the ScrollViewer: HorizontalScrollBarVisibility="Disabled". Tested with 500+ and it works. Seems like a "bug".