I have a basic Panorama where I have set a style to adjust the App Title, but I would like to adjust a few other things but I don't know what the settings are - or how to find them.
Ideally I'd like the Title not to scroll but I can live with that. The main things I would like to do is make the gap between the header item titles less and also reduce the gap between the headers and the content below them.
Hopefully the screenshot shows what I mean clearly enough.
Related
I have a Template10 UWP application that I am developing, and for the most part everything is coming together nicely. However, I am a little stumped about the behavior of the PageHeader control when an AppBarButton has a Label set.
As you can see in the shot below, the header does not show the Label under the displayed Icon.
But when I click on the ... to expand the SecondaryCommands, the height adjusts to accomodate the Label and the dropdown menu is displayed properly. Is there a way to set this as the default behavior of the PageHeader and have the back arrow and title be vertically centered? It looks a little odd once the header expands and the title is still top aligned.
EDIT
I would like to note, that simply changing the VerticalAlignment of the PageHeader does not change this behavior at all. The result still looks the same. I thought perhaps if I changed the alignment then I would just have to manually set the Height. Also, even manually setting the Height doesn't change anything either, the Background stays the same height and the text doesn't move either.
EDIT 2
Sorry for the poor scaling, but here is what it looks like animated, for the most part:
I am hoping to vertically align the back arrow, Invoice Details, the AppBarSeparator, and the ellipses. The AppBarSeparator is easy, I just added VerticalAlignment="Center" and it adjusts. What I'm looking for is the expanded version of the header, with the mentioned items centered, that doesn't change height when clicking the ellipses.
I've looked through the source code for Template 10, and the closest thing I can find is the IsOpen property on PageHeader but if I set that to True then the header just looks like the second picture with the menu expanded. I am just looking for something to make the header look expanded, but without the menu (and stay expanded when menu appears, etc.)
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.
The WP responsive theme I'm working on:
http://www.wpexplorer.me/tetris/
I use Firebug for Firefox browser addon thingy to make changes before messing with the actual files. So if you have it or something similar, you will see that by adding position:fixed; to the #header section the header width shrinks well more than half its original size and the navigation menu is jacked up within the new shrunken space.
I have added other snippets of coding to the #header section like width:100%;, width:959px; and other percentages and pixels, which messes up the layout; especially when you resize the window down to what you would consider to be for a tablet and a mobile device - it's all out of whack. I can't get the sticky header for this theme to function or do right. Oh, I've also added z-index:200; to the #header section and margin:160px 0; to #main-content; these don't give me issues.
Adding the width: ; code to the #main-content doesn't seem to help either (which I read somewhere online that this was where the width code goes).
Anyway, does anyone know what code I need to make the header of this theme scroll up until it gets to the top of the page where it becomes sticky/static/fixed/on top (whatever the real term for it is) at all times? And, can you get it to work with the layout being in tact when the window is resized all the way down to the size of a mobile device?
Thanks.
This should work
#header-wrap{position:fixed;top:0;z-index:999;}
#pre-header{margin:20px 0 15px;width:960px;}
#main-content{margin:215px 0 30px;}
The position is fixed at the top using 0 with a z-index:999 you then need to set the width of the inner container pre-header 960px to match the rest.
You will need to setup the media queries for the other sizes you have setup. Easy, and Enjoy.
If you want the menu itself and not the social icons to become the top fixed bar without the social icons then you want to make a jquery scroll CSS change so that the #header becomes the fixed position.
It working with fixed header and social:
An illustration of it working without the social bar using a Jquery Scroll CSS change:
This is the way I would do it, I would move the menu down, and add the social icons to the menu itself. (Below is a screenshot of what I mean, the social icons are reduced to 75%)
PS. The social icons stand out to much so I would add a CSS3 Greyscale, and when the visitor hovers over them it turns on the color with a transition effect.
Hope this helps ;)
I know the title is a little confusing, but the best way to describe what I'm after is by running the Weather metro app on the Consumer Preview; as you scroll horizontally, you'll note that the section headings kind of move around and stay on top of the relevant content, and then fade out as you cross over into a new section. (The main background for the first section also kind of does this)
My question is, how would I go about replicating this behavior in a WinRT app of my own? Are there any existing controls I can leverage or would I have to essentially rewrite it all?
This looks just like a ScrollViewer - you would handle the ViewChanged event and depending on the scroll offset - change the opacity of overlaid static TextBlocks and completely hide the ones that scroll once you cross specific tresholds. I don't think there is anything like that that does it, but I can build it.
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).