Loading Device Specific UI using InitializeComponent()

Question

When writing device specific XAML using UWP, we can create different XAML views for each device family. For example, Track.DeviceFamily-Xbox.xaml. This page uses the same back-end as Track.xaml but will load when using the app on Xbox.

We can also pass in a URL to the InitializeComponent() method to load a specific xaml page.

Now I'm wondering if I can combine these methods together. In this example, I would like the load the Xbox UI when fullscreen. The following code would be the ideal way of doing it, but.. well I'm here, so it does not work :)

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

Has anyone got any ideas with what I can do? Is there a way to load the Xbox specific view, or should I just create XAML view, call it TrackXbox.xaml, and then handle loading that view when the user is full screen or running on the Xbox?

score 1 · Answer 1 · answered Jan 24 '17 at 05:38

Okay So what you're trying to do might not be possible but what's the way to implement this kind of functionality is:

For Device specific views, use multiple folders of device family and add a XAML view in it. The compiler automatically loads the xaml from the folder and the codebehind from the normal view. More information about this here.

But what you want is to switch between multiple views on app resize so what you can do is use VisualStates something like below:

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

and now when you want to switch between multiple views in the same device family, what you can do is from c# in codeBehind

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

more information about switching visual states here.

Sorry for the delay, have been quite busy. I am unable to easily apply the Visual State method due to the XAML being very different for Xbox and PC. But thanks for the help! — Dominic Maas, Jan 29 '17 at 22:13

Loading Device Specific UI using InitializeComponent()

1 Answers1