Переместить элемент UserControl в MainPage.xaml в приложении Windows 10 с помощью VisualStateManager

Question

У меня есть UserControl на моей странице (XAML), который представляет собой панель инструментов, расположенную в верхней части страницы с тремя кнопками. Поскольку это приложение Windows 10, мне бы хотелось, чтобы при ширине экрана ширина этой верхней панели инструментов перемещалась по левому краю экрана так, чтобы она отображала панель инструментов вертикально. Я попытался использовать VisualStateManager VisualStates, но это только помогает изменять свойства, а не элементы. Мне нужно изменить ColumnDefinitions для RowDefinitions, чтобы отображать кнопки по вертикали.

Единственное, что у меня есть, это создать второй UserControl (VerticalToolBar.xaml) и использовать VSM, чтобы скрыть и отобразить оба. Но я уверен, что есть более легкое решение чего-то, что может быть распространено. Я бы хотел использовать один UserControl, потому что сейчас я дублирую их код. Они ведут себя одинаково.

Вот XAML для TopHorizontalToolBar.xaml:

<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"> 

<Grid x:Name="MainToolbar"> 
    <Grid Grid.Row="0" Background="Red"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 
     <Button x:Name="pinButton" HorizontalAlignment="Center" Grid.Column="0" Background="Red" Click="pinButton_Click" Style="{StaticResource TopHorizontalToolBarButtonStyle}"> 
      <Image Source="/Assets/Top-Pin-Icon-60px.png" Stretch="None"/> 
     </Button> 
     <Button x:Name="newsButton" HorizontalAlignment="Center" Grid.Column="1" Background="Red" Click="newsButton_Click" Style="{StaticResource TopHorizontalToolBarButtonStyle}"> 
      <Image Source="/Assets/Top-News-Icon-60px.png" Stretch="None"/> 
     </Button> 
     <Button x:Name="weatherButton" HorizontalAlignment="Center" Grid.Column="2" Background="Red" Click="weatherButton_Click" Style="{StaticResource TopHorizontalToolBarButtonStyle}"> 
      <Image Source="/Assets/Top-Weather-Icon-60px.png" Stretch="None"/> 
     </Button> 
    </Grid> 
</Grid> 

Мои VerticalToolBar аналогично, за исключением он использует. На моем MainPage.xaml у меня есть следующее, который показывает, где я размещаю эти UserControls:

<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"> 

<Grid x:Name="MainGrid"> 
    <Grid.Resources> 
     <Storyboard x:Name="SlideInfoUp"> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LocationDetails" Storyboard.TargetProperty="Height" EnableDependentAnimation="True"> 
       <SplineDoubleKeyFrame KeyTime="0:0:0.25" Value="130"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
     <Storyboard x:Name="SlideInfoDown"> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LocationDetails" Storyboard.TargetProperty="Height" EnableDependentAnimation="True"> 
       <SplineDoubleKeyFrame KeyTime="0:0:0.25" Value="0"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
    </Grid.Resources> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="WindowStates"> 
      <VisualState x:Name="WideState"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="660"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="TopBarGrid.Visibility" Value="Collapsed"/> 
        <Setter Target="LeftBarGrid.(Grid.Column)" Value="0"/> 
        <Setter Target="LeftBarGrid.(Grid.RowSpan)" Value="3"/> 
        <Setter Target="LeftBarGrid.Visibility" Value="Visible"/> 
        <Setter Target="LeftBarGrid.Width" Value="Auto"/> 
        <Setter Target="ContentGrid.(Grid.Row)" Value="1"/> 
        <Setter Target="ContentGrid.(Grid.Column)" Value="1"/> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="NarrowState"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="1"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="TopBarGrid.(Grid.Row)" Value="0"/> 
        <Setter Target="TopBarGrid.(Grid.ColumnSpan)" Value="2"/> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="50"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition x:Name="LeftColumn" Width="Auto"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <Grid x:Name="TopBarGrid"> 
     <toolbars:TopHorizontalToolBar/> 
    </Grid> 
    <Grid x:Name="LeftBarGrid" Grid.Column="0" Grid.RowSpan="2" Visibility="Collapsed" Width="60"> 
     <toolbars:VerticalToolBar /> 
    </Grid> 
    <Grid x:Name="ContentGrid" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="*"/> 
       <RowDefinition Height="Auto"/>       
      </Grid.RowDefinitions>      
      <ListView x:Name="itineraryListView" 
         Grid.Row="1" 
         Margin="24,24,0,0" 
         SelectionMode="None"> 
       <ListView.ItemTemplate> 
        <DataTemplate> 
         <RelativePanel Margin="0,24,0,0"> 
          <TextBlock x:Name="address" 
             Width="100" 
             TextWrapping="Wrap" 
             Text="{Binding FormattedAddress}"/> 
          <ListView 
           ItemsSource="{Binding ItineraryInfosAtPoint}" 
           RelativePanel.RightOf="address" 
           SelectionMode="None"> 
           <ListView.ItemTemplate> 
            <DataTemplate> 
             <TextBlock Text="{Binding Title}"/> 
            </DataTemplate> 
           </ListView.ItemTemplate> 
          </ListView> 
         </RelativePanel> 
        </DataTemplate> 
       </ListView.ItemTemplate> 
      </ListView>     
     </Grid> 
     <Grid> 
      <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"/> 
     </Grid>   
    </Grid> 
    <Grid Grid.Row="2" Grid.Column="1"><!--Grid.ColumnSpan="2"--> 
     <Viewbox MaxWidth="500" HorizontalAlignment="Left" VerticalAlignment="Center"> 
      <toolbars:LocationDetails x:Name="LocationDetails" Height="0"/> 
     </Viewbox> 
    </Grid> 
    <Grid Grid.Row="3" Grid.ColumnSpan="2"> 
     <toolbars:BottomToolBar x:Name="BottomToolBar"/> 
    </Grid> 
</Grid> 

Answer 1

Одним из вариантов было бы использовать StackPanel держать ваши кнопки вместо сетки. Затем вы можете изменить ориентацию между горизонтальным и вертикальным с помощью визуальных состояний, чтобы быстро переключить макет панели.

Еще один вариант Windows 10 - использовать новую RelativePanel, чтобы держать ваши кнопки. Этот элемент управления позволяет вам определять положение детей внутри него относительно друг друга. Для вашей горизонтальной компоновки каждая кнопка может быть установлена ​​справа от предыдущей, и для вертикальной компоновки каждая из них может быть установлена ​​ниже. Эти относительные свойства также могут быть изменены через визуальные состояния. Ваш контроль выше будет выглядеть так для горизонтального просмотра.

<RelativePanel > 
     <Button x:Name="pinButton" Background="Red" Click="pinButton_Click" Style="{StaticResource TopHorizontalToolBarButtonStyle}"> 
      <Image Source="/Assets/Top-Pin-Icon-60px.png" Stretch="None"/> 
     </Button> 
     <Button x:Name="newsButton" Background="Red" Click="newsButton_Click" Style="{StaticResource TopHorizontalToolBarButtonStyle}" 
       RelativePanel.RightOf="pinButton"> 
      <Image Source="/Assets/Top-News-Icon-60px.png" Stretch="None"/> 
     </Button> 
     <Button x:Name="weatherButton" Background="Red" Click="weatherButton_Click" Style="{StaticResource TopHorizontalToolBarButtonStyle}" 
       RelativePanel.RightOf="newsButton"> 
      <Image Source="/Assets/Top-Weather-Icon-60px.png" Stretch="None"/> 
     </Button> 
</RelativePanel> 

Это хороший блог, который идет больше в глубину на RelativePanel и создания визуальных государства для него: http://blog.galasoft.ch/posts/2015/04/building-adaptive-layout-in-windows-10-with-relativepanel-and-adaptivetrigger/