WPF - 在 Wrappannel 中显示图像和文本框

Posted 2023-04-11

【中文标题】WPF - 在 Wrappannel 中显示图像和文本框

【英文标题】：WPF - Display Image in Wrappannel along with textbox

【发布时间】：2021-08-07 12:41:09

【问题描述】：

您好 *** 专家， 最近只有我开始在 WPF 中编码并卡在某个地方。 我必须显示图像列表和文本，我试图在谷歌上找到但像往常一样都使用硬编码值。

第 1 步：在 XAML 文件中，我使用了包装面板，代码如下：

 <ListView Width="auto" Name="listviewSource" BorderBrush="x:Null">
    <ListView.ItemsPanel>
          <ItemsPanelTemplate>
              <WrapPanel Width="auto" Height="150" Orientation="Vertical" UseLayoutRounding="True" / >
           </ItemsPanelTemplate>
        </ListView.ItemsPanel>
       </ListView>

第2步：目前我可以成功绑定所有图片，代码：

Image imageData = new Image();
List<Image> ImageList = new List<Image>();  // List of Image
List<string> imageName = new List<string>();  // list of name 

imageData = bitmapData // here bitmapData is having data which is already computed
imageName.Add(name); // This is the issue, how to display name below image 
ImageList.Add(imageData );
listviewSource.ItemSource = ImageList;

【参考方案1】：

您应该在 XAML 中有一个 Label 或 TextBlock 来放置名称，并且应该将 imageName 设置为它。

XAML 中的类似内容：

        <ListView Width="auto" Name="listviewSource" BorderBrush="x:Null" Margin="10,10,10,10">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Width="auto" Height="150" Orientation="Vertical" UseLayoutRounding="True" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <Image Name="DisplayedImage" Height="100" Width="100"/>
        <Label Name="ImageName" Content="ImagesName" Height="32" Width="93"/>
    </ListView>

CS 文件：

        Image imageData = new Image();
        List<Image> ImageList = new List<Image>();  // List of Images
        List<string> imageName = new List<string>();  // list of names
        string name= "...";

        BitmapImage myBitmapImage = new BitmapImage();

        //Setting BitmapImage properties must be done within a BeginInit and EndInit block.
        myBitmapImage.BeginInit(); 
        myBitmapImage.UriSource= new Uri(@"C:\Users\...\***.bmp");
        myBitmapImage.DecodePixelWidth = 100;
        myBitmapImage.EndInit();

        imageData.Source= myBitmapImage; // here bitmapData is having data which is already computed
        imageName.Add(name);
        ImageName.Content= name;// This is the issue, how to display name below image
        
        DisplayedImage.Source = myBitmapImage;
        ImageList.Add(imageData);

【参考方案2】：

您的 ListView 从 ImageList 中获取其 ItemSource。 imageName 不在任何地方使用。你想要的是将它绑定到你的ListView。我的建议是创建一个类MyImageClass，其中包含一个Image 类型的Property 和另一个Property 类型string，并将您的listviewSource 连接到list<MyImageClass>。在您的用户控件中，在WrapPanel 内，添加<Image/> 和<Label/> 并将它们绑定到成员myImage 和myImageName。