I just recently got Windows 10 and Visual Studio 2015 and decided to try learning how to build Universal Apps. I've went through the Microsoft guides for both windows 10 and windows 8 universal apps but they don't seem to mention anything on this.
The first issue I noticed when I tested out the HelloWorld app is that if I resize the StackPanel, making it smaller and more enclosed around the items it contains, to a certain point it covers the items up during runtime despite the fact the StackPanel border does not cross over anything.
The other issue (semi-related to the StackPanel issue) has to deal with item placement. In all the GUI work I've done, item placement never seemed to be an issue. If I needed to work on the right side of the UI or center something in a small window I could do so. It seems like in general that the placement of items in the .xaml design windows doesn't reflect what it looks like in runtime. If I try to center the HelloWorld StackPanel contents (with the StackPanel resized or not), it will only look like it at runtime if I maximize the window (if not 50 pixels off). So does this mean that all universal app UIs need to be built starting from the top left?
xaml code:
<StackPanel Margin="120,30,0,0">
<TextBlock HorizontalAlignment="Left" Text="Hello World" FontSize="36"/>
<TextBlock Text="What's your name?"/>
<StackPanel Orientation="Horizontal" Margin="0,20,0,20">
<TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
<Button Content="Say "Hello""/>
</StackPanel>
<TextBlock x:Name="greetingOutput"/>
</StackPanel>
I just pasted this in the code block, this is all straight from the hello world for windows 10 universal apps tutorial. I never made any changes in the code itself, I simply changed things with UI designer.
Ideally you should post your XAML, but from the screenshot I can see that you're relying on setting the Margin
- I assume you dragged-and-dropped the control on the designer, and used the UI to perform layout. The better approach is to use the HorizontalAlignment
and VerticalAlignment
properties to layout your UI in the way you want, and rely on Margin
for actual "margins" (extra whitespace around the control).