The most landing/hub pages you see are just a GroupedGridView ( for example the actual marketplace app )
But I would like to have a Grouped hub page with different controls.
For example my first control is a ListView that contains some categories.
2nd and 3th control are GridViews with several items in them.
If all 3 controls were GridViews I could easily get this working but it's not.
I can't seem to find a working combination of ScrollViewer with a Grid or Stackpanel to get the actual full Horizontal Scrolling working.
Any idea's or examples on how to create such a landing/hub page with different controls in one horizontal page?
You can use an GridView that is not grouped where each item will be a different control displayed using a different DataTemplate.
Or you can trick the FlipView to behave like a Panorama control for Windows Phone. Details at http://dotnetbyexample.blogspot.cz/2012/08/a-winrt-behavior-to-turn-flipview-into.html
EDIT:
For the first solution you create a base class and create a list with your different objects derived from the base class. Then you use the GridView's ItemTemplaceSelector to select a select an appropriate DataTemplate. See http://coding.kulman.sk/using-different-data-templates-with-gridview-in-windows-8-apps/
Related
I have a UWP app that I am working on, and using absolute position creates problems when using the app on screen sizes different than the one it was designed for.
I'm not sure how exactly i should place elements at distances from each other without using margin and absolute position. How should I be doing this?
Edit: I am using XAML to design the UI.
Well, it depends on what UI you want to build up.
There are various panels and, usually, there is NO need to use absolute position in most cases.
Usually, the Grid panel is used to create flexible layouts, by adding rows and columns: for example, if you want to create a page with some content and a bottom app bar with buttons on it, you usually create a Grid with as many rows as you need for your content controls, plus one for the bottom appbar itself.
Years ago, I also started building UIs by using absolute position for every element, but then times passes and you start having a flexible mind in order to build flexible layouts.
Sorry to not answer any further, but your question is just TOO broad to give any precise answer.
Best regards
How do you properly position elements in XAML without using absolute position?
You should use an appropriate layout panel:
Layout panels are containers that allow you to arrange and group UI elements in your app. The built-in XAML layout panels include RelativePanel, StackPanel, Grid, VariableSizedWrapGrid, and Canvas.
I am creating a UWP app and I am using the VariableSizedWrapGrid control. I am binding the Width of the a ComboBox in the grid to it the ComboBox width resizes based on the entries in the list. ( I am using a simple property exposed through my view model.) When I had the items in a StackPanel with a Horizontal orientation it worked fine. See picture below
The challenge of course is that on a smaller screen I need the fields to wrap around. So I switched the StackPanel to a VariableSizedWrapGrid. However, when I do that, the Grid does not seem to be handling the resizing of the ComboBox correctly as I get what is shown below. (See the ComboBox is now cut off
Any suggestions on how to resolve this would be greatly appreciated.
You are using the wrong Panel for the job. The one you're looking for is a WrapPanel (which doesn't exist actually though), but there are some implementations available, eg.: http://codepaste.net/8gr5go
I have a lot of UserControls placed on my Page. All of them are in grid rows and colums. Also there are several nested grids that contain UserControls.
But now I need to provide Snapped VisualState with these UserControls but with completely different layout.
It is easy to select inner styles for UserControls but it is not clear for me how can I change for instance Grid.RowDefinitions with 2 rows to Grid.RowDefinitions with 3 rows, change every Grid.Row property for inner UserControls and even more to replace some childs elements from one grid to another.
Is it possible to make some Template for Grid elements?
After some struggles trying to dynamically layout and restyle controls depending on view state I decided to use the template approach and simply have separate views for different... views. Basically have separate logical tree for each view and switch visibilities of these depending on view state.
I'd like to get the effect visible on the picture:
I don't think it is. A GridView already has a ScrollViewer in itself, so multiple of them does not make sense. I would try to use a single GridView with GroupStyleSelector/ItemContainerStyleSelector/ItemTemplateSelector implementations and DataTemplates to define each item. A less dynamic version might just be a ScrollViewer with Style set to HorizontalScrollViewerStyle, a horizontal StackPanel and a few VariableSizedWrapGrids - if you bind the GridView to some groups or other panels to define the content.
This looks like a good sample based on the description (though the images seem to be missing for me).
As I understand it, a Panel isn't meant to have any visible "chrome." The StackPanel, Grid and Canvas don't have any visible elements (with the exception of the gridlines, which they say are only for debugging layout.)
In my example, I am going to create a Custom Panel that uses Attached Properties to lay out its children controls. However, I want my Custom Panel to present a visible "grid" of sorts in the background. The look of the grid (sizing and positioning) will depend on the size and position of the child elements.
What are some of the ways to achieve this? Being very new to Silverlight and XAML in general, my first guess was to create a Custom Control which includes my custom panel for layout.
I think I'll be able to figure out the specific code, but I need to be pointed in the right direction in terms of what building blocks are appropriate for this scenario.
You are correct that custom Panels cannot show any extra chrome; they can only display their Children (Grid being an exception).
To do what you want to do, you could create a custom Panel which just adds extra Children to display the chrome. This would not be a good design though (since users of the Panel would see these extra items in the Children collection).
The best idea is to do what you said: create a custom Control that exposes a Children property. This control could internally use a private custom Panel to lay out these elements (e.g. TabControl uses a special TabPanel for laying out the tabs). In the Controls default template, you might want to use TemplateBinding on the Panels' Children property to your Control's Children property.
Panel can add Adorners to its children, read this article about adorners: http://msdn.microsoft.com/en-us/library/ms743737.aspx