locked
Adaptive layout on windows 8.1, windows phone 8.1, and windows 10 RRS feed

  • Question

  • How do I create adaptive layouts in Windows 8.1, Windows phone 8.1, and Windows 10 using the background image and the image button? And how to make the portrait and landscape orientation using background images and image button? Can you provide a sample?
    Thursday, October 29, 2015 2:33 AM

Answers

  • Hi Priscillia,

    In Windows Runtime app we can handle this SizeChanged Event to detect the screen orientations, I have created the following example about using different background image for the landscape orientation and portrait orientation, please try to refer to:

    public MainPage()
            {
                this.InitializeComponent();
                this.SizeChanged += MainPage_SizeChanged;
                this.NavigationCacheMode = NavigationCacheMode.Required;
            }
    
            void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                string CurrentViewState = ApplicationView.GetForCurrentView().Orientation.ToString();
                if (CurrentViewState == "Portrait")
                {
                    ImageBrush test = new ImageBrush();
                    test.ImageSource = new BitmapImage(new Uri("ms-appx:///images/bg-table2-NASGOR-768x1366.png"));
                    MyGrid.Background = test;
                }
    
                if (CurrentViewState == "Landscape")
                {
                    ImageBrush test = new ImageBrush();
                    test.ImageSource = new BitmapImage(new Uri("ms-appx:///images/background-prakata.png"));
                    MyGrid.Background = test;
                }
    
            }
    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Friday, October 30, 2015 7:41 AM
  • Hi Priscillia,

    One workaround for this issue is to create two stackpanels portraitStackpanel and landscapeStackPanel to implement the above layout. Then when the application is in the portrait orientation, the portraitStackpanel will be visible and landscapeStackPanel will be hidden. When the application is in the landscape orientation, the portraitStackpanel will be hidden and landscapeStackPanel will be visible.

    Or you may try to change the Layout manually in SizeChanged event by detecting the current orientation.

    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Thursday, November 5, 2015 8:14 AM

All replies

  • Hi Priscillia,

    Welcome to the Developing Universal Windows apps forum!

    As a friendly reminder please make sure to add the appropriate tags to the title of your post as per Guide to posting: subject line tags

    What do you mean about making the portrait and landscape orientation using background images and image button? Could you please describe more about your question?

    Besides, please also try to refer to the following articles about how to ceate the adaptive layout:
    #Working with Adaptive Layout:
    https://channel9.msdn.com/Series/Windows-10-development-for-absolute-beginners/UWP-038-Working-with-Adaptive-Layout .
    #Building adaptive layout in Windows 10 with RelativePanel and AdaptiveTrigger :
    http://blog.galasoft.ch/posts/2015/04/building-adaptive-layout-in-windows-10-with-relativepanel-and-adaptivetrigger/ .

    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Friday, October 30, 2015 5:31 AM
  • My intention is to create an application that supports landscape and portrait orientation, but the background using the image and included a button image. And I also wish that my application can adjust the size of the screen orientation

    Sample: 

    https://drive.google.com/open?id=0B4oRSWSS0hKDVjVkSTVmTmNTT00

    Note:

    background for landscape orientation is background-prakata.png, while the portrait orientation is bg-table2-NASGOR-768x1366.png


    • Edited by Priscillia Friday, October 30, 2015 6:48 AM
    Friday, October 30, 2015 6:46 AM
  • Hi Priscillia,

    In Windows Runtime app we can handle this SizeChanged Event to detect the screen orientations, I have created the following example about using different background image for the landscape orientation and portrait orientation, please try to refer to:

    public MainPage()
            {
                this.InitializeComponent();
                this.SizeChanged += MainPage_SizeChanged;
                this.NavigationCacheMode = NavigationCacheMode.Required;
            }
    
            void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                string CurrentViewState = ApplicationView.GetForCurrentView().Orientation.ToString();
                if (CurrentViewState == "Portrait")
                {
                    ImageBrush test = new ImageBrush();
                    test.ImageSource = new BitmapImage(new Uri("ms-appx:///images/bg-table2-NASGOR-768x1366.png"));
                    MyGrid.Background = test;
                }
    
                if (CurrentViewState == "Landscape")
                {
                    ImageBrush test = new ImageBrush();
                    test.ImageSource = new BitmapImage(new Uri("ms-appx:///images/background-prakata.png"));
                    MyGrid.Background = test;
                }
    
            }
    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Friday, October 30, 2015 7:41 AM
  • Thanks to successful landscape and portrait orientation. But how to organize its content if the size of the screen resolution different?
    Friday, October 30, 2015 9:40 AM
  • Hi rosepink,

    >>But how to organize its content if the size of the screen resolution different?

    For the UWP app, we can use the RelativePanel and AdaptiveTrigger to help us organize its content with different screen resolution, for more information, please check my first reply.

    For the U8.1 app, I will recommend create you a auto layout by using the Grid with the "*" or "auto" height/width.

    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Monday, November 2, 2015 8:10 AM
  • How do I adjust the content if the application is in portrait or landscape orientation?
    If the application of landscape orientation, it looks like this:

    landscape

    whereas when the potrait orientation, it looks like:

    potrait

    Sample: 

    https://drive.google.com/open?id=0B4oRSWSS0hKDVjVkSTVmTmNTT00

    Monday, November 2, 2015 8:29 AM
  • Hi Priscillia,

    One workaround for this issue is to create two stackpanels portraitStackpanel and landscapeStackPanel to implement the above layout. Then when the application is in the portrait orientation, the portraitStackpanel will be visible and landscapeStackPanel will be hidden. When the application is in the landscape orientation, the portraitStackpanel will be hidden and landscapeStackPanel will be visible.

    Or you may try to change the Layout manually in SizeChanged event by detecting the current orientation.

    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Thursday, November 5, 2015 8:14 AM