在 UWP 中调整 GridView 项目的大小

Question

我正在寻找一种以编程方式调整 GridView 项目宽度的方法。我有一个使用 <DataTemplate> 的 <GridView>，并且 GridView 项的其中一个子项设置了宽度。我希望通过单击按钮来更改该宽度。

我最初的尝试是在后面的代码中使用一个整数集，它会用新的宽度更新，然后想办法刷新 GridView 但我无法访问整数，因为<DataTemplate> 将 context/scope 更改为 x:Bind。有没有更好的方法来实现这个？

<GridView x:Name="gridView1" ItemsSource="{x:Bind Orders}">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="data:Order">
            <RelativePanel Width="200"></RelativePanel>
            </RelativePanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

Answer 1

根据您的要求，您可以将 RelativePanel 宽度与指定的 Source 绑定。我创建了一个用于管理项目宽度的设置 class。然后在Application.Resources.

中初始化一个设置实例

public class Setting : INotifyPropertyChanged
{
    private double _itemWidth = 200;
    public double ItemWidth
    {
        get { return _itemWidth; }
        set { _itemWidth = value; OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Application.Resources

<Application.Resources>
    <ResourceDictionary>
        <local:Setting x:Key="Setting"/>
    </ResourceDictionary>
</Application.Resources>

用法

<GridView  x:Name="gridView1" ItemsSource="{x:Bind Orders}" ItemClick="GridView1_ItemClick" IsItemClickEnabled="True">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <RelativePanel Width="{Binding ItemWidth,Source={StaticResource Setting}}" Background="SeaGreen" >
                <TextBlock Text="{x:Bind }"/>
            </RelativePanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

如果您想更新项目宽度，您可以在按钮点击事件中修改设置宽度属性。

private void GridView1_ItemClick(object sender, ItemClickEventArgs e)
{
    ((Setting)Application.Current.Resources["Setting"]).ItemWidth = 500;
}

更新

移动到页面资源

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

用法

private void GridView1_ItemClick(object sender, ItemClickEventArgs e)
{
    ((Setting)this.Resources["Setting"]).ItemWidth = 500;
}

在 UWP 中调整 GridView 项目的大小

Resize GridView Items in UWP

c#

uwp

uwp-xaml