在运行时将gridview的项目大小调整为窗口大小

时间:2016-06-15 20:42:28

标签: xaml gridview winrt-xaml datatemplate

我不知道如何在运行时调整gridview中textblock的项目和字体大小?我不知道如何更改Item的属性。我应该在“ProductDataTemplate”中使用DependencyProperties吗?

<Page x:Name="page"
x:Class="app.SearchPage"

...

<Page.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="ProductDataTemplate">
            <Grid Background="Gray" Width="480" Height="360">
                <Image Source="{Binding LargeThumbnail}"/>
                <Border Background="#A5000000" Height="120" VerticalAlignment="Top">
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Title}" VerticalAlignment="Top" Style="{StaticResource SubheaderTextBlockStyle}" Margin="5,0" FontSize="12" Foreground="White"/>
                </Border>
            </Grid>
        </DataTemplate>
    </ResourceDictionary>
</Page.Resources>
<Page.DataContext>
    <local:DataSource/>
</Page.DataContext>

...

    <Grid x:Name="grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"  >
        <ScrollViewer x:Name="scroll" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible">
            <GridView x:Name="gridresult" ItemTemplate="{StaticResource ProductDataTemplate}" ItemsSource="{Binding Miniatures}" Margin="0,10,0,0" ItemClick="gridresult_ItemClick" IsItemClickEnabled="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" SizeChanged="gridresult_SizeChanged">
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
            </GridView>
        </ScrollViewer>
    </Grid>

1 个答案:

答案 0 :(得分:0)

您可以将ItemsWrapGrid上的ItemWidthItemHeight绑定到视图模型的属性。将该视图模型作为资源放在页面中,并将绑定的Source设置为StaticResource。像这样:

<Page.Resources>
    <ResourceDictionary>
        <local:PageSizeViewModel
            x:Key="PageSizeViewModel" />

...

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <ItemsWrapGrid
            ItemWidth="{Binding ItemWidth, Source={StaticResource PageViewModel}"
            ItemHeight="{Binding ItemHeight, Source={StaticResource PageViewModel}"
            Orientation="Horizontal"/>
    </ItemsPanelTemplate>
</GridView.ItemsPanel>

然后,您可以在页面调整大小时更改PageSizeViewModel中的这些属性。

与此问题类似:GridView with 2 columns, fill width