使用 InitializeComponent() 加载特定于设备的 UI

Question

使用 UWP 编写特定于设备的 XAML 时，我们可以为每个设备系列创建不同的 XAML 视图。例如，Track.DeviceFamily-Xbox.xaml。此页面使用与Track.xaml 相同的后端，但在 Xbox 上使用该应用时会加载。

我们还可以将 URL 传递给 InitializeComponent() 方法以加载特定的 xaml 页面。

现在我想知道是否可以将这些方法结合在一起。在此示例中，我希望在全屏时加载 Xbox UI。下面的代码将是这样做的理想方式，但是..我在这里，所以它不起作用:)

 public Track()
 {
        // If the app is full screen, we can use the Xbox UI
        if (App.IsFullScreen)
        {
            InitializeComponent(new Uri("ms-appx:///Views/Track.DeviceFamily-Xbox.xaml", UriKind.Absolute));
        }
        else
        {
            InitializeComponent();
        }

        // etc ...    
    }

有人对我能做什么有任何想法吗？有没有办法加载 Xbox 特定视图，或者我应该只创建 XAML 视图，将其命名为 TrackXbox.xaml，然后在用户全屏或在 Xbox 上运行时处理加载该视图？

Answer 1

好的，那么您尝试做的可能是不可能的，但是实现这种功能的方法是：

1. 对于特定于设备的视图，请使用设备系列的多个文件夹并在其中添加 XAML 视图。编译器会自动从文件夹中加载 xaml，并从普通视图中加载代码隐藏。有关此here 的更多信息。

但您想要的是在应用调整大小时在多个视图之间切换，因此您可以使用VisualStates 如下所示：

 <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Normal">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="900"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <--For larger screensizes-->
                    <Setter Value="3" Target="MyDummyButton.(Grid.RowSpan)"/>
                </VisualState.Setters>

            </VisualState>
            <VisualState x:Name="Mobile">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>

                    <Setter Value="1" Target="MyDummyButton.(Grid.RowSpan)"/>
                                        </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

现在当你想在同一个设备系列中的多个视图之间切换时，你可以从 codeBehind 中的 c# 中进行操作

VisualStateManager.GoToState(this, "Normal", useTransitions);

更多关于切换视觉状态的信息here。