Search code examples
c#imagetextlistboxwpf-controls

I want to put the image and text into the list box item(C# wpf)


The image of the list box item is too large. enter image description here

I want to make this an item of constant height. Like the picture below. enter image description here

This is my Code -

xaml:

<ListBox Grid.Row="0" x:Name="listBox" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" AllowDrop="True" Drop="ListBox_Drop" DragEnter="ListBox_DragEnter" ScrollViewer.VerticalScrollBarVisibility="Visible" >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <Image Margin="3" Source="{Binding Path}"/>
                    <TextBlock Margin="3" Text="{Binding Name}"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

cs:

class VideoListing
{
    public string Name { get; set; }
    public string Path { get; set; }
}
List<VideoListing> list = new List<VideoListing>();
    public VideoPanel()
    {
        InitializeComponent();
        list.Add(new VideoListing()
        {
            Name = "hello",
            Path = @"C:\Users\johndoe\Desktop\Screenshot.png",
        });
        listBox.Items.Add(list);
    }

Solution

  • You need to set either the Height or the MaxHeight properties on the Image control. Since you say you want a "constant height" then set the height of the image and tell it to scale the source appropriately.

    <StackPanel Orientation="Vertical">
        <Image Margin="3" Source="{Binding Path}" Height="64" Stretch="Uniform"/>
        <TextBlock Margin="3" Text="{Binding Name}"/>
    </StackPanel>