UWP: Only a small horizontal band of XAML control is visible

Question

This is most certainly the most confusing thing I have encountered while programming as of yet. For some unknown reason only a small horizontal band of the XAML controls (in this case a Button (the one furthest up) and a TextBlock) is visible and if the application is not in fullscreen, nothing can be seen! On the other hand, the Button to the left (the one furthest down in the code), which is a pure copy of the one you get via the Visual Studio "Toolbox" under "Common XAML Controls", works fine!

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button x:Name="button" Content="My button name" Height="77" Margin="809,198,0,805" Width="353"/>
    <TextBlock x:Name="textBlock" Height="83" Text="An example...." Margin="809,428,0,0" Width="353" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    <Button x:Name="button1" Content="Button" HorizontalAlignment="Left" Height="117" Margin="542,327,0,0" VerticalAlignment="Top" Width="156"/>
</Grid>

The file containing the three XAML controls is the only file that have been changed, otherwise it is simply the default Blank UWP in Visual Studio. I am using the Desktop (1920 x 1080) format.

In light of what I have written previously, could someone please tell me what I can do to fix this because I am utterly clueless.

Answer: After having fooled around with another project exhibiting similar problems I stumbled upon a solution. The problem is that for some reason or another the XAML controls do not work properly if the the margin on the opposite side is not 0 (top vs bottom, right vs left). In order to still be able to specify the position of the XAML control HorizontalAlignment and VerticalAlignment has to be added and the orientation be the same as the parameter you input into the Margin. Therefore, if you have specified the right Margin for it, you must also set the HorizontalAlignment to right as seen below. The Opposite can also be done.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button x:Name="button" Content="My button name" Height="77" Margin="0,0,500,900" Width="353" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
    <TextBlock x:Name="textBlock" Height="83" Text="An example...." Margin="809,428,0,0" Width="353" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    <Button x:Name="button1" Content="Button" HorizontalAlignment="Left" Height="117" Margin="542,327,0,0" VerticalAlignment="Top" Width="156"/>
</Grid>

Get rid of all those hard set Margin's and use Grid the way it's supposed to be used. Show us what you want it too look like and we'll help ya out. :) — Chris W.
Margins's are your enemies here. Remove Margins. You should see difference. — AVK
Please don't post XAML code as a screenshot. It's neither readable (without explicitly opening the image), nor are images searchable. — IInspectable
Ha ya, @AVKNaidu I think are saying the same thing dude, just show us what you want and someone will give you a proper example, I'd trust his answer as much my own most likely either way...this is a simple fix either way. — Chris W.

Chris W. Chris W. · Accepted Answer · 2017-02-07T20:29:44

So I'm not sure what you mean by a class to allow it. Some dependency properties of the controls used is all you need. So try this. Literally took less than a minute and ask if you have questions. There's a lot of different ways to do the same thing depending on your style/habits, this is just one.

output:

snippet:

<!-- We have a bit of a margin on the parent for spacing 
     and shrink the space to what's necessary. -->

<Grid Background="White" Margin="10,10,20,10"
      VerticalAlignment="Top">
    <Grid.RowDefinitions>
        <!-- Let's let our odd # rows do our spacing instead of random margins -->
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="10"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="10"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="10"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="10"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="4*"/>
        <ColumnDefinition Width="6*"/>
    </Grid.ColumnDefinitions>
    <Grid.Resources>
        <!-- So we don't set the same properties on every instance. -->
        <Style TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
            <Setter Property="HorizontalAlignment" Value="Right"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="5"/>
        </Style>
    </Grid.Resources>

    <TextBlock Grid.ColumnSpan="2" Text="Exaaaaaaamples"
               HorizontalAlignment="Center"/>

    <TextBlock Grid.Row="2" 
               Text="Email:"/>
    <TextBox Grid.Row="2" Grid.Column="1"/>

    <TextBlock Grid.Row="4"
               Text="Username:"/>
    <TextBox Grid.Row="4" Grid.Column="1"/>

    <TextBlock Grid.Row="6"
               Text="Password:"/>
    <PasswordBox Grid.Row="6" Grid.Column="1"/>

    <TextBlock Grid.Row="8"
               Text="Age of Account:"/>
    <TextBox Grid.Row="8" Grid.Column="1"/>

</Grid>

Hope this is inline with what you're looking for, if not say so and we'll get you sorted. :)

UWP: Only a small horizontal band of XAML control is visible

1 Answers