WPF：調整網格和列表框內的圖像

Question

我有一個水平滾動的列表框，每個項目由兩行網格組成。第一行包含一個圖像，第二行是一個用於呈現第一個圖像的邊界。
（是的，是的，我知道了，還有一次coverflow的嘗試......）

我需要一些幫助來調整圖像尺寸。如果我沒有指定任何大小，它將以全尺寸渲染圖像，但我希望它受到網格行高度的限制。如果窗口大小調整，圖像應調整大小。

任何線索？

更新：
我現在已經改變了一些代碼。首先我刪除了一個不必要的觸發器，但重要的部分是

• 在列表框上禁用垂直滾動條。上coverImage
• 移除高度從layoutTransformation改爲RenderTransformation
• 收縮，而不是縮放選擇的項目的非選擇的項目。

這給了我幾乎我想要的。 coverImage和coverReflection之間有一段距離，我無法找到原因。任何線索，og也許我應該發佈一個新的問題......？

第二次更新：
我認爲我現在有一個解決反射間隙的方法。不過，這感覺有點尷尬。我想有更好的方法來做到這一點。

我所做的是 - 我不再翻轉邊框，而是翻轉視覺畫筆。 - 我已經添加了視覺刷

一個TILEMODE =「瓷磚」現在，我不知道爲什麼這樣的作品，但它的到來接近我想要的東西，所以...

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

Answer 1

修改爲ListBoxItem的風格，包括綁定到ListBox.ActualHeight屬性Height屬性的設置：

<Style TargetType="{x:Type ListBoxItem}" x:Key="listStyle"> 
     <Setter Property="Template" Value="{StaticResource listControlTemplate}" /> 
     <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight}" /> 
    </Style> 

這會讓你的項目那麼高，它們的容器。從那裏開始，您可以將控件模板中的網格綁定到模板父級的ActualHeight並調整圖像大小。你將不得不發揮一點點以實現高度差。例如，您可以在圖像上方的行上創建圖像，對於選定的圖像，使用setter將其更改爲Row和RowSpan屬性。