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

Answer 1

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.

Answer 2

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

Answer 3

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.