Проблема макета приложения UWP Xbox из-за того, что пользовательский интерфейс разрывается с безопасной областью телевизора

Question

Моя компоновка приложения UWP Xbox работает нормально, не включая отключенную безопасную область телевизора, и после включения она обрезается. Как я могу это исправить?

На первом изображении приложение отлично работает без телевизионной безопасной зоны и во втором макет приложения прекрасно сочетается с безопасным телевизионным пространством Это мой макет, который содержит меню и страницу с подробностями.

<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>

Answer 1

Проблема здесь в том, что вы используете абсолютные значения для определения размеров всех элементов, таких как Grid столбцы и StackPanel элементы. Это проблема, потому что тогда система просто вычисляет соответствующее количество пикселей путем умножения на коэффициент масштабирования экрана и отображает результат, не учитывая ничего другого.

Правильным решением будет использование относительных значений вместо абсолютных. XAML здесь очень полезен - например, в случае Grid вы можете определить столбцы следующих размеров:

• Width="Auto" - это позволяет дочерним визуальным элементам решать, сколько места им требуется, и делает столбец настолько широким, насколько это действительно необходимо

• Width="*" - символ звездочки является подстановочным знаком, то есть «единицей» оставшегося пространства. Это довольно гибко, так как Grid проверяет все определения столбцов, суммирует значения «звездочки» и затем распределяет все оставшееся пространство после размещения Auto и абсолютных столбцов среди звездочек, например, если вы хотите отобразить четыре столбца, в которых первый имеет абсолютный размер 120 эффективных пикселей, а остальные три имеют размеры в соотношении 2: 3: 5, тогда вы сделаете следующее:

Использование звездных столбцов и Auto столбцов гораздо более уместно в приложениях UWP, поскольку приложение должно масштабироваться до экрана любого размера, а относительные размеры масштабируются намного легче, чем жестко заданные размеры пикселей.