locked
Put XAML controls on top of SwapChainBackgroundPanel and SurfaceImageSource

    Question

  • I am developing a XAML+DirectX application that uses SwapChainBackgroundPanel as root element of MainPage. Inside the bottom AppBar, our app uses SurfaceImageSource to display a couple of thumbnail views, just like Metro IE displays thumbnail views of the webpages. I want to implement the following two features:

    First, draw zoom-in and zoom-out buttons inside MainPage like Windows 8 Bing map application does. The Bing map draws these two buttons on the right of the page.

    Second, draw a close button on top of the thumbnail views like Metro IE does.

    Thank you.


    • Edited by Leonard Wednesday, September 18, 2013 4:38 PM
    Wednesday, September 18, 2013 4:37 PM

Answers

  • You should be able to add XAML controls on top of the SwapChainBackgroundPanel or SurfaceImageSource content in the same way as any XAML app. 

    For example, for the zoom buttons you could add Button controls as children of the SwapChainBackgroundPanel, since SwapChainBackgroundPanel arranges its children in the same way as a Grid control:

    <SwapChainBackgroundPanel>
        <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Right">
            <Button Content="zoom in" />
            <Button Content="zoom out" />
        </StackPanel>
    </SwapChainBackgroundPanel>

    For the SurfaceImageSource case, you could just arrange the layout of the AppBar content such that the close buttons draw on top of the thumbnails in the correct location.

    See these topics for more details on how to customize the look of a Button control if needed:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh465374.aspx

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.controltemplate.aspx

    Wednesday, September 18, 2013 6:45 PM