2016-05-11 16 views
1

enter image description hereWie mehrere Bilder als Thumbnails in XAML

Ich versuche zu schaffen XAML Seite in Silber Licht Anwendung anzuzeigen. Wie eine Seite wie diese erstellen, habe ich eine XAML-Seite erstellt, aber ich kann so nicht schaffen, ist mein Code ...

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

es zeigt den Namen ListView nicht existiert, finden Sie bitte das beiliegende Bild.

+0

Haben Sie versucht, ein 'WrapPanel' anstelle einem' StackPanel' Verwendung für Ihre 'ItemsPanelTemplate'? –

+0

nein, kein Problem mit StackPanel ich denke, es zeigt Listview nicht gefunden – AhammadaliPK

+0

OK, ich hatte nur einen kurzen Blick auf den Code und bemerkte, dass es helfen könnte, wenn Sie es brauchen, um reagieren zu können. Meinst du im Xaml-Designer, dass ListView nicht gefunden wird? Oder bist du auf deinem Code-behind? –

Antwort

1

ListView wird nicht gefunden, da es nicht Teil der Version von Silverlight ist, die Sie verwenden.

Sie können einen Stil auf ein ListBox Steuerelement anwenden und die Elementfeldvorlage durch ein WrapPanel von silverlight Toolkit ersetzen.

Hier ist ein Ressourcenwörterbuch mit einigen Stilen, die auf ListBox Steuerelemente angewendet werden können, um das Ergebnis zu erhalten, das Sie in Ihrem angehängten Bild angezeigt haben.

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

Mit dem ListBox_HorizontalWrapStyle Sie gerade brauchen es, um Ihr Ziel anzuwenden ListBox Steuer

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