WPF：グリッドとリストボックス内の画像のサイズ変更

Question

私は水平スクロールのListBoxを持ち、各アイテムは2行のグリッドで構成されています。最初の行にはイメージが含まれ、2番目の行には境界を使用して最初の行が反映されます。
（ええ、私も知っていますが、もう一つのカバーフローの試み...）

私は画像のサイジングに助けが必要です。サイズを指定しなければ、イメージはフルサイズで表示されますが、グリッド行の高さによって制限されるようにします。ウィンドウのサイズが変更されると、画像のサイズが変更されます。

手がかりはありますか？

更新：
私は今、コードを少し変更しました。まず最初に不要なトリガーを削除しましたが、重要な部分は

• リストボックスの無効な垂直スクロールバーです。
• 削除高
• 代わりに選択された項目をスケーリングする非選択項目を縮小RenderTransformationするlayoutTransformationから変更
• coverImage
に。

これは、私が欲しいものをほとんど私に与えます。 coverImageとcoverReflectionの間にはギャップがあり、理由がわかりません。それのための手がかりは、おそらく私は新しい質問を投稿する必要があります...？

2回目の更新：
私は今までの反射 - ギャップの解決策があると思います。しかし、少しぎこちなく感じます。私はそれを行うより良い方法があると思います。

私がしたことは です - 私はもはや境界線を反転していないので、代わりにビジュアルブラシを反転しています。 - 私は視覚的なブラシ

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

ていますこれは彼らのコンテナとしてあなたの項目が同じ高になります

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

：ListBox.ActualHeightプロパティにバインドされHeightプロパティのセッターが含まれるようにListBoxItemのスタイルを変更します。そこから、コントロールテンプレートのグリッドをテンプレートの親のActualHeightにバインドし、イメージのサイズを設定できます。あなたは、高さの違いを達成するために少し再生する必要があります。たとえば、画像のある行の上に行を作成し、選択された画像の場合は、設定者で行と行のプロパティを変更できます。