How to display multiple images as thumbnails in xaml

Question

I am trying to create xaml page in silver light application. How to create a page like this, I have created a xaml page, but I can't create like this, my code is...

<UserControl x:Class="XXX.Views.Attachment.AttachmentViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:xxx.Controls"
xmlns:local2="clr-namespace:xxx.Controls"
xmlns:XXX="clr-namespace:xxx.Controls;assembly=XXX.SL"
xmlns:baseconverters="clr-namespace:System.Windows.Converters;assembly=XXX.SL"
mc:Ignorable="d"
d:DesignHeight="800" FontFamily="{StaticResource MainFont}" d:DesignWidth="350">

    <Grid x:Name="LayoutRoot" >
        <Grid.RowDefinitions>
            <RowDefinition  Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.Resources>
            <Style x:Key="HeaderStyle" TargetType="TextBlock" >
                <Setter Property="Margin" Value="5"/>
                <Setter Property="TextAlignment" Value="Center"/>
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="FontSize" Value="20"/>

            </Style>
            </Grid.Resources>
            <TextBlock Text="attachments" Style="{StaticResource HeaderStyle}"/>
        <Rectangle Height="2" VerticalAlignment="Bottom" Fill="{StaticResource ColorDefaultGray}" Margin="0,40,0,5"/>
        <ListView Grid.Row="1" x:Name="FileListItemsControl" VerticalAlignment="Top" Height="200" Margin="20" >
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <Image Source="{Binding Thumbnail, Converter={StaticResource ThumbnailToImageConverter}}" Height="150" Width="300" />
                        <TextBlock Text="{Binding FileName}" Style="{StaticResource BodyTextBlockStyle}" />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</UserControl>

it shows the name ListView does not exist, please find the attached image.

Have you tried using a `WrapPanel` instead of a `StackPanel` for your `ItemsPanelTemplate`? — Geoff James, May 11 '16 at 13:16
no, no problem with stackPanel i think, it shows listview is not found — AhammadaliPK, May 11 '16 at 13:17
OK, I only had a quick glance at the code and noticed that might help if you need it to be responsive. Do you mean in the Xaml designer it says ListView is not found? Or are you on about your code-behind? — Geoff James, May 11 '16 at 13:20
At which line are you getting the blue squiggly error? Can you post the _exact_ error? — Geoff James, May 11 '16 at 13:30
the name list view doesnot exist in the current context , this is the error i am getting — AhammadaliPK, May 11 '16 at 13:35
See http://stackoverflow.com/questions/706603/the-name-controlname-does-not-exist-in-the-current-context — Geoff James, May 11 '16 at 13:36
Do you have any code in the code-behind file, it looks like something is loking for a control named 'ListView' when it is 'FileListItemsControl' — Dean Chalk, May 11 '16 at 14:44
Where are you getting the `ListView` from. What version of silverlight are you using. Shouldn't that be a `ListBox` — Nkosi, May 11 '16 at 16:22

Nkosi · Answer 1 · 2016-05-11T16:54:21.407

ListView is not found because it is not part of the version of Silverlight you are using.

You can apply a style to a ListBox control and replacing the item panel template with a WrapPanel from silverlight Toolkit.

Here is a Resource Dictionary with some styles that can be applied to ListBox controls to get he result you displayed in your attached image.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    xmlns:System="clr-namespace:System;assembly=mscorlib">

    <!--Wrapping ListBox Styles-->
    <Style x:Key="StretchedItemContainerStyle" TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>

    <Style x:Key="ListBox_StretchedItemStyle" TargetType="ListBox">
        <Setter Property="ItemContainerStyle" Value="{StaticResource StretchedItemContainerStyle}"/>
    </Style>

    <Style x:Key="ListBox_HorizontalWrapStyle" TargetType="ListBox">
        <Setter Property="ItemContainerStyle" Value="{StaticResource StretchedItemContainerStyle}"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel Orientation="Horizontal" Margin="0"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <ScrollViewer VerticalScrollBarVisibility="Auto" BorderBrush="{x:Null}" >
                        <ItemsPresenter />
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>

    <Style x:Key="ListBox_VerticalWrapStyle" TargetType="ListBox">
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="ListBoxItem">
                    <Setter Property="Margin" Value="0" />
                    <Setter Property="Padding" Value="0" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate >
                    <toolkit:WrapPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--End Wrapping ListBox Styles-->

</ResourceDictionary>

With the ListBox_HorizontalWrapStyle you just need to apply it to your target ListBox control

<ListBox Grid.Row="1" x:Name="FileListItemsControl" VerticalAlignment="Top" Height="200" Margin="20" Style={StaticResource ListBox_HorizontalWrapStyle} >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Image Source="{Binding Thumbnail, Converter={StaticResource ThumbnailToImageConverter}}" Height="150" Width="300" />
                <TextBlock Text="{Binding FileName}" Style="{StaticResource BodyTextBlockStyle}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

How to display multiple images as thumbnails in xaml

1 Answers1