在gridview中隐藏了一些图像

Question

我有一个包含 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

如果我没有正确理解你的问题，如果我没有正确理解，请见谅。

我建议进行以下更改。

而不是 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>

Answer 2

对于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>

如果以后需要删除图片，可以直接在collection上操作：

ImageCollection.Remove(MediaImageUrl);

谢谢。

在gridview中隐藏了一些图像

Hidden some image in gridview

c#

gridview

image

uwp