I want to develop my app with the following style/design:
Some comments on the implementation:
- The content is loaded dynamically (the three categories (Subtitle 1-3) are fixed.
- The number of sub-items (grey) my vary
- I want the user to be able to scroll to the right (as usual in metro-apps)
Unfortunately I have some difficulties with the implementation (in XAML):
-
I tried a GridView (like in the example tutorials) which has a VirtualizingStackPanel (Orientation=Horizontal) within the ItemsPanelTemplate. The three categories (Green, Yellow, Grey) are displayed as grids with different templates.
-
This works mostly fine, but now I have multiple functions of the GridView I don’t like/need: I can select it and drag it a bit. I disabled the SelectionMode, etc. Unfortunately the Hover-effect still takes place as well as the possibility to drag the whole category a bit. I tried IsHitTestVisible=false what removed this hover & dragging, but disabled all buttons and click-events within the categories.
How can I do this better, e.g. solve my problem?
Any hint and suggestions are highly appreciated. Thanks!
You could use a ScrollViewer with Style=”{StaticResource HorizontalScrollViewerStyle}” and put a StackPanel with the three categories as ItemsControls with ItemsPanels defined as you like them or you can modify the template of the GridViewItem to change what happens when you hover. You would open the XAML file in the designer, right click the GridView and select Edit Additional Templates/Edit Generated Item Container (ItemContainerStyle)/Edit a Copy… – that extracts the default template and look at the PointerOver visual state to see what needs to be changed. You can either just remove the Storyboard from the VisualState or also remove the related controls used to visualize hover feedback.