Question

我的UWP Xbox应用程序布局在不启用电视安全区域的情况下可以正常工作，一旦打开电视安全区域，它将被裁剪。我怎样才能解决这个问题？

在第一个图像中，App可以在没有电视安全区域的情况下正常工作，并且在第二个应用程序布局与电视安全区域配合良好这是我的布局，其中包含一个菜单和一个包含详细信息的页面。

<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检查所有列定义，对“ star”值求和，然后将Auto和绝对列布局在基于星号的列中之后分配所有剩余空间，例如，如果要显示四列，其中第一列的绝对尺寸为120有效像素，其余三列的尺寸比例为2：3：5，则可以这样做：

在UWP应用程序中，使用基于星号的列和Auto列更为合适，因为该应用程序应可缩放到任何大小的屏幕，并且相对大小的缩放比硬编码的像素大小容易得多。

UWP Xbox应用程序布局问题，因为UI中断了电视安全区域

1 个答案: