Content wider than page which scrolls horizontally in WinRT App - xaml

How could I achieve a page layout in which I could scroll horizontally to the right, to display a content on the page that is wider than the page itself? Something very similar to the "Store" App...
Tried scrollviewer encasing stackpanel, grids or others and no result. I looked at the samples that are generated from the Store project templates but those are also different. I guess it shouldn't be so hard but can't figure it out...
I'm trying to obtain something like this :
I want to display a content, divided into columns, which continues from a column to another. Tried also with WrapGrid, but no success... Any ideas or suggestions are greatly appreciated, thank you.

If you are going implement something similar to Article view, please read this page News apps on MSDN. It gives you information about what should you use to build apps like News apps, check the Your app's article view part:
For more info about best practices for fonts, such as size, color, and
weight, see Guidelines and checklist for text and typography
(JavaScript) or Displaying and editing text (C#/VB/C++). In Windows
Store apps written using XAML, you can use the RichTextBlock and
RichTextBlockOverflow controls to manage text overflow. For an
example, see XAML text display sample.

Related

Horizontal scrollable table that is responsive

people,
I am currently trying to create a horizontally scrollable table (filled with pictures) where my content (img with some p) always fitts the screen. This means the height of the content has to adapt depening on your screen resolution or ideally also when browsing from a mobile device... I've tried a lot with HTML and CSS and actually thought this should be an easy task, but I just can't get it to work properly :(
I'd really appreciate some help. How'd you do this?
Thanks in advance!

How do you properly position elements in XAML without using absolute position?

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.

Transparent frame in windows phone 8 / XAML

I have two frames, main.xaml and target.xaml. I navigated to target.xaml from main.xaml. target.xaml has some content in a little square. Now I want that besides this square the rest of the area(of target.xaml frame) should be transparent(It should show main.xaml). I could not found any solution. Please help me. Are "opacity" or something like "isFullScreen" can help ?
Caution: You need to use the correct types here: main.xaml and target.xaml are probably a Page, not a Frame.
If you really have to use a transparent Page, then you need to retemplate the Frame which presents the Pages.
I think you better use a Popup or simply a Control to achieve what you want.

Content control for complex layout

I start to learn winrt so I have question regarding containers in xaml.
I want to have on main screen of my app a set of different custom controls, but i want to have such interface like in Gridview (Horizontal scrolling, names for groups).
Yes, I can use GridView with different templates per item. But it's not a good solution.
For better explanation please review my picture. It's my goal.
How can I do this? Should i write some kind of custom GridView or there is already such or similar controls?
Thank you!
You can achieve this by using the following:-
-Scroll Viewer
- StackPanel (orientation horizontal)
-Grid view
-User Control
-...
If you are targeting 8.1 then you can use the new hubs which are designed exactly for the described scenario.

How to make a aspect-ratio preserving resizable div with only css or webkit vendor-specific css

I'm making a Chrome web app using the flexible box model, but I've gotten stuck on a (horizontal) scrollable window where I have a whole bunch of featured items.
I want to make the featured items have a constant aspect ratio, but I want them to be able to size with the rest of the page. The space that the featured items take up is 30% of height.
Any ideas to get this done? ( I can provide more information, but I'm just not where sure to start. Add a comment if you need more info and I'll edit this question).