Question

逗人，

我的listview中有一张图片。对于该图像，我设置了Aspect =“AspectFill”。

点击该图片，我需要全屏查看图片，背景会模糊不清。

我的要求就像是WhatsApp dp的最初点击。在WhatsApp中，在WhatsApp联系人的顶部显示dp全屏图像。

提前致谢。

Answer 1

使用Rg.Plugins.Popup

完成此功能

question

Answer 2

将Listview放在网格中

将图像放在同一网格中，并将IsVisible设置为false。使其全宽和高。

点击列表视图项目，将图像源设置为点击列表视图项目图像，并将IsVisible设置为true。

您可以将图像嵌套在具有白色不透明背景的stacklayout中，以实现模糊效果。

为图像添加点击处理程序以再次隐藏它。

Answer 3

你在这里回答

      <RowDefinition Height="*"/>
     </Grid.RowDefinitions>       
     <ListView x:Name="lstView" BackgroundColor="White" VerticalOptions="FillAndExpand" ItemsSource="{Binding ImageList}" ItemSelected="Handle_ItemSelected" >
                <ListView.ItemTemplate>
                    <DataTemplate>
                <ViewCell>
    <StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal" Padding="10">

                  <Image Aspect="AspectFill"
                         HeightRequest ="75" WidthRequest="75"
                         Source="{Binding ImageName}" />


                </StackLayout>
              </ViewCell>

                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    <Image Grid.RowSpan="1" Source="{Binding}" x:Name="grdImage" IsVisible="false"/>
</Grid>

    public POCPage()
    {
        InitializeComponent();
        ImageList = new ObservableCollection<Images>
        {
            new Images { ImageName = "first", ImageId = "1" },
            new Images { ImageName = "Four", ImageId = "2" },
            new Images { ImageName = "Second", ImageId = "3" },
            new Images { ImageName = "Third", ImageId = "4" }
        };

        lstView.ItemsSource = ImageList;
    }


    void Handle_ItemSelected(object sender, Xamarin.Forms.SelectedItemChangedEventArgs e)
    {
        grdImage.IsVisible = true;
        lstView.IsVisible = false;
        var item = e.SelectedItem as Images;
        grdImage.Source = ImageSource.FromFile(item.ImageName);
    }

    private ObservableCollection<Images> imageList;

    public ObservableCollection<Images> ImageList
    {
        get
        {
            return imageList;
        }
        set
        {
            imageList = value;

        }
    }
}

public class Images
{
    public string ImageName
    {
        get;
        set;
    }

    public string ImageId
    {
        get;
        set;
    }

Xamarin表单：轻触Listview图像全屏显示图像

3 个答案: