创建带有缩略图，按钮和可点击行的离子列表

Question

我正在尝试创建一个离子列表，其中每一行从左到右都有以下项目

带有URL OR图像的缩略图和带有'clipboard'离子的缩略图 小文本字符串 带有iso-信息-圆圈-轮廓图像的可轻击按钮/图标（将用于显示弹出框 远端的右箭头表示，点击此行会将用户带到下一页

最初，我有ngFor循环为每一行生成按钮，并且该按钮使末尾的箭头出现，但是为了正确点击而停止了每一行内的所有按钮。

其他变体意味着按钮与文本不对齐，或者如果我在{{survey.label}}周围使用离子标签，则按钮会完全消失。

private async void PickAFileButton_ClickAsync(object sender, RoutedEventArgs e)
{
    FileOpenPicker openPicker = new FileOpenPicker();
    openPicker.ViewMode = PickerViewMode.Thumbnail;
    openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
    openPicker.FileTypeFilter.Add(".jpg");
    openPicker.FileTypeFilter.Add(".jpeg");
    openPicker.FileTypeFilter.Add(".png");

    StorageFile file = await openPicker.PickSingleFileAsync();
    if (file != null)
    {   await file.CopyAsync( ApplicationData.Current.LocalFolder );
        // Application now has read/write access to the picked file
        String a = "ms-appdata:///local/" + file.Name;
        theItem.Source = new BitmapImage(new Uri(a));
    }
    else
    {
        theImage.Text = "Operation cancelled.";
    }
}

这就是我要布置的方式，所有红色部分仅是该问题的注释。标题和我的垂直输入水平对齐。在该行的下半部分有一个字幕，而下部的文本则停下来，最好用省略号（尽管可能超出此问题的范围），以便始终可以看到右箭头。还要注意，围绕I的圆圈是完整的。在我当前的标记中，它位于一个按钮内，并且将图标的顶部和底部剪切掉了。