How to fill WinRT/XAML paragraph with variable height element? - xaml

Suppose I have a RichTextBlock with 2 paragraphs. The second paragraph is just some text. The first paragraph is a FlipView with images like a slideshow. What properties on the <Paragraph> or the <InlineUIContainer> or the <FlipView> should I set so that if the FlipView's images have different heights, the second paragraph text would move to stack just underneath the image in the FlipView?

I don't think you can with a FlipView.
The FlipView will have a rectangular clipping to make sure none of the other items appear in the view box. The dimensions (width/height) of this view box are based on the values you explicitly set, or chosen by the parent container. They do not change based on the images inside the FlipView.

Related

Animate NSTextField Alignment

I'm trying to emulate the functionality of the Safari url text field (using NSTextField). I'd like the current text to be displayed centered, but when the user clicks on it the text should highlight and slide to the left. I've got the highlighting working but I'm not sure how to go about animating the text over to the left. Is it possible to animate the Alignment property or would I need to do some sort of custom drawing where I animate the position that the text is drawn?
Unfortunately this (Is there a way to animate changing a UILabel's textAlignment?) won't work, since a text field draws a background and border so animating the frame isn't an option.

How to handle Segoe UI in pixel perfect layout (glyph "margin")

i am fighting with the layout of my windows store app. My problem is with the segoe ui font that I am using for the labels of some textboxes.
I have a borderless label above a textbox with a border like this:
LABEL
_____________
|__TEXTBOX___|
My problem is, that the font of the label does not align perfectly with the left border of the textbox.
First I though that it must be the label padding or something, maybe a padding or margin in the control template. But this is not the case. The true reason is the space around the glyphs within the font itself. Depending on the first letter or the size of the font the gap is bigger or smaller.
Is there a way to perfectly align the label text and the textbox independant of the first letter or the font size? Or do I really have to place every label in a different position to reduce this problem?

Make a vector path in xaml responsive

I have a canvas that is within a page in XAML that contains some paths from an .ai document. I would like this to be responsive and have resize according to the proportions of the grid that it is contained on. How?
Okay I fixed it myself. Replaced the canvas with a grid, then enclosed that grid in a viewbox. All paths under the canvas now has horizontal and vertical alignment set to left and top respectively, and its Canvas.Left and Canvas.Top values are now replaced by a margin reflecting these values.

Resize buttons styled with AppBarButtonStyle

I like the AppBarButtonStyle idea of using font character as button icon because of its scaling abilities, but it is of no use if i cannot resize them properly.
Changing Width or Height of button does not work, because AppBarButtonStyle only resizes padding between button icon and button borders. Changing FontSize of button does not work either.
Is there any way of resizing buttons styled with AppBarButtonStyle in WinRT application? I dont mind if i have to override or modify AppBarButtonStyle, as long as it preserves the ability to use font character as button icon.
Any useful advices will be appreciated!
You can easily create your own custom button from AppBarButtonStyle from the original in the standardstyles.xaml .
I did so to create a custom smaller button with no text and the only hard part was aligning everything: you're not adding shapes, you're adding a character, so it may not be as aligned as you think. Default Buttons contain 3 charatctes: outline, fill and glyph.
If you want, I can share my simplified code for the control.

Overlapping controls - Canvas.ZIndex not working

Background:
For my Windows Phone application, I have created a UserControl called CharacterPresenter (let's call it CP, for short). This is a small rectangle with a Border control which I can toggle between PhoneAccentBrush and Transparent so the user can see when it is selected.
I have created a second UserControl called MultiCharacterPresenter (MCP). This contains a horizontally-oriented StackPanel to display multiple CP controls on a single line. This too has a Border control so the user can see when the whole line is selected.
Note that only one *Presenter can be selected at any time and all BorderThickness="6".
Requirement:
I can't have a 12px. gap (caused by the Transparent Borders) between each CP so I set the Border Margin="-6,-6,-6,-6". This puts the Border outside the rectangle bounding the CP UserControl and allows the CP controls to form one continuous line inside the MCP.
So then, when a CP is selected, the Border overlaps the neighbouring CP controls. That's fine since the selected CP has the user's focus so it's OK that other CP controls may be partially obscured.
Problem:
The issue is that the right-side of the Border of each CP is underneath the next CP on the right. Only the right-most CP shows a complete border. I want the whole Border to show when a CP is selected but it is partially hidden.
Non-solution:
I tried setting the Canvas.ZIndex of all the Border controls to 1 (while the default for all other content is zero) which should put the Border controls on top of everything else... but that didn't work. I'm not sure why.
If it makes a difference, I'm adding the CP controls one-by-one to the MCP in code, based on the data. So perhaps the ZIndex only works when all the controls are rendered at the same time, e.g. if they are already present in the XAML (not added programmatically).
Any ideas?
The layout of controls contained in any Panel relative to each other is defined by the Panel itself. In your case you're using a StackPanel, which has no concept of Z-index. It lays out items in the order that they are added to its Children collection. The ZIndex attached property you're using is defined on Canvas because it is used by the Canvas panel as part of its layout process.
Why don't you try changing the BorderThickness to 0 instead?