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

【问题标题】：Adjusting gridview's items size to the window size at runtime在运行时将gridview的项目大小调整为窗口大小
【发布时间】：2016-06-15 20:42:28
【问题描述】：

我不知道如何在运行时调整网格视图中文本块的项目大小和字体大小？我不知道如何更改项目的属性。我应该在“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>

【问题讨论】：

标签： xaml gridview winrt-xaml datatemplate

【解决方案1】：

您可以将ItemsWrapGrid 上的ItemWidth 和ItemHeight 绑定到视图模型的属性。将该视图模型作为资源放在您的页面中，并将绑定的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

【讨论】：

好的，谢谢，但是如何编辑 DataTemplate 控件的属性，例如 TextBlock 的 FontSize ？
“编辑”是什么意思？您可以在DataTemplate...中的任何文本编辑器中键入它们...
我的意思是在运行时改变 FontSize 的值？当用户更改窗口大小时，我想调整项目和字体大小。
所以？ FontSize 只是 double 属性。您可以将其绑定到视图模型、使用视觉状态触发器、实现行为、为不同的窗口大小使用单独的 DataTemplates 等。您有很多方法可以接近它。