WPF: Größenanpassung für Bilder in grid-und listbox
Habe ich ein Listenfeld mit der horizontale Bildlauf, und jedes Element besteht aus einer zwei-Zeilen-raster. Die erste Zeile enthält ein Bild, und die zweite Zeile einen Rand verwendet werden, zu machen ein Spiegelbild der ersten.
(Yeah, Yeah. Ich weiß. Ein weiteres coverflow Versuch...)
Brauche ich etwas Hilfe bei der Größenanpassung der Bilder. Wenn ich nicht geben Sie eine beliebige Größe, es rendert das Bild in voller Größe, aber ich will es werden beschränkt durch die Höhe des grid-Zeile. Wenn sich das Fenster ändert die Größe der Bilder sollten die Größe.
Irgendwelche Hinweise?
Update:
Ich habe jetzt änderte den code ein wenig. Zuerst habe ich entfernt eine unnötige Auslöser, aber der wichtige Teil ist
- Deaktivierte vertikale Bildlaufleiste auf listbox.
- Entfernt Höhe auf coverImage
- Geändert von layoutTransformation zu RenderTransformation
- Schrumpfen nicht ausgewählte Element anstelle der Skalierung der ausgewählten Artikel.
Das gibt mir fast, was ich will. Es gibt eine Lücke zwischen dem coverImage und die coverReflection, dass ich cant finden einen Grund für. Irgendwelche Hinweise für das og vielleicht sollte ich post eine neue Frage...?
Zweite Update:
Ich denke ich habe eine Lösung, die für die Reflexion-Lücke nun. Es fühlt sich ein wenig umständlich, aber. Ich denke, es gibt bessere Wege, es zu tun.
Was ich getan habe, ist
- Ich bin nicht mehr Umklappen der Grenze, ich bin durch die visuelle Pinsel statt.
- Ich habe eine TileMode="Tile" für die visuelle Pinsel
Nun, ich bin mir nicht sicher, warum dies funktioniert, aber es kommt nah an, was ich will, so...
<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/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="UntitledProject1.Window1"
x:Name="Window"
Title="Window1"
Width="801" Height="786">
<Window.Resources>
<XmlDataProvider x:Key="dataProvider" XPath="Bilder">
<x:XData>
<Bilder xmlns="">
<Bilde>75760-1_-8589666289339775808.jpg</Bilde>
<Bilde>73255-3_-8589662994232744558.jpg</Bilde>
<Bilde>75760-1_-8589666289339775808.jpg</Bilde>
<Bilde>73255-3_-8589662994232744558.jpg</Bilde>
<Bilde>75760-1_-8589666289339775808.jpg</Bilde>
<Bilde>73255-3_-8589662994232744558.jpg</Bilde>
</Bilder>
</x:XData>
</XmlDataProvider>
<ControlTemplate x:Key="listControlTemplate" TargetType="{x:Type ListBoxItem}">
<Grid x:Name="listItemGrid">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image x:Name="coverImage"
Source="{Binding Path=InnerText}"
Stretch="Uniform"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Grid.Row="0"
RenderTransformOrigin="0.5,1">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.7" ScaleY="0.7"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Border x:Name="coverReflection"
RenderTransformOrigin="0.5,0"
Height="{Binding Path=ActualHeight, ElementName=coverImage, Mode= Default}"
VerticalAlignment="Top"
Grid.Row="1"
>
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.0,1" StartPoint="0.0,0">
<GradientStop Color="#00000000" Offset="0.6"/>
<GradientStop Color="#BBFFFFFF" Offset="0"/>
</LinearGradientBrush>
</Border.OpacityMask>
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.7" ScaleY="0.7"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Border.RenderTransform>
<Border.Background>
<VisualBrush Visual="{Binding ElementName=coverImage}" TileMode="Tile">
<VisualBrush.Transform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</VisualBrush.Transform>
</VisualBrush>
</Border.Background>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="RenderTransform" TargetName="coverImage">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Setter.Value>
</Setter>
<Setter Property="RenderTransform" TargetName="coverReflection">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="{x:Type ListBoxItem}" x:Key="listStyle">
<Setter Property="Template" Value="{StaticResource listControlTemplate}" />
</Style>
</Window.Resources>
<Window.BindingGroup>
<BindingGroup/>
</Window.BindingGroup>
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource dataProvider}, XPath=/Bilder/Bilde}">
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ItemsSource="{Binding }"
IsSynchronizedWithCurrentItem="True"
Background="#FF000000"
ItemContainerStyle="{StaticResource listStyle}"
VerticalAlignment="Stretch"
>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</Window>InformationsquelleAutor Vegar | 2009-02-25
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ändern Sie den Stil für die
ListBoxItemum eine Set-Methode für dieHeightEigenschaft, die gebunden ist, um dieListBox.ActualHeightEigenschaft:Damit wird Ihre Gegenstände so groß wie Ihre container. Von dort aus können Sie binden Sie das Grid-template-Steuerelement, um die ActualHeight der Vorlagen-Elternteil und die Größe Ihres Bilds. Sie haben ein wenig zu spielen und etwas zu erreichen, der Höhenunterschied. Zum Beispiel, können Sie erstellen auf die Zeile oberhalb der Zeile mit den Bildern und den für das ausgewählte Bild ändern Sie die Zeilen-und RowSpan-Eigenschaften mit einem setter.
Hängt von der container verwendet. In Ihrem Fall - Raster, VirtualizingStackPanel, ListBox und alle Fenster Bildlauf unterstützt, was bedeutet, Kinder aus dem viewport Grenzen.
Diesem sehr nahe war, was ich brauchte. Allerdings habe ich die Wunde mit einer Bildlaufleiste, die hatte eine winzige Menge werfen. Ändern der Vorfahren Art von Listbox zu Stackpanel gearbeitet (da mein ItemsPanelTemplate war ein StackPanel).
InformationsquelleAutor Franci Penov