如何在xaml中以缩略图的形式显示多个图像

Question

我正在尝试在银灯应用程序中创建xaml页面。如何创建这样的页面，我已经创建了一个xaml页面，但是我不能像这样创建，我的代码是...

<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>

它显示名称ListView不存在，请找到附件图片。

Answer 1

找不到

ListView，因为它不是您正在使用的Silverlight版本的一部分。

您可以将样式应用于ListBox控件，并使用silverlight Toolkit中的WrapPanel替换项面板模板。

这是一个资源字典，其中包含一些可应用于ListBox控件的样式，以使您在附加图像中显示结果。

<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>

使用ListBox_HorizontalWrapStyle，您只需将其应用于目标 ListBox 控件

<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>