在gridview中隐藏一些图像答案

【问题标题】：Hidden some image in gridview在gridview中隐藏一些图像
【发布时间】：2020-04-16 08:36:00
【问题描述】：

我有一个包含 3 个图像的网格视图。我希望在离线模式下，不显示 2 张图像（媒体和 paket）。

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;
            }

我遇到了一个问题，如下图所示：

我希望第三张图片向左滑动而不是那样穿孔。如何处理？

【问题讨论】：

标签： c# image gridview uwp

【解决方案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);

谢谢。

【讨论】：

【解决方案2】：

如果我没有正确理解您的问题，对不起。

我建议进行以下更改。

Height/Width 不使用 MaxHeight/MaxWidth，您也可以坚持使用 Height=220，但 Width 必须更改为 MaxWidth
使用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>

【讨论】：