locked
Horizontal to vertical orientation

    Question

  • Hi,

    I have a horizontally arranged app with a Grid and 3 columns.  Each column has different elements: col1: CaptureElement, col2: MediaElement, col3: webview.  But I want to be able to adapt to vertical if snapped or rotated.  

    Most examples have a GridView (horz) and ListView (vert).  But GridView and ListView contain identical elements with single template.  All my elements are different.  So how to handle the horz<-->vert transition?  Can I add different kinds of elements to GridView and ListView?  Or should I use a Grid for the vertical as well as horz?


    SAP

    Saturday, March 02, 2013 9:06 PM

Answers

All replies

  • Hi,

    We cannot change the orientation of a gird, but we can change the container like StackPanel

    We can use SizeChanged event.

    Window::Current->SizeChanged += this->WindowSizeChanged;
    
    
    void MainPage::WindowSizeChanged(Platform::Object^ sender, Windows::UI::Core::WindowSizeChangedEventArgs^ e)
    {
    	ApplicationViewState viewState = ApplicationView::Value;
        if (viewState == ApplicationViewState::Filled)
        {
    		mystack->Orientation=Windows::UI::Xaml::Controls::Orientation::Horizontal;
        }
        else if (viewState == ApplicationViewState::FullScreenLandscape)
        {
            
        }
        else if (viewState == ApplicationViewState::Snapped)
        {
    		mystack->Orientation=Windows::UI::Xaml::Controls::Orientation::Vertical;
        }
        else if (viewState == ApplicationViewState::FullScreenPortrait)
        {
           mystack->Orientation=Windows::UI::Xaml::Controls::Orientation::Vertical;
        }
        else
        {
          
        }
    }

    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.

    • Proposed as answer by Jesse Jiang Thursday, March 07, 2013 2:10 AM
    Monday, March 04, 2013 6:15 AM
  • Hi Jesse,

    What I mean is something like this:

    <Grid x:Name="HorzGrid" Visibility="Visible"/>
    <Grid x:Name="VertGrid" Visibility="Collapsed"/>
    ...
    // In code
    if ( snapped mode )
    {
        HorzGrid->Visibility="Collapsed";
        VertGrid->Visibility="Visible";
    else
    {
        HorzGrid->Visibility="Visible";
        VertGrid->Visibility="Collapsed";
    }
    Is this a workable solution or is there a better way?



    SAP

    Monday, March 04, 2013 6:35 PM
  • Yes, it should work, but you need put two Capture, MediaElement and WebView into two gird.

    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.

    Tuesday, March 05, 2013 2:15 AM