地铁风格:使用鼠标滚轮滚动

时间:2012-05-24 12:37:46

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

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

4 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

如果重新模板化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

答案 2 :(得分:0)

更新:抱歉,我误解了这个问题。如果你在GridView中放置一个GridView,你确实有嵌套的ScrollViewers,你需要内部GridViews或鼠标滚轮上的代码滚动不起作用。

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

看看winrt中内置的分组功能。

或者,将内部GridViews放在一个简单的ItemsControl中,其中StackPanel的水平方向为ItemsPanel,而ItemsControl位于ScrollViewer中。如果您在ScrollViewer中直接或间接放置多个GridView,则需要使用该代码从内部(即嵌套)GridView中删除ScrollViewer,否则鼠标滚轮将无效。

原始答案:

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

如果只显示GridView,则无需将其放在ScrollViewer中,也不需要该代码。

我认为你真正的问题是关于如何正确布局GridView,因为Visual Studio 11 beta中包含的模板(来自消费者预览版)在那里做得非常糟糕。

试试这个:

<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中的一个,所以两个ScrollViewers互不嵌套,一个ScrollViewer自动处理鼠标。

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

答案 3 :(得分:0)

这对我滚动很好:

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