Windows Phone 8.1主页样式HubSection

时间：2014-10-14 09:17:51

标签： c# xaml windows-phone-8 winrt-xaml

我正在尝试重新创建＆＃34;收藏夹＆＃34;此图片中的部分enter image description here

我已经在其中设置了使用方形拼贴的网格视图，但是正方形的尺寸已经过硬编码，因此它不会随着手机大小而缩放。我必须为许多不同的手机尺寸开发它。如何实现这样的双列平铺设置，可以随屏幕尺寸缩放？ GridView没有列的概念，因此我不能设置两列并告诉磁贴拉伸。

编辑：我已经设法通过硬编码一切的宽度来实现这一点，然后将它全部放在我的HubSection的视图框中。它现在有效，但肯定有比这更好的方法。

2 个答案:

答案 0 :(得分：0)

我不确定GridView如何处理此问题，但您可以使用LongListSelector并将其LayoutMode设置为Grid。它应该没有问题地扩展，但即使你当前的方法应该工作，WP处理扩展非常好。你有没有试过720p模拟器？

答案 1 :(得分：-1)

我如何使用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>

相关问题
最新问题