Metro style : Scrolling with mouse wheel

Question

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>

Answer 1

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>

Answer 2

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.

Answer 3

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>

Answer 4

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