CODEWITHSUNDEEP
c#uwp
user13671010
user13671010

Reputation:

How to add text next to image in `listview` UWP

In my list view I have the song Album Cover as well as the name. This works great but the in the listview it displays the image and then underneath the song name. I would like to have the image and then next to the image the song name.

This is my Code:

<ListView
        x:Name="AudioFilesLV" 
        ItemsSource="{x:Bind MusicList}"
        Margin="10,146,10,113"
        FontStyle="Oblique"
        FontWeight="Bold"
        ItemClick="SongClicked"
        ScrollViewer.VerticalScrollBarVisibility="Auto"
        IsItemClickEnabled="True" 
        RequestedTheme="Default" 
        Foreground="White" 
        CanDragItems="True"
        Background="#99ffffff"
        CornerRadius="25">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Tapped="StackPanel_Tapped" >
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding AlbumCover}"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding FileName}" />
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>

So at the moment it looks like this:

 ----------
 | Image  |
 ----------
  Song Name

I would like to have it like this:

 ----------
 | Image  |  Song Name
 ----------

Thanks

Upvotes: 1

Views: 193

Answers (1)

Ryan Thomas
Ryan Thomas

Reputation: 1992

It appears you have an extra, and unnecessary, StackPanel. The Image and TextBlock should go inside the same on so the DataTemplate for the ListView should look like this.

<ListView.ItemTemplate>
    <DataTemplate>
        <StackPanel Tapped="StackPanel_Tapped" >
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding AlbumCover}" />
                <TextBlock Text="{Binding FileName}" />
            </StackPanel>
        </StackPanel>
    </DataTemplate>
</ListView.ItemTemplate>

You may also want to play with VerticalAlignment / VerticalContentAlignment properties of the TextBlock so they line up in the middle.

Upvotes: 2

Related Questions