VirtualizingStackPanel CanVerticallyScroll Property - xaml

I am playing with layout for Windows 8 Store Application and noticed that VirtualizingStackPanel.CanVerticallyScroll Property crash my application, but this property should work by this page.
It is strange, even Visual Studio Renders it correctly:
My code of XAML:
<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="App5.GroupedItemsPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App5"
xmlns:data="using:App5.Data"
xmlns:common="using:App5.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Items}"
IsSourceGrouped="false"
ItemsPath="Items"
d:Source="{Binding Items, Source={d:DesignInstance Type=data:DataGroup, IsDesignTimeCreatable=True}}"/>
</Page.Resources>
<Grid Style="{StaticResource LayoutRootStyle}">
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" CanVerticallyScroll="False"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
</common:LayoutAwarePage>
What I want to achieve: Gridview does not have any groups and items stand in 2-3 rows with scroll to the right.
------------
|1|4|7|10|
------------
|2|5|8|11|
------------
|3|6|9|12|
------------

Related

Hub Page Header Template doesn't work as expected

I'm porting over some Win RT code to UWP. One of the pages that doesn't work as expected is the HubPage.
I have a button in the HubSection HeaderTemplate which should be replacing the "see more" HyperLink. My button in my template appears but doesn't accept clicks.
The documentation states that I should be able to replace the "see more" hyperlink with my own template, I believe this is what my code is doing but doesn't work.
I'm unsure what value IsHeaderInteractive should be if I've attempting to replace the HubSection HeaderTemplate. Any help apprecaited
<Page
x:Class="Hub_Page.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Hub_Page"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style TargetType="HubSection">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Button Content="This doesn't click!"
Background="DarkCyan" Tapped="UIElement_OnTapped"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="outerGrid">
<Grid x:Name="innerGrid"
VerticalAlignment="Top">
<Hub x:Name="hub" SectionHeaderClick="Hub_OnSectionHeaderClick" >
<Hub.Header>
<!-- Back button and page title -->
<Grid>
<StackPanel Margin="13,0,20,0" Orientation="Horizontal">
<Button x:Name="backButton" Margin="0,0,20,0"/>
<TextBlock Text="x Manage Playlists" Margin="0,0,10,5" HorizontalAlignment="Left"/>
<Button Content="This does click"
Background="DarkGray" Tapped="UIElement_OnTapped"/>
</StackPanel>
</Grid>
</Hub.Header>
<!-- Playlists section -->
<HubSection Header="x Playlists" IsHeaderInteractive="True" >
<DataTemplate>
<ListView x:Name="playlistListView"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
SelectionMode="Single">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<!-- A playlist -->
<Grid HorizontalAlignment="Stretch">
<StackPanel Margin="10" Orientation="Vertical" HorizontalAlignment="Stretch" MaxWidth="500">
<TextBlock Text="{Binding Name}" TextTrimming="WordEllipsis" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
</Grid>
</Grid>
</Page>
It's by design. You could make your own HubSection's button by yourself. For example like the following:
<HubSection>
<DataTemplate>
<StackPanel>
<Button Content="Header" Click="Button_Click" Margin="0 0 0 10"></Button>
<TextBlock Text="here is content."></TextBlock>
</StackPanel>
</DataTemplate>
</HubSection>

MahApps Metro NumericUpDown problems

After using MahApp Metro formy project in WPF I encountered a problem I can't solve. the framework works fine except when I am using the NumericUpDown control.
I can see this control onto my UserControl while I'am working on it. But at the compilation the code then becomes :
The tag 'NumericUpDown' does not exist in XML namespace "http://metro.mahapps.com/winfx/xaml/controls". Line 75 Position 26.
With my XAML code it could perhaps help :
<UserControl x:Class="FullTest.Tabs.DataGridStrategie" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:convertors="clr-namespace:FullTest.ModelView.Convertors"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:utils="clr-namespace:FullTest.UtilityClasses"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<ResourceDictionary>
<BooleanToVisibilityConverter x:Key="BoolToVis"/>
<ObjectDataProvider MethodName="GetType"
ObjectType="{x:Type sys:Type}" x:Key="colorsTypeOdp">
<ObjectDataProvider.MethodParameters>
<sys:String>System.Windows.Media.Colors, PresentationCore, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35</sys:String>
</ObjectDataProvider.MethodParameters>
</ObjectDataProvider>
<ObjectDataProvider ObjectInstance="{StaticResource colorsTypeOdp}" MethodName="GetProperties" x:Key="colorPropertiesOdp">
</ObjectDataProvider>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/emerald.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<DataGrid ItemsSource="{Binding Path=Str...}"
Grid.Row="0"
AutoGenerateColumns="False" Margin="0,0,-172,0" x:Name="MainGrid">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Colors ..." Width="Auto">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox Name="superCombo" ItemsSource="{Binding Source={StaticResource colorPropertiesOdp}}" SelectedItem="{Binding BrushColor, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Width="20" Height="20" Margin="5" Background="{Binding Name}"/>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Name of ..." x:Name="Str.." Width="150">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBox Name="itemNameTextBox" Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Typ o....">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox Name="TypeStrat" ItemsSource="{Binding Path=Typ....}" SelectedIndex="{Binding Index, UpdateSourceTrigger=PropertyChanged, Mode= TwoWay}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!--Here Appears the problem due to the controller-->
<DataGridTemplateColumn Header="">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<controls:NumericUpDown Grid.Row="0"
Grid.Column="1"
Height="23"
Margin="5,5,5,5"
Interval="1"
StringFormat="{}{0:###0}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
I could provide more information if it can be useful.

Two XAML GridViews in a StackPanel

For my Windows 8.1 XAML app, I am trying to create a XAML layout that resembles the following description:
One StackPanel that contains two GridViews (let's say GV1, GV2)
Each GridView contains images that are displayed through data binding
GV1 and GV2 should be horizontally stacked when screen is in landscape mode. Their width should be equal. The scrolling of images should be vertical.
GV1 and GV2 should be vertically stacked when screen is in portrait mode. There height should be equal. The scrolling of images should be horizontal.
I have tried several approaches using various combinations of GridViews, StackPanels, ScrollViewer etc. but nothing seems to work.
My latest attempt at creating a basic horizontal layout is here:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel x:Name="theStackPanel" Orientation="Horizontal">
<GridView x:Name="firstGridView"
ItemsSource="{Binding Path=FirstInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Center">
<Image Source="{Binding Path=SrcImage}" HorizontalAlignment="Center" Width="300" Height="225"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<GridView x:Name="secondGridView"
ItemsSource="{Binding Path=SecondInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Center">
<Image Source="{Binding Path=SrcImage}" HorizontalAlignment="Center" Width="120" Height="90"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
</Grid>
Any pointers or some kind of pseudo XAML code would be really helpful.
I'd try this:
<Page
x:Class="App79.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App79"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<!-- Two layouts to put in the page. Handle SizeChanged events to show the one that should be visible.
You could use VisualStateManager to switch between these if you want to keep designer support. -->
<ContentPresenter
x:Name="PortraitLayout"
Visibility="Collapsed">
<ContentPresenter.ContentTemplate>
<!-- Collapsed ContentPresenter in Windows 8.1 is roughly equivalent to x:Defer in Windows 10 -->
<DataTemplate>
<Grid>
<!-- Note that using a Grid here works better than a StackPanel since it will let you split the space into two rows/columns of same size -->
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<GridView
x:Name="firstGridView"
ItemsSource="{Binding Path=FirstInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<Image
Source="{Binding Path=SrcImage}"
HorizontalAlignment="Center"
Width="300"
Height="225" />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<GridView
Grid.Row="1"
x:Name="secondGridView"
ItemsSource="{Binding Path=SecondInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<Image
Source="{Binding Path=SrcImage}"
HorizontalAlignment="Center"
Width="120"
Height="90" />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
<ContentPresenter
x:Name="LandscapeLayout"
Visibility="Collapsed">
<ContentPresenter.ContentTemplate>
<!-- Collapsed ContentPresenter in Windows 8.1 is roughly equivalent to x:Defer in Windows 10 -->
<DataTemplate>
<Grid>
<!-- For landscape we-re using columns -->
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- Note that for vertical scrolling we're using ListViews with custom ItemsPanels.
In Windows 10 this might be simpler with just reconfigured GridViews. -->
<ListView
x:Name="firstGridView"
ItemsSource="{Binding Path=FirstInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid
Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Image
Source="{Binding Path=SrcImage}"
HorizontalAlignment="Center"
Width="300"
Height="225" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView
Grid.Column="1"
x:Name="secondGridView"
ItemsSource="{Binding Path=SecondInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid
Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Image
Source="{Binding Path=SrcImage}"
HorizontalAlignment="Center"
Width="120"
Height="90" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Grid>
</Page>

windows phone page XAML Preview not showing in Blend and Visual studio

I have written code in mainpage.xaml in universal app project and windows phone 8.1 section. The preview in visual studio and blend is showing as empty. Pictures are attached.
NO TEXT of text block set from back c# code. all code is set here.
Windows phone ouput is also attached.
Following is the code
<Page
x:Class="PakistanNewspapers.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PakistanNewspapers"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Hub>
<Hub.HeaderTemplate>
<DataTemplate>
<TextBlock x:Name="lblHeader" Text="Pakistani Newspapers"></TextBlock>
</DataTemplate>
</Hub.HeaderTemplate>
<HubSection Header="Urdu Newspapers" >
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical">
<GridView>
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,0" Orientation="Horizontal">
<Image x:Name="txtNewspaperImage" Height="60" Width="60" VerticalAlignment="Center" Margin="0,0,10,0"/>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="txtNewspaperHeader" TextWrapping="Wrap" Foreground="{StaticResource ApplicationForegroundThemeBrush}" FontSize="14.667" FontWeight="Light" Width="200" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Segoe UI"/>
<TextBlock x:Name="txtNewsHeader" TextWrapping="Wrap" Foreground="{StaticResource ApplicationForegroundThemeBrush}" FontSize="14.667" FontWeight="Light" Width="200" MaxHeight="20" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Header="English Newspapers"/>
<HubSection Header="About"/>
</Hub>
While the preview in visual studio and blend is showing as :

Why does this ScrollViewer not produce horizontal scroll bars?

I've created the following page in WinRT / Metro, and expected to get both horizontal and vertical scrollbars from the ScrollViewer, as the content area is larger than the screen and ScrollViewer in both dimensions. Can anyone spot any error here?
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Test"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="ScrollViewerTestPage"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer>
<ItemsControl ItemsSource="{Binding}" Width="2500" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Width="100" Margin="5" Height="1200" Text="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
</Page>
The data is initialized in the constructor like this:
var model = new List<string>();
for (int i = 1; i <= 20; i++) model.Add("" + i);
DataContext = model;
There is a scrollview property for a horizontal scrollbar: http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.scrollviewer.horizontalscrollbarvisibility