title: Move a UserControl in MainPage.xaml in Windows 10 application using VisualStateManager
body: <p>I have a UserControl in my page (XAML) which represents a toolbar, across the top of the page which has three buttons. Since this is a Windows 10 app, I would like it so that when the screen width is wide, that this top toolbar moves along the left edge of the screen so that it shows the toolbar vertically. I tried using the VisualStateManager VisualStates but that only helps change properties and not elements. I need to change the ColumnDefinitions to RowDefinitions in order to display the buttons vertically. </p>
  
  <p>The only solution I have now is to create a second UserControl (VerticalToolBar.xaml) and use the VSM to hide and unhide both. But I'm sure there is an easier solution to something that might be common. I'd like to use one UserControl because right now I'm duplicating their code behind. They behave the same.</p>
  
  <p>Here is the XAML for TopHorizontalToolBar.xaml:</p>
  
  <pre><code>&lt;UserControl
  x:Class="Innobec.Mobile.Apps.CityScope.UserControls.TopHorizontalToolBar"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:Innobec.Mobile.Apps.CityScope.UserControls"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignHeight="80"
  d:DesignWidth="400"&gt;
  
  &lt;Grid x:Name="MainToolbar"&gt;
      &lt;Grid Grid.Row="0" Background="Red"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition /&gt;
              &lt;ColumnDefinition /&gt;
              &lt;ColumnDefinition /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Button x:Name="pinButton" HorizontalAlignment="Center" Grid.Column="0" Background="Red" Click="pinButton_Click" Style="{StaticResource TopHorizontalToolBarButtonStyle}"&gt;
              &lt;Image Source="/Assets/Top-Pin-Icon-60px.png" Stretch="None"/&gt;
          &lt;/Button&gt;
          &lt;Button x:Name="newsButton" HorizontalAlignment="Center" Grid.Column="1" Background="Red" Click="newsButton_Click" Style="{StaticResource TopHorizontalToolBarButtonStyle}"&gt;
              &lt;Image Source="/Assets/Top-News-Icon-60px.png" Stretch="None"/&gt;
          &lt;/Button&gt;
          &lt;Button x:Name="weatherButton" HorizontalAlignment="Center" Grid.Column="2" Background="Red" Click="weatherButton_Click" Style="{StaticResource TopHorizontalToolBarButtonStyle}"&gt;
              &lt;Image Source="/Assets/Top-Weather-Icon-60px.png" Stretch="None"/&gt;
          &lt;/Button&gt;
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>My VerticalToolBar is similar except it uses . On my MainPage.xaml I have the following which shows where I place these UserControls:</p>
  
  <pre><code>    &lt;Page 
  x:Class="Innobec.Mobile.Apps.CityScope.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:Innobec.Mobile.Apps.CityScope"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:maps="using:Windows.UI.Xaml.Controls.Maps"
  xmlns:toolbars="using:Innobec.Mobile.Apps.CityScope.UserControls"
  mc:Ignorable="d"&gt;
  
  &lt;Grid x:Name="MainGrid"&gt;
      &lt;Grid.Resources&gt;
          &lt;Storyboard x:Name="SlideInfoUp"&gt;
              &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetName="LocationDetails" Storyboard.TargetProperty="Height" EnableDependentAnimation="True"&gt;
                  &lt;SplineDoubleKeyFrame KeyTime="0:0:0.25" Value="130"/&gt;
              &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;/Storyboard&gt;
          &lt;Storyboard x:Name="SlideInfoDown"&gt;
              &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetName="LocationDetails" Storyboard.TargetProperty="Height" EnableDependentAnimation="True"&gt;
                  &lt;SplineDoubleKeyFrame KeyTime="0:0:0.25" Value="0"/&gt;
              &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;/Storyboard&gt;
      &lt;/Grid.Resources&gt;
      &lt;VisualStateManager.VisualStateGroups&gt;
          &lt;VisualStateGroup x:Name="WindowStates"&gt;
              &lt;VisualState x:Name="WideState"&gt;
                  &lt;VisualState.StateTriggers&gt;
                      &lt;AdaptiveTrigger MinWindowWidth="660"/&gt;
                  &lt;/VisualState.StateTriggers&gt;
                  &lt;VisualState.Setters&gt;
                      &lt;Setter Target="TopBarGrid.Visibility" Value="Collapsed"/&gt;
                      &lt;Setter Target="LeftBarGrid.(Grid.Column)" Value="0"/&gt;
                      &lt;Setter Target="LeftBarGrid.(Grid.RowSpan)" Value="3"/&gt;
                      &lt;Setter Target="LeftBarGrid.Visibility" Value="Visible"/&gt;
                      &lt;Setter Target="LeftBarGrid.Width" Value="Auto"/&gt;
                      &lt;Setter Target="ContentGrid.(Grid.Row)" Value="1"/&gt;
                      &lt;Setter Target="ContentGrid.(Grid.Column)" Value="1"/&gt;
                  &lt;/VisualState.Setters&gt;
              &lt;/VisualState&gt;
              &lt;VisualState x:Name="NarrowState"&gt;
                  &lt;VisualState.StateTriggers&gt;
                      &lt;AdaptiveTrigger MinWindowWidth="1"/&gt;
                  &lt;/VisualState.StateTriggers&gt;
                  &lt;VisualState.Setters&gt;
                      &lt;Setter Target="TopBarGrid.(Grid.Row)" Value="0"/&gt;
                      &lt;Setter Target="TopBarGrid.(Grid.ColumnSpan)" Value="2"/&gt;
                  &lt;/VisualState.Setters&gt;
              &lt;/VisualState&gt;
          &lt;/VisualStateGroup&gt;
      &lt;/VisualStateManager.VisualStateGroups&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="Auto"/&gt;
          &lt;RowDefinition Height="*"/&gt;
          &lt;RowDefinition Height="Auto"/&gt;
          &lt;RowDefinition Height="50"/&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition x:Name="LeftColumn" Width="Auto"/&gt;
          &lt;ColumnDefinition Width="*"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
      &lt;Grid x:Name="TopBarGrid"&gt;
          &lt;toolbars:TopHorizontalToolBar/&gt;
      &lt;/Grid&gt;
      &lt;Grid x:Name="LeftBarGrid" Grid.Column="0" Grid.RowSpan="2" Visibility="Collapsed" Width="60"&gt;
          &lt;toolbars:VerticalToolBar /&gt;
      &lt;/Grid&gt;
      &lt;Grid x:Name="ContentGrid" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"&gt;
          &lt;Grid  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="Auto"/&gt;
                  &lt;RowDefinition Height="*"/&gt;
                  &lt;RowDefinition Height="Auto"/&gt;                        
              &lt;/Grid.RowDefinitions&gt;                    
              &lt;ListView x:Name="itineraryListView" 
                          Grid.Row="1"  
                          Margin="24,24,0,0" 
                          SelectionMode="None"&gt;
                  &lt;ListView.ItemTemplate&gt;
                      &lt;DataTemplate&gt;
                          &lt;RelativePanel Margin="0,24,0,0"&gt;
                              &lt;TextBlock x:Name="address" 
                                          Width="100" 
                                          TextWrapping="Wrap" 
                                          Text="{Binding FormattedAddress}"/&gt;
                              &lt;ListView 
                                  ItemsSource="{Binding ItineraryInfosAtPoint}" 
                                  RelativePanel.RightOf="address" 
                                  SelectionMode="None"&gt;
                                  &lt;ListView.ItemTemplate&gt;
                                      &lt;DataTemplate&gt;
                                          &lt;TextBlock Text="{Binding Title}"/&gt;
                                      &lt;/DataTemplate&gt;
                                  &lt;/ListView.ItemTemplate&gt;
                              &lt;/ListView&gt;
                          &lt;/RelativePanel&gt;
                      &lt;/DataTemplate&gt;
                  &lt;/ListView.ItemTemplate&gt;
              &lt;/ListView&gt;                  
          &lt;/Grid&gt;
          &lt;Grid&gt;
              &lt;maps:MapControl x:Name="InfoMap"
                               Loaded="InfoMap_Loaded"                              
                               MapElementClick="InfoMap_MapElementClick"  
                               TransitFeaturesVisible="False" 
                               BusinessLandmarksVisible="False" 
                               LandmarksVisible="True" 
                               ZoomLevelChanged="InfoMap_ZoomLevelChanged"                                 
                               MapServiceToken="qB0QfPpDYI6Qh8SWJvS5~x5_U5L-2_-eVF0AE_2qg2w~AuuXeJ_QLZ_6APb7Y3vr3x_opC-CkytS298EJUAjPpPo6pSj1hzYpCIdCTUkH1pf"/&gt;
          &lt;/Grid&gt;           
      &lt;/Grid&gt;
      &lt;Grid Grid.Row="2" Grid.Column="1"&gt;&lt;!--Grid.ColumnSpan="2"--&gt;
          &lt;Viewbox MaxWidth="500" HorizontalAlignment="Left" VerticalAlignment="Center"&gt;
              &lt;toolbars:LocationDetails x:Name="LocationDetails" Height="0"/&gt;
          &lt;/Viewbox&gt;
      &lt;/Grid&gt;
      &lt;Grid Grid.Row="3" Grid.ColumnSpan="2"&gt;
          &lt;toolbars:BottomToolBar x:Name="BottomToolBar"/&gt;
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>