Xaml Metro风格:使用鼠标滚轮滚动

Xaml Metro风格:使用鼠标滚轮滚动,xaml,gridview,windows-runtime,winrt-xaml,semantic-zoom,Xaml,Gridview,Windows Runtime,Winrt Xaml,Semantic Zoom,我在gridview中有gridview,希望实现鼠标滚轮滚动功能。所以我在内部gridview中添加了这个块 <GridView.Template> <ControlTemplate > <ItemsPresenter /> </ControlTemplate> </GridView.Template> 但在这种情况下,刷卡不起作用 我如何设法解决这个问题 第二部分。 我将尝试更深入地描述这种情况。我有一个主屏幕

我在gridview中有gridview,希望实现鼠标滚轮滚动功能。所以我在内部gridview中添加了这个块

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

但在这种情况下,刷卡不起作用

我如何设法解决这个问题

第二部分。 我将尝试更深入地描述这种情况。我有一个主屏幕,应该可以实现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中放置GridView,则确实有嵌套的ScrollViewer,并且确实需要在内部GridView中使用该代码,否则鼠标滚轮滚动将无法工作

但是,为什么要在GridView中嵌套GridView

看看winrt内置的分组功能

或者,将内部网格视图放置在一个简单的ItemsControl中,其中StackPanel的水平方向为ItemsPanel,而ItemsControl则放置在ScrollViewer中。如果在ScrollViewer中放置多个GridView(直接或间接),则需要该代码从内部(即嵌套)GridView中删除ScrollViewer,否则鼠标滚轮滚动将无法工作

原始答案:

只有将GridView放置在ScrollViewer中时,才需要该代码

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

我认为您真正的问题是如何正确布局GridView,因为VisualStudio11Beta(来自消费者预览版)中包含的模板在这方面做得非常糟糕

试试这个:

<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相互嵌套不会产生冲突,一个ScrollViewer会自动处理鼠标


此外,边距是正确的,但当允许滚动项目移动到边距区域时。

这对我来说很好:

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

这是工作网格视图样式。我删除了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>

如果重新设置GridView模板并移除内部ScrollViewer,则鼠标滚轮滚动将起作用,但滑动选择将不起作用。如果两者都需要,技巧是使用AddHandler()方法为PointerHeelChanged事件添加一个处理程序,并将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;
    }
}

我实现了这个完全相同的场景,它对我很有效。此处的完整详细信息:

但是鼠标滚轮应该只使用默认的GridView?如果你创建了一个网格应用程序-这应该可以…对不起,这个答案没有帮助。我在语义缩放控件中使用外部gridview,在我记忆中的滑动元素中使用内部gridview,它只是起作用,但您所做的是完全错误的。您正在将GridView的控件模板更改为缺少GridView所需的所有模板部分的内容,包括ScrollViewer。@FilipSkakun如果GridView嵌套在另一个ScrollViewer中,您绝对需要从GridView控件模板中删除ScrollViewer。否则,内部ScrollViewer不需要滚动,但仍然会吃掉鼠标滚轮事件。外部ScrollViewer确实会滚动,但不会获取鼠标滚轮事件,因此,使用鼠标滚轮滚动不起作用。但是,如果ScrollViewer已经有GridView,为什么要将它放在ScrollViewer中?我需要再次查看一些代码才能看到