[C# WPF]在ListBox中顯示Image 水平方向(Horizon Orientation)顯示垂直卷軸(Vertical Scroll)

前言

最近因為課程專案的需要，所以使用Lsh(Locality Sensitive Hashing)實作以圖搜圖的關係，所以需要讓查詢的相似圖片在視窗中排序列出，於是便花了一些時間尋找資料簡單的用ListBox實作出此功能。

實作方式

由於本人是使用C# WPF環境，所以首先來看XAML的部分 　

<ListBox x:Name="lstBox" Height="400" Margin="413,95,44,204" ScrollViewer.VerticalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True" Orientation="Vertical"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate DataType=" {x:Type local:Img}">
                    <StackPanel>
                        <TextBlock Margin="3" Text="{Binding Str}"/>
                        <Image Margin="3" Source="{Binding Image}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
</ListBox>

以下是個部份的介紹:

定義自己要在ListBox顯示的元件

此部分是定義屬於你ListBox要顯示的資料，此範例包含文字與圖像，並透過ItemTemplate設定DataTemplate用來顯示每個項目 使用DataTemplate來定義資料物件的外觀。在此部分使用設定顯示時有TextBlock 與Image，並且對TextBlock的Text與Image的Source分別繫結Str與Image資料;此部分的繫結資料名稱來自於程式中定義的Img Class

<ListBox.ItemTemplate>
                <DataTemplate DataType=" {x:Type local:Img}">
                    <StackPanel>
                        <TextBlock Margin="3" Text="{Binding Str}"/>
                        <Image Margin="3" Source="{Binding Image}"/>
                    </StackPanel>
                </DataTemplate>
</ListBox.ItemTemplate>

透過預先在Window指定xmlns:local="clr-namesapce:Your App NameSpace"來取得此namespace才可以在DataTemplate DataType中找的到local的Img Class

xmlns:local="clr-namesapce:LargeScaleImageSearch"

設定顯示時為橫向排列且是垂直捲動

ListBox中另外設定ItemsPanel以取得或設定ItemsPanelTemplate樣板定義控制的項目配置的面板。

設定成WrapPanel，並且設Orientation為Vertical使物件可以wrap vertically

對ListBox設定ScrollViewer.VerticalScrollBarVisibility="Disabled" 使ScrollViewer限制住高度不會無限往下捲

<ListBox x:Name="lstBox" Height="400" Margin="413,95,44,204" ScrollViewer.VerticalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True" Orientation="Vertical"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

程式碼部分

定義Img Class

public class Img
    {
        public Img(string value, BitmapSource img) { Str = value; Image = img; }
        public string Str { get; set; }
        public BitmapSource Image { get; set; }
    }

加入圖片顯示到listBox

由於這邊本人有使用到EmguCV所以就直接存到EmguCV提供的類別，在轉成BitmapSource

TestLoad = Directory.GetFiles(@"../../ImageData/pasadena-buildings/houses/house001").ToList();
                foreach(string path in TestLoad){
                    lstBox.Items.Add(new Img(System.IO.Path.GetFileName(path), new Image(path).Resize(160,120,INTER.CV_INTER_LINEAR).ToBitmapSource()));
                }

顯示結果

參考資料

Using WrapPanel and ScrollViewer to give a multi-column Listbox in WPF

Add image to listbox

ListBoxes with DataBound Images in WPF

ItemsControl.ItemTemplate 屬性