Uwp изменение размера элемента gridview программным способом

Я пытаюсь использовать привязку 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.

Вместо этого я получаю один огромный "thumbimg" на страницу ... Любая помощь будет принята с благодарностью!

Что это за ElementName = page? вы пробовали привязать его к Page?

Muzib 31.10.2018 13:35

Это главная страница

Francois Gagnon 31.10.2018 14:06

Итак, почему вы поместили этот lementName = page в свой xaml? Я не думаю, что вы пытаетесь установить ширину изображения, равную ширине MainPage. возможно, поэтому вы получаете такое изображение огромного размера.

Muzib 31.10.2018 14:27

Хотите честный ответ? .... Я перепробовал так много стратегий для этого, в том числе поиск в дереве пользовательского интерфейса ... Я попробовал добавить это "ElementName" в привязку от отчаяния, как это делается в Образец фотолаборатории github.com/Microsoft/Windows-appsample-photo-lab

Francois Gagnon 31.10.2018 15:12

хорошо, давайте посмотрим, смогу ли я помочь, сколько предметов должно быть в GridView?

Muzib 31.10.2018 15:37

В шаблоне данных всего два элемента (изображение и его имя). В самом GridView может быть много сотен элементов, но я загружаю их по полторы страницы за раз (около 40). Спасибо!

Francois Gagnon 31.10.2018 16:09

Позвольте нам продолжить обсуждение в чате.

Muzib 31.10.2018 16:46
0
7
182
1

Ответы 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>

А вот код C#, влияющий на связанную переменную ItemSize.

публичное событие 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;

Таким образом, когда вы изменяете значение ItemSize, например, с помощью события ValueChanged, размер элемента сетки изменяется динамически.

Другие вопросы по теме