UWP 以编程方式更改 gridview 元素大小答案

【问题标题】：UWP Changing gridview element size programmaticallyUWP 以编程方式更改 gridview 元素大小
【发布时间】：2019-04-04 12:52:38
【问题描述】：

我正在尝试使用 XAML 绑定从屏幕上的滑块影响 gridview 数据模板元素大小。

我有一个由缩略图组成的网格视图，其中元素定义如下：

         <GridView.ItemTemplate  >
            <DataTemplate  >
                <StackPanel Orientation="Vertical" 
                            HorizontalAlignment="Center" 
                            VerticalAlignment="Center" 
                            KeyDown="IsitenterThumb" 
                            BorderBrush="LightSeaGreen" 
                            BorderThickness="1"
                            PointerWheelChanged="ctlThumbnails_PointerWheelChanged">
                    <Image Source="{Binding thumb}" 
                           x:Name="thumbimg"
                           Visibility="Visible"
                           Height="{Binding ItemSize}" Width="{Binding ItemSize, ElementName=page}" Stretch="Uniform" 
                           Tapped="ThumbnailSelected" 
                           DoubleTapped="CloseThumbnails"
                           />
                    <TextBlock Text="{Binding name}" Margin="5,5" 
                               Foreground="White" 
                               Width="{Binding ItemSize}" 
                               />
                </StackPanel>
            </DataTemplate>

我有以下变量定义如下：

       public double ItemSize
       {
        get => _itemSize;
        set
        {
            if (_itemSize != value)
            {
                _itemSize = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ItemSize)));
            }
         }
       }

      private double _itemSize;

      public event PropertyChangedEventHandler PropertyChanged;

我原以为更改 ItemSize 的值会影响 gridview 数据模板。这是从 PhotoLab 样本中获取的。

相反，我每页都有一个巨大的“拇指”...任何帮助将不胜感激！

【问题讨论】：

ElementName = page 是什么？您尝试将其绑定到 Page?
这是主页
那么，为什么将lementName = page 放在您的xaml 中？我不认为您试图将图像的宽度设置为与MainPage 的宽度相同。也许这就是为什么你会得到这么大的图片。
你想要一个诚实的答案吗？....我尝试了很多策略来做到这一点，包括搜索 UI 树...我出于绝望尝试将此“元素名称”添加到绑定中，因为这是在 Photolab 示例中完成的方式github.com/Microsoft/Windows-appsample-photo-lab
好的，看看我能不能帮忙，GridView 应该有多少个项目？

标签： xaml gridview binding uwp

【解决方案1】：

好的……我终于明白了。我不太确定我在上面做错了什么，但下面的代码有效。

我已将 DataTemplate 作为 Page.Resource 的一部分，我不确定这是否是导致绑定问题的原因。但是 Xaml 代码如下所示：

      <Page.Resources>
        <DataTemplate x:Key="ThumbnailsTemplate">
            <StackPanel Orientation="Vertical" 
                            HorizontalAlignment="Center" 
                            VerticalAlignment="Center" 
                            KeyDown="IsitenterThumb" 
                            BorderBrush="LightSeaGreen" 
                            BorderThickness="1"
                            <Image Source="{Binding thumb}" 
                            x:Name="thumbimg"
                            Visibility="Visible"
                            Height="{Binding ItemSize, ElementName=page}" Width="{Binding ItemSize, ElementName=page}" 
                           Stretch="Uniform" 
                           Tapped="ThumbnailSelected" 
                           DoubleTapped="CloseThumbnails"
                           />
                <TextBlock Text="{Binding name}" Margin="5,5" 
                               Foreground="White" Width="{Binding ItemSize}" 
                               />
            </StackPanel>
        </DataTemplate>
     </Page.Resources>


     <GridView x:Name = "ctlThumbnails" Grid.Column="0" 
              BorderBrush="White" BorderThickness="2" 
              Grid.RowSpan="4" Grid.Row="0" Grid.ColumnSpan="3" Height ="auto" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
              Margin="30,30,30,30" KeyDown="IsitenterThumb"
              DoubleTapped="CloseThumbnails"
              ItemTemplate="{StaticResource ThumbnailsTemplate}">
     </GridView>

这是影响绑定变量 ItemSize 的 C# 代码

公共事件 PropertyChangedEventHandler PropertyChanged;

    public double ItemSize
    {
        get => _itemSize;
        set
        {
            if (_itemSize != value)
            {
                _itemSize = value;
                topcmdbarcontent.Text = "Thumb Size:" + _itemSize.ToString();
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ItemSize)));
            }
        }
    }
    private double _itemSize;

因此，当您通过 ValueChanged 事件更改 ItemSize 的值时，它确实会动态更改网格元素的大小。

【讨论】：