UWP Xbox应用程序布局问题，用户界面与电视安全区中断

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

---

这里的问题是，您使用绝对值来调整所有元素的大小，如

网格

列和

堆栈面板

项。这是一个问题，因为系统只是通过乘以屏幕的比例因子来计算适当的像素数，并在不考虑任何其他因素的情况下显示结果

正确的解决方案是使用相对值而不是绝对值。XAML在这里非常有用-例如在

Grid

的情况下，您可以定义列的大小如下：

• Width=“Auto”

  -这将让子视觉对象决定他们需要多少空间，并使列的宽度仅与实际需要的宽度相同

• Width=“*”

  -星号字符是一个通配符，即剩余空间的“单位”。这是非常灵活的，因为

  Grid

  检查所有列定义，对“星”值求和，然后在基于星的列中布局

  Auto

  和绝对列后分配所有剩余空间，例如，如果要显示四列，其中第一列的绝对大小为120个有效像素，剩下的三个尺寸是2:3:5，那么你可以这样做：

---

在UWP应用程序中，使用基于星型的列和

Auto

列更合适，因为该应用程序应该比硬编码像素大小更容易缩放到任何大小的屏幕和相对大小缩放。

您肯定需要发布一些XAML，否则，我们无法猜出什么可能是错误的，它可能是任何东西…我已经添加了xaml。所以我们确实需要在电视安全区内设计应用程序？最佳做法是什么？我的应用程序关闭后工作正常。当我们在电视安全区内设计时，我们能给出硬编码的宽度吗？应用程序会自动伸缩以匹配不同的屏幕吗？谢谢你富有洞察力的回复。关于这一点，医生们有很多话要说（）。关键是，你应该避免将应用程序的内容从屏幕边缘放到27epx，从屏幕顶部和底部放到48epx。然而，我的建议是，除非绝对必要，否则不要使用硬编码值，因为这意味着你的应用程序实际上只能在Xbox支持的特定屏幕大小上工作，例如，你不能在桌面上使用该应用程序。黄金理想是让应用程序在任何屏幕上都能正确缩放：-）即使我们不应该我们必须指定布局的高度和宽度，对吗？不，如果你使用网格等相对布局，你不必这样做。如果你明确指定，你将再次限制应用程序仅在该尺寸的显示器上运行。