我的页面中有一个UserControl(XAML),它代表一个工具栏,位于页面顶部,有三个按钮。由于这是一个Windows 10应用程序,我希望这样,当屏幕宽度很宽时,这个顶部工具栏沿着屏幕的左边缘移动,以便它垂直显示工具栏。我尝试使用VisualStateManager VisualStates,但这只会帮助更改属性而不是元素。我需要将ColumnDefinitions更改为RowDefinitions以便垂直显示按钮。
我现在唯一的解决方案是创建第二个UserControl(VerticalToolBar.xaml)并使用VSM隐藏和取消隐藏两者。但我确信有一个更容易解决的问题可能很常见。我想使用一个UserControl,因为我现在正在复制他们的代码。他们的行为相同。
以下是TopHorizontalToolBar.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>
答案 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/