Скрытое изображение в сетке

Question

У меня есть gridview с 3 изображениями. Я хочу, чтобы в автономном режиме не отображались 2 изображения (мультимедиа и пакет).

XAML:

    <GridView
                    x:Name="contentGrid"
                    Margin="60,15,5,10"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top">
                        <Image
                            x:Name="mediaImage"
                            Width="220"
                            Height="220"
                            Source="/images/revisi/new/menu/KS4-level-2-mediaguru-notext.png" />

                         <Image
                                x:Name="paketImage"
                                Width="220"
                                Height="220"
                                Source="/images/revisi/new/menu/KS4-level-2-paketabc-black.png" />

                        <Image
                            x:Name="umumImage"
                            Width="220"
                            Height="220"
                            Source="/images/revisi/new/menu/KS4-level-2-buku-umum.png" />
</Gridview>

Код:

if(((App)(App.Current)).Mode == "Offline")
            {
                mediaImage.Visibility = Visibility.Collapsed;
                paketImage.Visibility = Visibility.Collapsed;
            }
            else
            {
                mediaImage.Visibility = Visibility.Visible;
                paketImage.Visibility = Visibility.Visible;
            }

У меня есть проблема, которая выглядит как на рисунке ниже:

Я хочу, чтобы третье изображение скользило влево и не перфорировалось таким образом. Как справиться с этим?

Answer 1

Для GridView каждый элемент представляет собой GridViewItem. Изображение может быть скрыто, но GridViewItem как элемент все еще существует. Они займут свое место.

В вашей ситуации я предлагаю вам использовать набор данных с GridView для генерации предметов. При необходимости вы можете управлять элементами, отображаемыми с помощью GridView, изменяя набор данных.

private const string MediaImageUrl = "/images/revisi/new/menu/KS4-level-2-mediaguru-notext.png";
private const string PaketImageUrl = "/images/revisi/new/menu/KS4-level-2-paketabc-black.png";
private const string UmumImageUrl = "/images/revisi/new/menu/KS4-level-2-buku-umum.png";

private ObservableCollection<string> ImageCollection = new ObservableCollection<string>();

public MainPage()
{
    this.InitializeComponent();
    ImageCollection.Add(UmumImageUrl);
    if (((App)(App.Current)).Mode != "Offline")
    {
        ImageCollection.Insert(0, MediaImageUrl);
        ImageCollection.Insert(1, PaketImageUrl);
    }
}

<GridView ...
          ItemsSource="{x:Bind ImageCollection}">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <Image Width="220"
                   Height="220"
                   Source="{Binding}" />
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

Если вам нужно удалить изображение в будущем, вы можете напрямую работать с коллекцией :

ImageCollection.Remove(MediaImageUrl);

Спасибо.

Answer 2

Если я правильно понял ваш вопрос, извините, если не понял.

Я бы предложил следующие изменения.

1. Вместо высоты / ширины используйте MaxHeight / MaxWidth, вы может также придерживаться высоты = 220, но ширина должна быть изменена на MaxWidth
2. Используйте HorizontalAlignment = Left, для изображения, которое вы хотите расположить слева, и сделайте GridView HorizontalAlignment Stretch

---

<GridView
    x:Name="contentGrid"
    Margin="60,15,5,10"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Top">
        <Image
            x:Name="mediaImage"
            MaxWidth="220"
            MaxHeight="220"
            Source="/images/revisi/new/menu/KS4-level-2-mediaguru-notext.png" />
         <Image
                x:Name="paketImage"
                MaxWidth="220"
                MaxHeight="220"
                Source="/images/revisi/new/menu/KS4-level-2-paketabc-black.png" />
        <Image
            x:Name="umumImage"
            MaxWidth="220"
            MaxHeight="220"
            HorizontalAlignment="Left"
            Source="/images/revisi/new/menu/KS4-level-2-buku-umum.png" />
</Gridview>