如何创建比Windows 8中的屏幕更大的视图

时间:2012-10-01 10:34:14

标签: c# windows xaml windows-8 microsoft-metro

我想用一个真正的大网格为Windows 8创建一个应用程序 用户应该能够在水平方向上滚动此网格。

但即使我将屏幕的宽度定义为大于Resolution widt的数字,网格也会出现在屏幕的中间。

以下是截图:

enter image description here

我在Aqua中为主网格边框着色,这样我可以更好地看到它

另外,我用蓝色为动态网格的背景着色。

这是XAML:

<Page.Resources>

    <!-- Auflistung von Elementen, die von dieser Seite angezeigt werden -->
    <CollectionViewSource
        x:Name="itemsViewSource"
        Source="{Binding Items}"/>

    <!-- TODO: Diese Zeile löschen, wenn der Schlüssel "AppName" in "App.xaml" deklariert ist -->
    <x:String x:Key="AppName">My Application</x:String>
</Page.Resources>

<!--
    Dieses Raster fungiert als Stammbereich für die Seite, die zwei Zeilen definiert:
    * Zeile 0 enthält die Schaltfläche "Zurück" und den Seitentitel.
    * Zeile 1 enthält den Rest des Seitenlayouts.
-->
<Grid Style="{StaticResource LayoutRootStyle}">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Schaltfläche "Zurück" und Seitentitel -->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
        <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
        <Button Content="Button" Grid.Column="1" HorizontalAlignment="Left" Margin="705,92,0,0" VerticalAlignment="Top" Click="Button_Click_1"/>
    </Grid>

    <!-- Raster mit horizontalem Bildlauf (wird in den meisten Ansichtsstatus verwendet) -->
    <GridView
        x:Name="itemGridView"
        TabIndex="1"
        Grid.Row="1"
        Grid.Column="0"
        Margin="0,-4,0,0"
        Padding="116,0,116,46" Grid.ColumnSpan="1" SelectionMode="None" BorderThickness="3" BorderBrush="Aqua"/>

这是C#:

this.InitializeComponent();

this.itemGridView.FlowDirection = Windows.UI.Xaml.FlowDirection.LeftToRight;
this.itemGridView.ItemContainerStyle = null;

pageTitle.Text = startFolder.name;
Windows.UI.Xaml.Thickness th = new Thickness(0, 0, 0, 0);
this.Margin = th;

this.itemGridView.Margin = th;
this.itemGridView.Width = 2000;

2 个答案:

答案 0 :(得分:2)

巴特,我在为我的应用开发着陆网格页面时遇到了同样的问题。不要使用Grid.Column是XAML,因为您没有在主网格中定义任何ColumnDefinitions。不要与具有columndefinition的网格混淆,因为它仅用于页面标题和后退按钮。

你的网格视图XAML看起来应该是这样的。

<!-- Horizontal scrolling grid used in most view states -->
    <GridView
        x:Name="itemGridView"
        AutomationProperties.AutomationId="ItemsGridView"
        AutomationProperties.Name="Items"
        TabIndex="1"
        Grid.RowSpan="2"
        Padding="116,136,116,46"
        ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
        ItemTemplate="{StaticResource DefaultGridItemTemplate}"
        SelectionMode="None"
        IsSwipeEnabled="false"
        IsItemClickEnabled="True" 
        ItemClick="ItemView_ItemClick"/>

在C#代码中,只需拥有以下行并删除所有内容

this.InitializeComponent();      

答案 1 :(得分:0)

随着您向其中添加更多内容,GridView将会增长 - 您还没有向我们展示它的内容,以及它如何显示已经存在的框。

如果您的itemsViewSource包含更多项目,那么它们应该出现在GridView中,它将滚动显示所有项目。