A simple xaml like this
<FlipView>
<FlipView>
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<Rectangle Fill="CornflowerBlue" />
<Rectangle Fill="CornflowerBlue" />
</FlipView>
<FlipView>
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<Rectangle Fill="CornflowerBlue" />
<Rectangle Fill="CornflowerBlue" />
</FlipView>
<ListBox>
<Rectangle Fill="CornflowerBlue" />
<Rectangle Fill="CornflowerBlue" />
</ListBox>
</FlipView>
If the main FlipView's current item is a flipview,you can drag and scroll its item on two directions.But if it is a listbox,only one direction is available.means before your finger up,you cannot drag and scroll it on the other direction(Horizental or Vertical).
so how to make flipview's behavier as the same as listbox?
If you extract the default template from the FlipView you can see how the style has these setters:
<Setter
Property="ScrollViewer.IsHorizontalRailEnabled"
Value="False" />
<Setter
Property="ScrollViewer.IsVerticalRailEnabled"
Value="False" />
<Setter
From that you can deduce that setting ScrollViewer.IsHorizontalRailEnabled and ScrollViewer.IsVerticalRailEnabled on your FlipView to True gives you want you ask for.
Related
I am trying to create a button Style that I can use for a "Lookup" button throughout my UWP app. However, the icon only appears on the first button on the screen. I tried this solution using templates, but it is not working for me. Thanks for the help.
Code:
<Page.Resources>
<ControlTemplate x:Key="FindSymbolTemplate">
<SymbolIcon Symbol="Find" Foreground="White" />
</ControlTemplate>
<Style TargetType="Button" x:Key="LookupButton">
<Setter Property="Content">
<Setter.Value>
<ContentControl Template="{StaticResource FindSymbolTemplate}" />
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
....
<Button x:Name="tourNumLookup"
Style="{StaticResource LookupButton}"
Grid.Column="1"
Margin="10,0"
VerticalAlignment="Center" />
....
<Button x:Name="customerIdLookup"
Style="{StaticResource LookupButton}"
VerticalAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Margin="10,0" />
The two buttons in the UI. Only the first has the SymbolIcon content.
#Romasz's solution absolutely works, but what if you want a lightly different Foreground on the SymbolIcon inside another Button?
Here's a potentially more flexible way that I normally go with.
First let's create a base Style that holds some default values for all the icons.
<Style x:Key="Style-Icon-Base"
TargetType="ContentControl">
<!-- If you don't specify the Foreground, it will use its ancestor's -->
<!--<Setter Property="Foreground"
Value="White" />-->
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Width"
Value="20" />
<Setter Property="Height"
Value="20" />
<Setter Property="Padding"
Value="0" />
</Style>
Then we create a new icon Style which inherits from the one above. Note within the ControlTemplate I have used TemplateBinding to make property values dynamic. TemplateBinding isn't available inside a DataTemplate.
<Style x:Key="Style-Icon-Find"
BasedOn="{StaticResource Style-Icon-Base}"
TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<!--
'cause you cannot change the size of the SymbolIcon, we insert a Viewbox here,
otherwise you don't need it.
-->
<Viewbox Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<SymbolIcon Symbol="Find"
Foreground="{TemplateBinding Foreground}" />
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This way you have created a highly reusable icon Style, to use it, have a look at the following Buttons:
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<Button Margin="4"
Padding="8"
BorderBrush="LightBlue">
<ContentControl Width="36"
Height="36"
Foreground="DarkCyan"
Style="{StaticResource Style-Icon-Find}" />
</Button>
<!-- Note how I defined the Foreground at the Button level and it flows down to the icon -->
<Button Foreground="DarkGoldenrod"
Margin="4">
<StackPanel Orientation="Horizontal">
<ContentControl Style="{StaticResource Style-Icon-Find}"
Width="16"
Height="16" />
<TextBlock Text="Search"
VerticalAlignment="Center"
Margin="8,0,0,0" />
</StackPanel>
</Button>
<Button Margin="4"
Padding="4">
<ContentControl Style="{StaticResource Style-Icon-Find}" />
</Button>
</StackPanel>
And they look like:
Generally UI elements can be used once (or saying different - have only one parent) - this is probably why it only works for the first button in your case. One solution may be to define DataTemplate and use it as ContentTemplate, so each button creates its own icon:
<Page.Resources>
<DataTemplate x:Key="FindTemplate">
<SymbolIcon Symbol="Find" Foreground="White" />
</DataTemplate>
</Page.Resources>
...
<Button x:Name="tourNumLookup" ContentTemplate="{StaticResource FindTemplate}"
Grid.Column="1" Margin="10,0" VerticalAlignment="Center" />
<Button x:Name="customerIdLookup" ContentTemplate="{StaticResource FindTemplate}"
VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="10,0" />
You don't need to create ControlTemplate to reuse the icon. You can simply put this SymbolIcon to the resource dictionary and use as StaticResource for the buttons' Content.
<Page.Resources>
<SymbolIcon x:Key="FindSymbol" Symbol="Find" Foreground="White" />
</Page.Resources>
<Button x:Name="tourNumLookup"
Content="{StaticResource FindSymbol}"
Grid.Column="1"
Margin="10,0"
VerticalAlignment="Center" />
<Button x:Name="customerIdLookup"
Content="{StaticResource FindSymbol}"
VerticalAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Margin="10,0" />
UPDATE
BTW this is possibly a bug in the UWP platform, because I tried the following code and only the first Button rendered the icon at desing time and none of the at runtime.
<Page.Resources>
<SymbolIcon x:Key="FindSymbol" Symbol="Find" Foreground="White" />
<Style TargetType="Button" x:Key="LookupButton">
<Setter Property="Content" Value="{StaticResource FindSymbol}"/>
</Style>
</Page.Resources>
<StackPanel>
<Button x:Name="tourNumLookup"
Style="{StaticResource LookupButton}"
Margin="10,0"
VerticalAlignment="Center" />
<Button x:Name="customerIdLookup"
Style="{StaticResource LookupButton}"
VerticalAlignment="Center"
Margin="10,0" />
</StackPanel>
I tried to assign the Setter's Value directly but I got the same result. And also tried with FontIcon.
So I have struggled with this before but have never found a good solution.
I need a a 2 column GridView with items that will fill into the left and the right with the items on the left being left justified and the items on the right being right justified. I want the 2 columns to be edge to edge with a space in the middle. So far I have this but the items don't fill in the container horizontally. The right margin messes it up.
<Grid Background="black" Height="500" Width="200">
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2" ItemWidth="100" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="0 0 10 0"/>
</Style>
</GridView.ItemContainerStyle>
<CheckBox Content="Light" Foreground="White" Background="#454545" BorderBrush="White" />
<CheckBox Content="Light" Foreground="White" Background="#454545" BorderBrush="White" />
<CheckBox Content="Light" Foreground="White" Background="#454545" BorderBrush="White" />
<CheckBox Content="Light" Foreground="White" Background="#454545" BorderBrush="White" />
<CheckBox Content="Light" Foreground="White" Background="#454545" BorderBrush="White" />
<CheckBox Content="Light" Foreground="White" Background="#454545" BorderBrush="White" />
<CheckBox Content="Light" Foreground="White" Background="#454545" BorderBrush="White" />
</GridView>
</Grid>
I know there is a css equivalent of only applying a style to odd or even items but I don't think there is similar markup in xaml. Does anyone know how to do this?
In XAML, we can use ItemsControl.ItemContainerStyleSelector property to apply different styles to odd and even items. This property sets a reference to a custom StyleSelector logic class. The StyleSelector returns different Style values to use for the item container based on characteristics of the object being displayed. Following is a simple sample about how to do this.
Firstly, we need two styles for odd and even items.
<Style x:Key="OddGridViewItemStyle" TargetType="GridViewItem">
<Setter Property="Margin" Value="0 0 10 0" />
</Style>
<Style x:Key="EvenGridViewItemStyle" TargetType="GridViewItem">
<Setter Property="Margin" Value="10,0,0,0" />
</Style>
Then we need to create a custom StyleSelector class and override SelectStyleCore method to implement the logic. In the method, we can use ItemsControl.ItemsControlFromItemContainer method to get the ItemsControl and then use ItemsControl.IndexFromContainer method to get the index of the container. Once we have the index, we can use it to check whether the item is odd or even item.
public class MyStyleSelector : StyleSelector
{
public Style OddStyle { get; set; }
public Style EvenStyle { get; set; }
protected override Style SelectStyleCore(object item, DependencyObject container)
{
var itemsControl = ItemsControl.ItemsControlFromItemContainer(container);
//Note that the index starts form 0
if (itemsControl.IndexFromContainer(container) % 2 == 0)
{
return OddStyle;
}
else
{
return EvenStyle;
}
}
}
To use this selector, we need to refer to an instance of the custom class as defined in a Resources block in XAML. We can define it in Page.Resources like:
<local:MyStyleSelector x:Key="MyStyleSelector"
EvenStyle="{StaticResource EvenGridViewItemStyle}"
OddStyle="{StaticResource OddGridViewItemStyle}" />
And in GridView, set ItemContainerStyleSelector like:
<GridView ItemContainerStyleSelector="{StaticResource MyStyleSelector}">
The complete XAML code might like:
<Page ...>
<Page.Resources>
<Style x:Key="OddGridViewItemStyle" TargetType="GridViewItem">
<Setter Property="Margin" Value="0 0 10 0" />
</Style>
<Style x:Key="EvenGridViewItemStyle" TargetType="GridViewItem">
<Setter Property="Margin" Value="10,0,0,0" />
</Style>
<local:MyStyleSelector x:Key="MyStyleSelector" EvenStyle="{StaticResource EvenGridViewItemStyle}" OddStyle="{StaticResource OddGridViewItemStyle}" />
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Width="200" Height="500" Background="black">
<GridView ItemContainerStyleSelector="{StaticResource MyStyleSelector}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="100" MaximumRowsOrColumns="2" Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<CheckBox Background="#454545" BorderBrush="White" Content="Light" Foreground="White" />
<CheckBox Background="#454545" BorderBrush="White" Content="Light" Foreground="White" />
<CheckBox Background="#454545" BorderBrush="White" Content="Light" Foreground="White" />
<CheckBox Background="#454545" BorderBrush="White" Content="Light" Foreground="White" />
<CheckBox Background="#454545" BorderBrush="White" Content="Light" Foreground="White" />
<CheckBox Background="#454545" BorderBrush="White" Content="Light" Foreground="White" />
<CheckBox Background="#454545" BorderBrush="White" Content="Light" Foreground="White" />
</GridView>
</Grid>
</Grid>
</Page>
I use a wrapgrid as the itemspaneltemplate in my app
<GridView x:Name="InfoGridView" Margin="50">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" ItemWidth="200" ItemHeight="50" Height="400" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<TextBlock Text="Name" Style="{StaticResource AppNameTextStyle}" />
<TextBox x:Name="NameTextBox" Width="180"/>
<Button x:Name="AnotherNameButton" Style="{StaticResource AddAppBarButtonStyle}"/>
</GridView>
The TextBlock, TextBox and the Button are display in the middle of the item, how to let them display keep left?
Set this up on the ItemContainerStyle within your GridView by adding the following XAML below your ItemsPanel entry.
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Left" />
</Style>
</GridView.ItemContainerStyle>
I am trying to implement a semantic zoom in C#/Xaml for Windows 8. I succeed in displaying the zoom out and the zoom in. But when i click on item in the zoom out view I always come back to the first item of my zoom-in view.
here is how I grouped my items :
public IEnumerable<object> ListByCategory()
{
var query = from item in listArticles.listArticles
orderby item.categorie
group item by item.categorie into g
select g;
return query;
}
I used this to display the same collection of grouped items to the zoom out and zoom in views :
this.cvs1.Source = App.api.ListByCategory();
(semanticZoom.ZoomedOutView as ListViewBase).ItemsSource =
this.cvs1.View.CollectionGroups;
and my xaml code is
<ScrollViewer
x:Name="itemGridScrollViewer"
AutomationProperties.AutomationId="ItemGridScrollViewer"
Grid.Row="1"
Margin="0,-3,0,0"
Style="{StaticResource HorizontalScrollViewerStyle}">
<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
<GridView Foreground="Black" SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Group.Key}"
FontFamily="Segoe UI Light"
FontSize="24" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid ItemWidth="200" ItemHeight="200" MaximumRowsOrColumns="2"
VerticalChildrenAlignment="Center" />
</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>
<local:MyGridView x:Name="PicturesGridView" SelectionMode="None"
ItemsSource="{Binding Source={StaticResource cvs1}}" IsItemClickEnabled="True" ItemTemplate="{StaticResource CustomTileItem}" ItemClick="ItemView_ItemClick" IsSwipeEnabled="True">
<local:MyGridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</local:MyGridView.ItemsPanel>
<local:MyGridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Button Click="Button_Click_1" Content="{Binding Key}" Foreground="Black" Background="White" FontSize="30" Margin="0,0,0,-10" ></Button>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</local:MyGridView.GroupStyle>
</local:MyGridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
</ScrollViewer>
Thank you for your help.
I found the solution in the link that Depechie posted.
Replacing the ScrollViewer with SemanticZoom
The first and most important thing to do is to completely remove the ScrollViewer named “itemGridScrollViewer” from the Movies.xaml. The SemanticZoom control won’t work correctly if it’s inside the ScrollViewer.
Many people have problems getting the ZoomedOutView and ZoomedInView “in sync”. The usual problem is that when the item in ZoomedOutView is clicked, the ZoomedInView doesn’t scroll to the correct position. The reason for this problem usually is that the SemanticZoom –control is inside a ScrollViewer.
So effectively, I just remove the scrollViewer and it works like a charm :
<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom"
Grid.Row="1"
Margin="0,-3,0,0">
<SemanticZoom.ZoomedOutView>
<GridView Foreground="Black" SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Group.Key}"
FontFamily="Segoe UI Light"
FontSize="24" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid ItemWidth="200" ItemHeight="200" MaximumRowsOrColumns="2"
VerticalChildrenAlignment="Center" />
</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>
<local:MyGridView x:Name="PicturesGridView" SelectionMode="None"
ItemsSource="{Binding Source={StaticResource cvs1}}" IsItemClickEnabled="True" ItemTemplate="{StaticResource CustomTileItem}" ItemClick="ItemView_ItemClick" IsSwipeEnabled="True">
<local:MyGridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</local:MyGridView.ItemsPanel>
<local:MyGridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Button Click="Button_Click_1" Content="{Binding Key}" Foreground="Black" Background="White" FontSize="30" Margin="0,0,0,-10" ></Button>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</local:MyGridView.GroupStyle>
</local:MyGridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
Bit difficult to see why it isn't working, so my option for you is to try working 'back' from a working solution: take a look at http://mikaelkoskinen.net/winrt-step-by-step-tutorial-mvvm-gridview-semanticzoom/ for a very good detailed example!
I think grouping may be the key here. Make sure your CollectionViewSource has IsSourceGrouped="True".
Also, you don't need to set
ItemsSource = this.cvs1.View.CollectionGroups;
It can be set
ItemsSource = this.cvs1;
I have gridview in the gridview and want to implement the mouse wheel scrolling functionality. So I added this block into the internal gridview
<GridView.Template>
<ControlTemplate >
<ItemsPresenter />
</ControlTemplate>
</GridView.Template>
But in this case swiping doesn't work
How manage I to solve this problem?
part 2.
I'll try to describe this situation more deeply. I have main screen that should realize functionality like on the main screen in Windows 8. It should be zoomed in/out. That's why i use SenaticZoom. In to ZoomIn I put GridView, that contains controls. The control contain own GridView(I need to realize the swiping functionality). I don't know how change this xaml files. Any suggestions? The code of control:
<GridView
x:Name="iGridView"
Margin="120,0,0,0"
ItemsSource="{Binding Source={StaticResource ViewSource}}"
ItemTemplateSelector ="{StaticResource ItemTemplateSelector}"
IsItemClickEnabled="True"
MinCellHeight = "450"
MinCellWidth = "245"
IsSwipedEnabled="True"
>
<GridView.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</GridView.Template>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,0,20">
<Button
Content="{Binding Title}"
Style="{StaticResource Header}"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid VerticalAlignment="Top" Height="550" Orientation="Vertical"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
and code of the base page
<SemanticZoom x:Name="sZoom" VerticalAlignment="Stretch" >
<SemanticZoom.ZoomedInView>
<GridView x:Name="zoomIn" SelectionMode="None"
IsItemClickEnabled="False"
IsSwipeEnabled="False"
>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Template" Value="{StaticResource ItemTemplate}"/>
</Style>
</GridView.ItemContainerStyle>
<local:Control1 x:Name="Control1" />
<local:Control1 x:Name="Control2" />
</GridView>
</SemanticZoom.ZoomedInView>
It is work GridView style. i remove scrollviewr property
<Style x:Key="GridViewInGridViewStyle" TargetType="GridView">
<Setter Property="Padding" Value="0,0,0,10"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="IsSwipeEnabled" Value="True"/>
<Setter Property="ItemContainerTransitions">
<Setter.Value>
<TransitionCollection>
<AddDeleteThemeTransition/>
<ContentThemeTransition/>
<ReorderThemeTransition/>
<EntranceThemeTransition IsStaggeringEnabled="False"/>
</TransitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridView">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ItemsPresenter HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="{TemplateBinding Header}" HeaderTransitions="{TemplateBinding HeaderTransitions}" Padding="{TemplateBinding Padding}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If you re-template the GridView and remove the inner ScrollViewer, then mouse-wheel scrolling will work, but swipe-to-select will not work. If you want both, the trick is to use the AddHandler() method to add a handler for the PointerWheelChanged event and set the e.Handled property to false. That will allow the mouse wheel events to bubble up to your outer ScrollViewer properly:
public class CustomGridView : GridView
{
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
var sv = this.GetTemplateChild("ScrollViewer") as UIElement;
if (sv != null)
sv.AddHandler(UIElement.PointerWheelChangedEvent, new PointerEventHandler(OnPointerWheelChanged), true);
}
private void OnPointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
e.Handled = false;
}
}
I implemented this exact scenario and it works for me. Full details here: http://briandunnington.github.com/gridview-in-a-scrollviewer.html
UPDATE: sorry, I misread the question. If you place a GridView in a GridView, you do have nested ScrollViewers and you do need that code on the inner GridViews or mousewheel scrolling will not work.
However, why do you nest GridViews in a GridView?
Take a look at the grouping functionality built into winrt.
Alternatively, place the inner GridViews in a simple ItemsControl with a StackPanel with horizontal orientation as the ItemsPanel, and that ItemsControl in a ScrollViewer. If you do place multiple GridViews in a ScrollViewer (directly or indirectly), you do need that code to remove the ScrollViewer from in inner (i.e. nested) GridViews, or mousewheel scrolling will not work.
ORIGINAL ANSWER:
That code is needed only if you place the GridView in a ScrollViewer.
If the the GridView is the only thing to display, you don't need to place it in a ScrollViewer, and you don't need that code.
I'm thinking your real question is about how to layout GridView correctly, as the templates included in Visual Studio 11 beta (from consumer preview) do a really bad job there.
Try this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<!-- Back button and page title go here -->
</Grid>
<GridView x:Name="itemsGridView" Grid.Row="1"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
ItemsSource="{Binding MyListOfSItems}"
ItemTemplate="{StaticResource myItemTemplate}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid x:Name="itemGridViewPanel" Margin="116,53,116,46"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
Now there is only one ScrollViewer, i.e. the one in the GridView, so there are no conflicts from two ScrollViewers nested in each other and the one ScrollViewer handles the mouse automatically.
In addition, the margin is correct, but when scrolling items are allowed to move into the margin area.
This scrolls fine for me:
<SemanticZoom>
<SemanticZoom.ZoomedInView>
<GridView>
<GridView.ItemContainerStyle>
<Style
TargetType="GridViewItem">
<Setter
Property="Width"
Value="250" />
<Setter
Property="Height"
Value="250" />
<Setter
Property="FontSize"
Value="32" />
</Style>
</GridView.ItemContainerStyle>
<GridViewItem
Content="Apple"/>
<GridViewItem
Content="Banana" />
<GridViewItem
Content="Cherry" />
<GridViewItem
Content="Donut" />
<GridViewItem
Content="Eggplant" />
<GridViewItem
Content="Fig" />
<GridViewItem
Content="Grape" />
<GridViewItem
Content="Ham" />
<GridViewItem
Content="Ice Cream" />
<GridViewItem
Content="Jam" />
<GridViewItem
Content="Kale" />
<GridViewItem
Content="Lemon" />
<GridViewItem
Content="Muffin" />
<GridViewItem
Content="Nut" />
<GridViewItem
Content="Orange" />
<GridViewItem
Content="Pear" />
<GridViewItem
Content="Raspberry" />
<GridViewItem
Content="Steak" />
<GridViewItem
Content="Turkey" />
<GridViewItem
Content="Udon" />
<GridViewItem
Content="Vodka" />
<GridViewItem
Content="Wine" />
<GridViewItem
Content="Xanthan Gum" />
<GridViewItem
Content="Yam" />
<GridViewItem
Content="Zucchini" />
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView
ItemsSource="ABCDEFGHIJKLMNOPQRSTUVWXYZ">
<GridView.ItemContainerStyle>
<Style
TargetType="GridViewItem">
<Setter
Property="Width"
Value="400" />
<Setter
Property="Height"
Value="100" />
<Setter
Property="FontSize"
Value="72" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>