使用VisualStateManager在Windows 10应用程序中的MainPage.xaml中移动UserControl

时间：2015-08-31 17:57:45

标签： xaml win-universal-app windows-10 visualstatemanager

我的页面中有一个UserControl（XAML），它代表一个工具栏，位于页面顶部，有三个按钮。由于这是一个Windows 10应用程序，我希望这样，当屏幕宽度很宽时，这个顶部工具栏沿着屏幕的左边缘移动，以便它垂直显示工具栏。我尝试使用VisualStateManager VisualStates，但这只会帮助更改属性而不是元素。我需要将ColumnDefinitions更改为RowDefinitions以便垂直显示按钮。

我现在唯一的解决方案是创建第二个UserControl（VerticalToolBar.xaml）并使用VSM隐藏和取消隐藏两者。但我确信有一个更容易解决的问题可能很常见。我想使用一个UserControl，因为我现在正在复制他们的代码。他们的行为相同。

以下是TopHorizo​​ntalToolBar.xaml的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>

1 个答案:

答案 0 :(得分：1)

一种选择是使用StackPanel来保存按钮而不是网格。然后，您可以通过可视状态更改水平和垂直之间的方向，以快速切换面板的布局。

更多Windows 10选项是使用全新的RelativePanel来保存按钮。此控件允许您定义其中相对于彼此的子项的位置。对于水平布局，每个按钮可以设置在前一个按钮的右侧，对于垂直布局，每个按钮都可以设置在下面。这些相对属性也可以通过Visual States进行更改。对于水平视图，上面的控件看起来像这样。

 <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并为它设置了Visual States： http://blog.galasoft.ch/posts/2015/04/building-adaptive-layout-in-windows-10-with-relativepanel-and-adaptivetrigger/

相关问题
最新问题