✔ Problem mit ListBox

C

C-H

Erfahrenes Mitglied
Hallo!

Ich habe eine Listbox, die ich per XML (RSS) mit Daten füttere (Es werden ein paar Bilder angezeit).Das klappt auch alles wunderbar. Jetzt möchte ich aber bei klick auf ein ListBox-Item eine Groß-Version des Bildes in einem Image-Objekt anzeigen.

Am liebsten würde ich das komplett in Expression Blend machen, C# oder vb-Code wäre aber auch hilfreich. Das komplette XAML:

Code: 
Kommt gleich!
 
Irgendwie war gestern der Server ziemlich lahm, deswegen die vielen Posts. Das Browserfenster hat sich über mehrere Minuten nicht aktualisiert, deshalb habe ich mehrmals F5 gedrückt ohne zu merken, das der Eintrag schon erstellt wurde.

Naja, jedenfalls habe ich das Problem mittlerweile selbst lösen können. Beide Objekte (Die ListBox und das gebundene Image) müssen innerhalb des gleichen DataContext stehen! Das erreicht man z.B. damit, dass man das Grid (oder irgendein anderen Container) an die Datenquelle bindet und den Elementen über ItemsSource="{Binding}" (ListBox) bzw. Source="{Binding XPath=media:content/@url}" (Textbox, mit Pfad zum darzustellenden XML-Eintrag) mitteilt, dass die Quelle vom Eltern-Element geerbt werden soll.

Als Beispiel hier der Code:
Code: 
<Window
 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/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
 x:Class="GlassTest_C_Sharp.Window1"
 x:Name="Window"
 Title="Glass-Test"
 Width="904" Height="959" Margin="0,0,0,0" HorizontalContentAlignment="Left" Padding="0,0,0,0" Background="#FFFFFFFF">
 <Window.Resources>
  <XmlDataProvider x:Key="flickrRSS" d:IsDataSource="True" Source="http://api.flickr.com/services/feeds/photos_public.gne?id=9297779@N08&amp;lang=de-de&amp;format=rss_200">
   <XmlDataProvider.XmlNamespaceManager>
    <XmlNamespaceMappingCollection>
     <XmlNamespaceMapping Prefix="dc" Uri="<A href="http://purl.org/dc/elements/1.1/"/">http://purl.org/dc/elements/1.1/"/>
     <XmlNamespaceMapping Prefix="media" Uri="<A href="http://search.yahoo.com/mrss/"/">http://search.yahoo.com/mrss/"/>
    </XmlNamespaceMappingCollection>
   </XmlDataProvider.XmlNamespaceManager>
  </XmlDataProvider>
  <DataTemplate x:Key="DataTemplate">
   <StackPanel Height="122" Orientation="Vertical" ClipToBounds="False">
    <TextBlock Width="80" Height="Auto" Background="{x:Null}" Foreground="#FF000000" TextAlignment="Center" TextTrimming="WordEllipsis" Margin="0,5,0,0" Panel.ZIndex="1" Text="{Binding Mode=OneWay, XPath=media:title}"></TextBlock>
    <Rectangle Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="0" RadiusX="5" RadiusY="5" Margin="0,-14,0,0" Width="60" Height="8">
     <Rectangle.BitmapEffect>
      <BlurBitmapEffect Radius="7"/>
     </Rectangle.BitmapEffect>
    </Rectangle>
    <StackPanel Margin="2,5,2,0" Width="84" Height="Auto">
     <Border Margin="0,0,0,0" Width="74" Height="88" Background="#FFFFFFFF" BorderBrush="#FF848484" BorderThickness="1,1,1,1">
      <Border.BitmapEffect>
       <DropShadowBitmapEffect ShadowDepth="3"/>
      </Border.BitmapEffect>
      <Image Source="{Binding Mode=OneWay, XPath=media:thumbnail/@url}" HorizontalAlignment="Center" Margin="0,4,0,0" VerticalAlignment="Top" Width="66" Height="68" x:Name="ListBoxThumbnailImage"/>
     </Border>
    </StackPanel>
   </StackPanel>
  </DataTemplate>
  <ItemsPanelTemplate x:Key="HorizontalPanel">
   <WrapPanel/>
  </ItemsPanelTemplate>
 </Window.Resources>
 <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource flickrRSS}, XPath=rss/channel/item}">
  <Grid.RowDefinitions>
   <RowDefinition Height="151.503"/>
   <RowDefinition Height="*"/>
   <RowDefinition Height="60"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="*"/>
   <ColumnDefinition Width="189"/>
  </Grid.ColumnDefinitions>
  <Border HorizontalAlignment="Center" MinHeight="100" MinWidth="100" VerticalAlignment="Center" Width="Auto" Panel.ZIndex="1" Background="#FFFFFFFF" BorderBrush="#FF6B6B6B" BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" Grid.Row="1" Margin="20,20,20,20" Height="Auto" d:IsLocked="True">
   <Border.BitmapEffect>
    <DropShadowBitmapEffect Color="#FF000000" Opacity="1" ShadowDepth="5" Softness="0.65"/>
   </Border.BitmapEffect>
   <Image Margin="10,10,10,10" x:Name="ImageFull" Width="{Binding Mode=OneWay, XPath=media:content/@width}" Height="{Binding Mode=OneWay, XPath=media:content/@height}" Panel.ZIndex="2" Source="{Binding XPath=media:content/@url}" RenderTransformOrigin="0.5,0.5" />
  </Border>
  <Rectangle RenderTransformOrigin="0.5,0.5" Fill="#59FFFFFF" Stroke="#FF333333" HorizontalAlignment="Stretch" Margin="1,0,0,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Grid.Row="1">
   <Rectangle.RenderTransform>
    <TransformGroup>
     <ScaleTransform ScaleX="1" ScaleY="-1"/>
     <SkewTransform AngleX="0" AngleY="0"/>
     <RotateTransform Angle="0"/>
     <TranslateTransform X="0" Y="0"/>
    </TransformGroup>
   </Rectangle.RenderTransform>
  </Rectangle>
  <ListBox RenderTransformOrigin="0.5,0.5" d:LayoutOverrides="VerticalAlignment" Margin="0,8,0,1" Background="{x:Null}" BorderBrush="{x:Null}" HorizontalContentAlignment="Left" ItemTemplate="{DynamicResource DataTemplate}" ItemsPanel="{DynamicResource HorizontalPanel}" ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Disabled" x:Name="ImageListBox" IsSynchronizedWithCurrentItem="True" Grid.ColumnSpan="2">
   <ListBox.RenderTransform>
    <TransformGroup>
     <ScaleTransform ScaleX="1" ScaleY="1"/>
     <SkewTransform AngleX="0" AngleY="0"/>
     <RotateTransform Angle="0"/>
     <TranslateTransform X="0" Y="0"/>
    </TransformGroup>
   </ListBox.RenderTransform>
  </ListBox>
  <Rectangle Fill="#59FFFFFF" Stroke="#FF333333" StrokeLineJoin="Bevel" Margin="0,0,0,0" Grid.Column="1" Grid.RowSpan="1" Opacity="1" Grid.Row="1"/>
  <Border MinHeight="100" MinWidth="100" Width="102" Panel.ZIndex="1" Background="#FFFFFFFF" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" RenderTransformOrigin="0.5,0.5" Margin="4,20,0,0" x:Name="Border_ImagePreview" Height="102" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Top">
   <Border.RenderTransform>
    <TransformGroup>
     <ScaleTransform ScaleX="1" ScaleY="0.95"/>
     <SkewTransform AngleX="0" AngleY="0"/>
     <RotateTransform Angle="0"/>
     <TranslateTransform X="0" Y="0"/>
    </TransformGroup>
   </Border.RenderTransform>
   <Image Margin="2,2,2,2" x:Name="ImagePreview" Panel.ZIndex="2" Source="{Binding Mode=Default, XPath=media:thumbnail/@url}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto"/>
  </Border>
  <Rectangle RenderTransformOrigin="0.5,0.5" Stroke="{x:Null}" StrokeLineJoin="Bevel" Margin="4,119,0,0" x:Name="Mirror_ImagePreview" VerticalAlignment="Top" Height="100" Grid.Column="1" Grid.Row="1" Opacity="0.645" HorizontalAlignment="Center" Width="100">
   <Rectangle.Fill>
    <VisualBrush Visual="{Binding ElementName=Border_ImagePreview}" />
   </Rectangle.Fill>
   <Rectangle.RenderTransform>
    <TransformGroup>
     <ScaleTransform ScaleX="1" ScaleY="-1"/>
     <SkewTransform AngleX="0" AngleY="0"/>
     <RotateTransform Angle="0"/>
     <TranslateTransform X="0" Y="0"/>
    </TransformGroup>
   </Rectangle.RenderTransform>
   <Rectangle.OpacityMask>
    <LinearGradientBrush EndPoint="0.52,0.484" StartPoint="0.523,1.083">
     <GradientStop Color="#FF000000" Offset="0"/>
     <GradientStop Color="#00FFFFFF" Offset="1"/>
    </LinearGradientBrush>
   </Rectangle.OpacityMask>
  </Rectangle>
  <Grid Margin="12,180,8,0" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top" Height="200" x:Name="GridSidebar">
   <StackPanel Margin="8,8,8,8">
    <TextBlock TextTrimming="WordEllipsis" x:Name="textblock_imagename" Height="24" Background="{x:Null}" FontWeight="Bold" Foreground="#FF000000"  Text="{Binding Mode=OneWay, XPath=media:title}" TextWrapping="NoWrap" Width="Auto"/>
    <TextBlock TextTrimming="WordEllipsis" x:Name="textblock_author" Height="18" Background="{x:Null}" FontWeight="Normal" Foreground="#FF000000"  Text="{Binding Mode=OneWay, XPath=author}" TextWrapping="NoWrap" Width="Auto"/>
    <TextBlock TextTrimming="WordEllipsis" x:Name="textblock_" Height="18" Background="{x:Null}" FontWeight="Normal" Foreground="#FF000000"  Text="{Binding Mode=OneWay, XPath=media:title}" TextWrapping="NoWrap" Width="Auto"/>
   </StackPanel>
  </Grid>
  <GridSplitter HorizontalAlignment="Left" Margin="0,1,0,1" Width="4" Background="#99F0F0F0" Grid.Column="1" Grid.Row="1" ShowsPreview="False"/>
  <Slider HorizontalAlignment="Left" Margin="20,0,0,8" x:Name="sliderImageZoomer" VerticalAlignment="Bottom" Width="200" Height="22" Grid.Row="2" Maximum="1600" Minimum="1"/>
  <TextBlock HorizontalAlignment="Left" Margin="20,8,0,0" VerticalAlignment="Top" Width="Auto" Height="18" Grid.Row="2" Text="Zoom:" TextWrapping="Wrap"/>
  <TextBlock HorizontalAlignment="Left" Margin="57.84,8,0,0" x:Name="TextBox_ZoomValue" VerticalAlignment="Top" Width="Auto" Height="15.96" Grid.Row="2" Text="{Binding Path=Value, ElementName=sliderImageZoomer, Mode=Default}" TextWrapping="Wrap"/>
 </Grid>
</Window>

Der Slider zum Zoomen des Bildes funktioniert noch nicht, da sich scheinbar der Wert der gebundenen Attribute (Height & Width) nicht so einfach überschreiben lässt. Muss mal sehen woran das liegt. Wer eine Idee hat, darf sie natürlich hier loswerden ;-)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück