Windows Phone 8.1主頁樣式HubSection

Question

我試圖在此圖像中重新創建“收藏夾”部分

我在其中設置了帶有正方形瓷磚的gridview，但是正方形的尺寸已經過硬編碼，因此不會隨手機尺寸縮放。 我必須針對許多不同尺寸的手機進行開發。 如何實現像這樣的兩列平鋪設置，該設置將隨屏幕尺寸縮放？ GridView沒有列的概念，因此並不是像我可以設置兩列並告訴圖塊拉伸一樣。

編輯：我已經通過硬編碼一切的寬度，然后將其全部扔到HubSection的視圖框中來實現這一目標。 它現在可以使用，但是肯定有比這更好的方法了。

Answer 1

我不確定GridView如何處理此問題，但是您可以使用LongListSelector並將其LayoutMode設置為Grid 。 它應該可以毫無問題地進行擴展，但是即使您當前的方法也可以使用，WP可以很好地處理擴展。 您是否已經嘗試過720p仿真器？

Answer 2

我如何使用Hubsection Windows 8.1進行人像拍攝和捕捉，我有代碼

 <Page x:Name="pageRoot" x:Class="Marinas.ItemDetailPage" DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Marinas" xmlns:data="using:Marinas.Data" xmlns:common="using:Marinas.Common" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <common:BooleanTovisilibity x:Key="BooleanToVisibility"/> </Page.Resources> <Grid DataContext="{Binding Item}" d:DataContext="{Binding Groups[0].Items[0], Source={d:DesignData Source=/DataModel/es-Es/DataSample.json, Type=data:SampleDataSource}}"> <Grid.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF236CB6" Offset="0"/> <GradientStop Color="#FF5DB6F3" Offset="0.993"/> </LinearGradientBrush> </Grid.Background> <Grid.ChildrenTransitions> <TransitionCollection> <EntranceThemeTransition/> </TransitionCollection> </Grid.ChildrenTransitions> <Grid.RowDefinitions> <RowDefinition Height="140"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid Grid.Row="1" x:Name="contentRegion" Visibility="Visible"> <Hub Orientation="Horizontal"> <HubSection x:Uid="section1Header" Margin="88,-42,0,0" Width="500" > <DataTemplate> <StackPanel Margin="0,-3,0,0" Height="647"> <Image Source="{Binding ImagePath}" Margin="0,0,0,20" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="240" /> <TextBlock Text="{Binding Content}" Style="{StaticResource BodyTextBlockStyle}" FontSize="19" Margin="0,-6,0,0" LineHeight="21" Height="255"/> </StackPanel> </DataTemplate> </HubSection> <HubSection x:Uid="Section2Header" Width="500" Margin="88,-42,0,0" Visibility="Visible"> <DataTemplate> <StackPanel> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="150"/> <ColumnDefinition Width="300"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="21"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> <RowDefinition Height="17"/> </Grid.RowDefinitions> <!--ficha tecnica--> <TextBlock Text="{Binding Latitude}" Grid.Row="0" FontSize="19" Style="{StaticResource BodyTextBlockStyle}"/> <TextBlock Text="{Binding Alatitude}" FontSize="19" Grid.Row="0" Grid.Column="1" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="1" X2="290" Margin="0,9,0,0" Grid.ColumnSpan="2"/> <TextBlock Text="{Binding Longitude}" FontSize="19" Grid.Row="2" Grid.Column="0" Style="{StaticResource BodyTextBlockStyle}"/> <TextBlock Text="{Binding Blongitude}" FontSize="19" Grid.Row="2" Grid.Column="2" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="3" X2="290" Margin="0,9,0,0" Grid.ColumnSpan="2"/> <TextBlock Text="{Binding Lenght}" FontSize="19" Grid.Row="4" Style="{StaticResource BodyTextBlockStyle }"/> <TextBlock Text="{Binding Elenght}" FontSize="19" Grid.Row="4" Grid.Column="3" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="5" X2="290" Margin="0,9,0,0" Grid.ColumnSpan="2"/> <TextBlock Text="{Binding Draught}" FontSize="19" Grid.Row="6" Style="{StaticResource BodyTextBlockStyle}"/> <TextBlock Text="{Binding Ndraught}" FontSize="19" Grid.Row="6" Grid.Column="6" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="7" X2="290" Margin="0,9,0,0" Grid.ColumnSpan="2"/> <TextBlock Text="{Binding NauticalChart}" FontSize="19" Grid.Row="8" Style="{StaticResource BodyTextBlockStyle}"/> <TextBlock Text="{Binding Fchart}" FontSize="19" Grid.Row="8" Grid.Column="8" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="9" X2="290" Margin="0,9,0,0" Grid.ColumnSpan="2"/> <TextBlock Text="{Binding Radio}" FontSize="19" Grid.Row="10" Style="{StaticResource BodyTextBlockStyle}"/> <TextBlock Text="{Binding Dradio}" FontSize="19" Grid.Row="10" Grid.Column="10" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="11" X2="290" Margin="0,9,0,0" Grid.ColumnSpan="2"/> <TextBlock Text="{Binding Function}" FontSize="19" Grid.Row="12" Style="{StaticResource BodyTextBlockStyle}"/> <TextBlock Text="{Binding Hfunction}" FontSize="19" Grid.Row="12" Grid.Column="12" Style="{StaticResource BodyTextBlockStyle}"/> </Grid> </StackPanel> </DataTemplate> </HubSection> <HubSection x:Uid="Section3Header" Margin="88,-40,0,0" Width="600" Visibility="Visible"> <DataTemplate> <StackPanel> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="190"/> <ColumnDefinition Width="500"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="30"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> <RowDefinition Height="17"/> <RowDefinition Height="21"/> </Grid.RowDefinitions> <TextBlock Text="{Binding Services}" FontSize="19" Grid.Row="0" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="1" X2="509" Margin="0,9,0,0" Grid.ColumnSpan="2"/> <TextBlock Text="{Binding Email}" FontSize="19" Grid.Row="2" Style="{StaticResource BodyTextBlockStyle}"/> <TextBlock Text="{Binding Addressemail}" FontSize="19" Grid.Row="2" Margin="0,0,0,0" Grid.Column="2" Style="{StaticResource BodyTextBlockStyle}"/> <Line Stroke="White" StrokeThickness="2" Grid.Row="3" X2="509" Margin="0,9,0,0" Grid.ColumnSpan="2"/> </Grid> </StackPanel> </DataTemplate> </HubSection> </Hub> </Grid> <!-- Botón Atrás y título de página --> <Grid x:Name="defaultNavigation" Visibility="Visible"> <Grid.ColumnDefinitions> <ColumnDefinition Width="120"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}" Style="{StaticResource NavigationBackButtonNormalStyle}" VerticalAlignment="Top" AutomationProperties.Name="Back" AutomationProperties.AutomationId="BackButton" AutomationProperties.ItemType="Navigation Button"/> <TextBlock x:Name="pageTitle" Text="{Binding Title}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/> </Grid> <Grid x:Name="minimalNavigation" Visibility="Collapsed"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button x:Name="backbuttonminimal" Height="70" Margin="10,56,10,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}" Visibility="{Binding IsEnabled, Converter={StaticResource BooleanToVisibility}, RelativeSource={RelativeSource Mode=Self}}" AutomationProperties.Name="Back" AutomationProperties.AutomationId="BackButton" AutomationProperties.ItemType="Navigation Button"> </Button> <TextBlock x:Name="pageTitleMinimal" Text="{Binding Title}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" FontSize="27" IsHitTestVisible="False" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/> </Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup> <VisualState x:Name="DefaultLayout"> </VisualState> <VisualState x:Name="MinimalLayout"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="defaultNavigation" Storyboard.TargetProperty="Visiblity"> <DiscreteObjectKeyFrame KeyTime="0" Value="collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="minimalNavigation" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="PortraitLayout"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="defaultNavigation" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="minimalNavigation" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> <Page.TopAppBar> <AppBar IsSticky="True"> <StackPanel Orientation="Horizontal"> <Button x:Uid="inicio" Width="140" Height="80" Background="Black" BorderBrush="Black" Click="HomeBarButton_Click"/> </StackPanel> </AppBar> </Page.TopAppBar> </Page>