locked
Direct2D and XAML app with multiple pages

    Question

  • Hi,

    I am using the Win8 C++ Direct2D XAML template in VS2012 Express. I put a button control inside SwapChainBackgroundPanel, on the button_click , page navigation always return an error.

    1) Is SwapChainBackgroundPanel the root control and not support page navigation ?

    2) I have checked other page navigation samples, they don't use SwapChainBackgroundPanel at all.

    Please help to suggest a workaround for a multi-page Direct2D XAML application, if possbile , provide or direct me to a multi-page Direct2D XAML sample/tutorial, thanks.

    Wednesday, January 02, 2013 2:32 AM

All replies

  • Hi,

    SwapChainBackgroundPanel does not support Navigate. You should set it as content.
    For detail steps, please check
    http://social.msdn.microsoft.com/Forums/pl/wingameswithdirectx/thread/b5973bfc-88b4-4018-b02f-f442bf74b967

    And
    http://msdn.microsoft.com/en-US/library/windows/apps/hh825871

    Best regards,
    Jesse


    Jesse Jiang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, January 03, 2013 4:59 AM
  • Hi Jesse.

    I share the same problem with the above poster. I followed the steps on the first link you posted and I am still getting the exception and the code looks identical to the one in it.

    This is my OnLaunched method from App.xaml page

    void App::OnLaunched(LaunchActivatedEventArgs^ args)
    {
    
    	Window::Current->Content = ref new DirectXPage();
    	Window::Current->Activate();
    }

    My navigation event in DirectXPage

    void Direct2DApp2::DirectXPage::btn_Start_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	this->Frame->Navigate(TypeName(Test::typeid));
    }

    And part of my xaml from DirectXPage

    <Page
    ...
        <SwapChainBackgroundPanel x:Name="SwapChainPanel" PointerMoved="OnPointerMoved" PointerReleased="OnPointerReleased">
            <TextBlock x:Name="SimpleTextBlock" HorizontalAlignment="Center" FontSize="42" Height="72" Text="Hello, XAML!" Margin="0,0,0,50"/>
            <TextBlock x:Name="SimpleTextBlock2" HorizontalAlignment="Center" FontSize="42" Height="72" Text="Hey" Margin="0,0,0,100"/>
            <Button x:Name="btn_Start" Content="Start" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="648,294,0,0" Click="btn_Start_Click"/>
            <TextBlock x:Name="txtBlock_Info" HorizontalAlignment="Right" TextWrapping="Wrap" Text="By Me" VerticalAlignment="Top" FontSize="26.667" Margin="0,522,53,0"/>
        </SwapChainBackgroundPanel>
    
    ...

    Any help of suggestion will be appreciated.

    Thanks.

    Friday, January 04, 2013 4:08 AM
  • Hi,

    On the XAML / Windows Runtime side, the SwapChainBackgroundPanel type will enforce that it can only be used at the root of a visual tree. That means you can't position a SwapChainBackgroundPanel within a Grid, can't add SwapChainBackgroundPanel to a UIElementCollection that contains other UI elements, and so on.

    Best regards,
    Jesse


    Jesse Jiang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    • Edited by Jesse Jiang Monday, January 07, 2013 6:25 AM
    • Proposed as answer by Jesse Jiang Tuesday, January 08, 2013 7:54 AM
    • Marked as answer by Jesse Jiang Wednesday, January 09, 2013 1:56 AM
    • Unmarked as answer by ErikS2 Wednesday, January 09, 2013 2:44 PM
    Monday, January 07, 2013 6:24 AM
  • Hi Jesse,

    I know that SwapChainBackgroundPanel is the root. The question is still un-answered.

    Please help to suggest a workaround for a multi-page Direct2D XAML application, if possbile , provide or direct me to a multi-page Direct2D XAML sample/tutorial, thanks.

    Wednesday, January 09, 2013 2:46 PM
  • Here is a sample code, hope it can help you
    http://code.msdn.microsoft.com/windowsapps/Direct2D-lighting-effects-e0801da3

    Best regards,
    Jesse


    Jesse Jiang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, January 10, 2013 9:53 AM
  • Your link is a single page Direct2D and XAML app.

    I am wondering, is it the limitation of Direct2D and XAML app ?

    I have spent many days to find a multi-page solution, but still cannot get an answer. I am going to give up.

    Friday, January 11, 2013 3:18 PM

  • I have spent many days to find a multi-page solution, but still cannot get an answer. I am going to give up.

    This is my solution (a bit hacky but works):

    1) In App.xaml.cs add:

            public Frame RootFrame;
            public GamePage GamePage;

    2) Replace App.xaml.cs OnLaunched() method with:

                // Create a Frame to act navigation context and navigate to the first page
                RootFrame = new Frame();
                RootFrame.Navigate(typeof(BlankPage1));
    
                // Place the frame in the current Window and ensure that it is active
                Window.Current.Content = RootFrame;
                Window.Current.Activate();

    3) In BlankPage1.xaml.cs in button event handler place:

                var app = App.Current as App;
    
                // Create a main GamePage
                if (app.GamePage == null) app.GamePage = new GamePage(string.Empty);
                
                // Place the GamePage in the current Window
                Window.Current.Content = app.GamePage;

    4) In GamePage.xaml.cs in button event handler place:

    var app = App.Current as App;
    
    //Place the frame in the current Window
    Window.Current.Content = app.RootFrame;

    This way you can still use Frame class for navigating between multiple pages and navigate to directx page when you want.

    Saturday, February 02, 2013 4:50 PM
  • Thank you Krzysztof Rachwal.

    The project was created using buili-in directx2d template which generate

    App.xml, App.xml.cpp and App.xml.h.

    I don't quite understand how to change from App.xml.cs  to App.xml.cpp.

    Can you explain more how to use App.xml.cpp and C++ to implement your hack ?

    Thanks.

    Friday, February 15, 2013 3:06 AM
  • I searched quite a bit on this topic and realized that Jesse Jiang's answer is the best way.  It just wasn't explained very well for non-pros like me... 

    So when you want to navigate to a SwapChainBackgroundPanel, instead of calling navigate, use this:

    Window.Current.Content = new SwapChainPage();
    

    That's it.  If you want to navigate back, you'll have to keep a reference to the original Frame (that used to be the content for Window.Current.Content) and set it back to the content.


    Lee McPherson

    Saturday, April 20, 2013 12:02 AM
  • This seems to work for me if I'm creating a new instance of the SwapChainPage(), but what if I want to return back to the original page? 
    Thursday, May 09, 2013 10:47 PM