1. 首頁
  2. 問答
  3. Metro風格：使用鼠標滾輪滾動

Metro風格：使用鼠標滾輪滾動

2012-05-24 59 views
2

我在gridview中使用gridview，並希望實現鼠標滾輪滾動功能。所以我說這個塊到內部的GridViewMetro風格：使用鼠標滾輪滾動

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

來源

2012-05-24 burusera

+0

但鼠標滾輪應該只使用默認的GridView？如果你創建一個網格應用程序 - 這應該只是工作... –

+0

對不起，但這個答案是沒有幫助的。我在語義縮放控件中使用外部gridview，內部 - 對於滑動元素 – burusera

+1

從我記憶中 - 它只是起作用，但是你所做的完全是錯誤的。您正在將GridView的控件模板更改爲缺少GridView所需的所有模板部件（包括ScrollViewer）。 –

回答

0

UPDATE：對不起，我誤解了問題。如果將GridView放置在GridView中，則確實嵌套了ScrollViewers，並且您確實需要內部GridView上的代碼或鼠標滾輪不起作用。

但是，爲什麼你要在GridView中嵌套GridView？

看看內置到winrt中的分組功能。

或者，將內部的GridView放置在一個簡單的ItemsControl中，其中一個具有水平方向的StackPanel作爲ItemsPanel，以及一個ScrollViewer中的ItemsControl。如果您將多個GridViews直接或間接地放置在ScrollViewer中，您確實需要該代碼才能從內部（即嵌套的）GridView中移除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，所以沒有從嵌套在兩個彼此ScrollViewers衝突和所述一個的ScrollViewer自動處理小鼠。

此外，邊距是正確的，但是當滾動項目被允許移動到邊緣區域時。

來源

2012-05-25 20:10:31

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>

來源

2012-05-27 03:46:26

+0

你再誤讀我的問題。我在你的代碼中看不到內部的gridview。在哪裏刷？ – burusera

+0

嵌套GridViews沒有意義。你是什​​麼意思的刷卡？ GridView在模板中有一個ScrollViewer，因此如果內容不適合屏幕，您總是可以滾動。 –

+0

對不起，我可能誤解了你的問題的一部分 - 如果你的意思是交叉滑動來選擇功能 - 那麼它應該在GridView中工作，如果SelectionMode沒有被設置爲None並且IsSwipeEnabled =「True」，但它可能贏得'如果您嵌套GridView，那麼我的答案仍然成立 - 如果您可以解釋您想要實現的佈局或爲什麼要嵌套GridViews - 您可能會得到更好的答案。 –

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>

來源

2012-09-25 11:04:26 kaki104

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

來源

2012-12-11 03:55:58 briandunnington

相關問題

 相關問題