UWP Xbox app layout issue as the UI is breaking with TV safe area

Question

My UWP Xbox app layout works fine without enabling the television safe area turned off and once it is turned on it get cropped. How can I fix this?

In the first image App works fine without television safe area and in the second one App layout breaks fine with television safe area This is my layout which contains a menu and a page containing details.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="530"/>
        <ColumnDefinition Width="1390"/>
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Column="0">
        <Grid x:Name="NavigationGrid">
            <StackPanel Margin="60,50,0,0">
                <StackPanel Orientation="Horizontal" Padding="-10">
                    <TextBlock Text="Welcome, Mark" Padding="20" FontSize="36" VerticalAlignment="Center" FontWeight="Light" FontFamily="Segio Pro" Foreground="White"/>
                </StackPanel>
                <Button Content="Home" FontSize="36" FontFamily="Segoe Pro" Name="ShopBtn" Foreground="Gray" Margin="0,70,0,0" FocusVisualPrimaryThickness="0,0,0,3" FocusVisualMargin="10,0">
                    <Button.Background>
                        <SolidColorBrush Opacity="0"/>
                    </Button.Background>
                    <Button.Resources>
                        <ResourceDictionary>
                            <ResourceDictionary.ThemeDictionaries>
                                <ResourceDictionary x:Key="Light">
                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="White"/>
                                </ResourceDictionary>
                            </ResourceDictionary.ThemeDictionaries>
                        </ResourceDictionary>
                    </Button.Resources>
                </Button>
                <Button Content="Profile" FontSize="36" Margin="0,60,0,0"   Name ="WalletBtn" FontFamily="Segoe Pro" Foreground="Gray" FocusVisualPrimaryThickness="0,0,0,3" FocusVisualMargin="10,0">
                    <Button.Background>
                        <SolidColorBrush Opacity="0"/>
                    </Button.Background>
                    <Button.Resources>
                        <ResourceDictionary>
                            <ResourceDictionary.ThemeDictionaries>
                                <ResourceDictionary x:Key="Light">
                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="White"/>
                                </ResourceDictionary>
                            </ResourceDictionary.ThemeDictionaries>
                        </ResourceDictionary>
                    </Button.Resources>
                </Button>
                <Button Content="Order" FontSize="36" Margin="0,60,0,0" Name="LibraryBtn" XYFocusDown="{x:Bind SettingsBtn}" FontFamily="Segoe Pro" Foreground="Gray"  FocusVisualPrimaryThickness="0,0,0,3" FocusVisualMargin="10,0">
                    <Button.Background>
                        <SolidColorBrush Opacity="0"/>
                    </Button.Background>
                    <Button.Resources>
                        <ResourceDictionary>
                            <ResourceDictionary.ThemeDictionaries>
                                <ResourceDictionary x:Key="Light">
                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="White"/>
                                </ResourceDictionary>
                            </ResourceDictionary.ThemeDictionaries>
                        </ResourceDictionary>
                    </Button.Resources>
                </Button>
                <Button Content="Settings"  FontSize="36" Margin="0,60,0,0" Name="SettingsBtn" XYFocusDown="{x:Bind SettingsBtn}" FontFamily="Segoe Pro" Foreground="Gray" FocusVisualPrimaryThickness="0,0,0,3" FocusVisualMargin="10,0">
                    <Button.Background>
                        <SolidColorBrush Opacity="0"/>
                    </Button.Background>
                    <Button.Resources>
                        <ResourceDictionary>
                            <ResourceDictionary.ThemeDictionaries>
                                <ResourceDictionary x:Key="Light">
                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="White"/>
                                </ResourceDictionary>
                            </ResourceDictionary.ThemeDictionaries>
                        </ResourceDictionary>
                    </Button.Resources>
                </Button>
            </StackPanel>
        </Grid>
    </StackPanel>
    <StackPanel x:Name="MainFrame" Grid.Column="1" Orientation="Horizontal">
        <StackPanel Width="300" Height="1000" Background="Blue" Margin="10"/>
        <StackPanel Width="300" Height="1000" Background="White" Margin="10"/>
        <StackPanel Width="300" Height="1000" Background="Red" Margin="10"/>
        <StackPanel Width="400" Height="1000" Background="Yellow" Margin="10"/>
    </StackPanel>
</Grid>

You definitely need to post some XAML, otherwise we cannot guess what could be wrong and it could be anything... — Martin Zikmund, Nov 02 '18 at 07:43

score 0 · Answer 1 · answered Nov 02 '18 at 12:16

The problem here is that you are using absolute values for sizing of all elements like Grid columns and StackPanel items. This is a problem, because the system then just calculates the appropriate number of pixels by multiplying with the screen's scaling factor and displays the result without considering anything else.

The proper solution would be to use relative values instead of absolute. XAML is quite helpful here - for example in case of Grid you can define the columns to have the following sizes:

Width="Auto" - this will let the child visuals decide how much space they require and makes the column only as wide as actually necessary
Width="*" - the asterisk character is a wildcard, that is a "unit" of remaining space. This is quite flexible, as Grid checks all column definitions, sums the "star" values and then distributes all space remaining after laying out Auto and absolute columns among the star-based ones, as an example, if you want to display four columns where the first has absolute size of 120 effective pixels, and the remaining three have sizes in the ratio of 2:3:5, then you would do this:

Using star-based columns and Auto columns is much more appropriate in UWP apps, as the app should scale to a screen of any size and relative sizing scales much more easily than hardcoded pixel sizes.

So we do need to design the application inside the TV safe area? Whats the best practice? my application works fine once it is turned off. And while we design inside TV safe area can we give hard coded width and the application will scale itself to match different screens? and thanks for your insightful reply. — sadik, Nov 06 '18 at 05:15
The docs have a lot to say about this (https://learn.microsoft.com/en-us/windows/uwp/design/devices/designing-for-tv#drawing-ui-to-the-edge). The key is, you should avoid putting content of your app in 27epx from the edges and 48epx from top and bottom of the screen. However, my recommendation is not to use hard-coded values unless absolutely necessary, as it will mean your app will really only work on the specific screen size supported on Xbox and you couldn't use the app on desktop for example. The golden ideal is to have the app scale properly on any screen :-) — Martin Zikmund, Nov 06 '18 at 05:24
Even though we shouldn't we have to specify the layout height and width right? — sadik, Nov 06 '18 at 10:49
No, you don't have to, if you use the relative layouts like Grid, etc. If you specify it explicitly, you will again limit the app to run only on that size of the display. — Martin Zikmund, Nov 06 '18 at 10:59

UWP Xbox app layout issue as the UI is breaking with TV safe area

1 Answers1