Windows Phone 8.1 主页样式 HubSection

Question

我正在尝试重新创建此图像中的“收藏夹”部分

我设置了一个网格视图，其中包含方形图块，但正方形的尺寸已经过硬编码，因此它不会随手机大小而缩放。我不得不为许多不同的手机尺寸开发这个。如何实现像这样随屏幕尺寸缩放的两列图块设置？ 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>