title: What is the best approach to dealing with having major runtime UI layout changes
body: <p>What is the best approach to dealing with having major UI layout changes in a single page? Something similar to how a Zoom/Google Meets UI changes when someone starts presenting - with the added complexity of having landscape and portrait mode.</p>
  <p>My approach has been to do everything in the the code behind. Then I can keep track of state and then redo the layout whenever the state changes. I have 4 states:</p>
  <ul>
  <li>Landscape Video Mode</li>
  <li>Portrait Video Mode</li>
  <li>Landscape Presentation Mode</li>
  <li>Portrait Presentation Mode</li>
  </ul>
  <p>Between each UI state change I do the following:</p>
  <pre><code>MainGrid.Children.Remove(ControlMenu);
  MainGrid.Children.Remove(RemoteVideoContainer);
  MainGrid.Children.Remove(LocalVideoContainer);
  MainGrid.Children.Remove(CallControls);
  //etc - there a lot more component here.            
  
  MainGrid.RowDefinitions.Clear();
  MainGrid.ColumnDefinitions.Clear();
  </code></pre>
  <p>Then I redefine the Row and Columns for the new layout and add the components to the correct place.</p>
  <p>This approach is really clunky and makes it really hard to maintain and tweak the layout. Surely there is a better way to do this?</p>