Metro风格：用鼠标滚轮滚动答案

【问题标题】：Metro style : Scrolling with mouse wheelMetro风格：用鼠标滚轮滚动
【发布时间】：2012-05-24 12:37:45
【问题描述】：

我在gridview 中有gridview 并且想要实现鼠标滚轮滚动功能。所以我将此块添加到内部gridview中

<GridView.Template>
  <ControlTemplate >
    <ItemsPresenter />
  </ControlTemplate>
</GridView.Template>

但在这种情况下滑动不起作用

我该如何解决这个问题？

第 2 部分。我将尝试更深入地描述这种情况。我的主屏幕应该实现类似于 Windows 8 主屏幕上的功能。它应该被放大/缩小。这就是我使用 SenaticZoom 的原因。在 ZoomIn 中，我放置了包含控件的 GridView。该控件包含自己的GridView（我需要实现刷卡功能）。我不知道如何更改此 xaml 文件。有什么建议么？控制代码：

<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>

基本页面的代码

<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>

【问题讨论】：

但是鼠标滚轮应该只使用默认的 GridView 吗？如果您创建一个 Grid 应用程序 - 这应该可以工作...
对不起，这个答案没有帮助。我在语义缩放控件中使用外部 gridview，内部 - 用于滑动元素
据我记得 - 它只是工作，但你正在做的是完全错误的。您正在将 GridView 的控件模板更改为缺少 GridView 预期的所有模板部分的东西 - 包括 ScrollViewer。
@FilipSkakun 如果 GridView 嵌套在另一个 ScrollViewer 中，您绝对需要从 GridView 控件模板中删除 ScrollViewer。否则，内部 ScrollViewer 不需要滚动，但仍会吃掉鼠标滚轮事件。外部的 ScrollViewer 确实滚动，但没有获得鼠标滚轮事件，因此，使用鼠标滚轮滚动不起作用。
但是，如果 GridView 已经有一个 ScrollViewer，你为什么还要把它放在一个 ScrollViewer 中呢？我需要再次查看一些代码以了解它是如何完成的，但我几乎可以肯定上面的模板是错误的。

标签： xaml gridview windows-runtime winrt-xaml semantic-zoom

【解决方案1】：

这是工作 GridView 风格。我删除了 scrollviewr 属性

<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>

【讨论】：

【解决方案2】：

如果您重新模板化 GridView 并移除内部 ScrollViewer，则鼠标滚轮滚动将起作用，但滑动选择将不起作用。如果两者都需要，诀窍是使用 AddHandler() 方法为 PointerWheelChanged 事件添加处理程序并将 e.Handled 属性设置为 false。这将允许鼠标滚轮事件正确地冒泡到您的外部 ScrollViewer：

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;
    }
}

我实现了这个确切的场景，它对我有用。详细信息在这里：http://briandunnington.github.com/gridview-in-a-scrollviewer.html

【讨论】：

【解决方案3】：

更新：抱歉，我误读了这个问题。如果将 GridView 放置在 GridView 中，则确实有嵌套的 ScrollViewers，并且确实需要内部 GridViews 上的代码，否则鼠标滚轮滚动将不起作用。

但是，为什么要将 GridView 嵌套在 GridView 中？

看看 winrt 内置的分组功能。

或者，将内部 GridViews 放置在一个简单的 ItemsControl 中，其中 StackPanel 具有水平方向作为 ItemsPanel，并将 ItemsControl 放在 ScrollViewer 中。如果您确实将多个 GridViews 放置在 ScrollViewer（直接或间接）中，则需要该代码从内部（即嵌套）GridViews 中删除 ScrollViewer，否则鼠标滚轮滚动将不起作用。

原始答案：

仅当您将 GridView 放在 ScrollViewer 中时才需要该代码。

如果 GridView 是唯一要显示的内容，则无需将其放置在 ScrollViewer 中，也不需要该代码。

我认为您真正的问题是如何正确布局 GridView，因为 Visual Studio 11 测试版（来自消费者预览版）中包含的模板在那里做得非常糟糕。

试试这个：

<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>

现在只有一个 ScrollViewer，即 GridView 中的一个，所以两个 ScrollViewer 相互嵌套没有冲突，一个 ScrollViewer 自动处理鼠标。

另外，margin是正确的，但是当滚动项目时允许移动到margin区域内。

【讨论】：

【解决方案4】：

这对我来说很好：

<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>

【讨论】：

你又误读了我的问题。我在您的代码中看不到内部网格视图。在哪里刷卡？
嵌套 GridView 没有意义。你说的刷屏是什么意思？ GridView 在模板中有一个 ScrollViewer，因此如果内容不适合屏幕，您可以随时滚动。
抱歉，我可能确实误读了您的部分问题 - 如果您的意思是交叉滑动以选择功能 - 如果 SelectionMode 未设置为 None 并且 IsSwipeEnabled="True 则它应该在 GridView 中工作”，但是如果嵌套 GridViews，它可能不起作用，所以我的回答仍然成立 - 如果你能解释你试图用你的布局实现什么或为什么要嵌套 GridViews - 你可能会得到一个更好的答案。
我有当前的结构：主页，包含在语义缩放和控件中的网格视图，在网格视图中。由于 2 个原因，此控件使用 gridview -> 分组数据和滑动。我不能改变这个结构。如果我在 GridView 中删除 ScrollViewer，则滑动不起作用.....
这不是支持分组的受支持方式