ListView 中的圖像展開到 ListView 容器大小保持縱橫比

Question

我正在使用帶有水平滾動的ListView在我的應用程序中制作一種圖片輪播。

我的ListView的高度綁定到 window，所以它可以改變。

我的圖像總是比視圖的高度大得多，我不知道如何確保圖像不會占用比它更多的空間。

（高度應該是 = ListView的高度 - Checkbox的高度 - ScrollBar的高度）

<ListView x:Name="listView1" Margin="18,226,15,10" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
   <ListView.ItemTemplate>
      <DataTemplate>
         <StackPanel Orientation="Vertical" CanVerticallyScroll="False" >
            <CheckBox Content="Select" />
            <Image  Source="{Binding Source}" Margin="1" VerticalAlignment="Center" >
               <Image.InputBindings>
                 <MouseBinding MouseAction="LeftDoubleClick" Command="{Binding MouseDoubleClickCommand}" CommandParameter="{Binding Source}"/>
               </Image.InputBindings>
            </Image> 
         </StackPanel>
      </DataTemplate>
   </ListView.ItemTemplate>
   <ListView.ItemsPanel>
      <ItemsPanelTemplate>
         <StackPanel Orientation="Horizontal" CanVerticallyScroll="False"></StackPanel>
      </ItemsPanelTemplate>
   </ListView.ItemsPanel>
</ListView>

Answer 1

問題是StackPanel沒有可用空間的概念。 它只是堆疊其子元素，如果沒有足夠的空間容納它們，它們將被包含元素切斷。

為了使您的圖像大小適合可用空間，您可以使用兩行Grid 。 第一個使用Auto Height使其僅占用CheckBox所需的空間，第二個使用默認大小的一顆星來占用剩余空間。

在Grid中定義的列和行可以利用星型大小來按比例分配剩余空間。 When Star is selected as the height or width of a row or column, that column or row receives a weighted proportion of the remaining available space.

<DataTemplate>
   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition Height="Auto"/>
         <RowDefinition/>
      </Grid.RowDefinitions>
      <CheckBox Content="Select"/>
      <Image Grid.Row="1" Source="{Binding Source}" Margin="1" VerticalAlignment="Center">
         <Image.InputBindings>
            <MouseBinding MouseAction="LeftDoubleClick" Command="{Binding MouseDoubleClickCommand}" CommandParameter="{Binding Source}"/>
         </Image.InputBindings>
      </Image> 
   </Grid>
</DataTemplate>

或者，您可以使用將LastChildFill設置為true （默認）的DockPanel 。

如果您將LastChildFill屬性設置為true （這是默認設置），則DockPanel的最后一個子元素始終填充剩余空間，而不管您在最后一個子元素上設置的任何其他停靠值。

<DataTemplate>
   <DockPanel>
      <CheckBox DockPanel.Dock="Top" Content="Select"/>
      <Image Source="{Binding Source}" Margin="1" VerticalAlignment="Center">
         <Image.InputBindings>
            <MouseBinding MouseAction="LeftDoubleClick" Command="{Binding MouseDoubleClickCommand}" CommandParameter="{Binding Source}"/>
         </Image.InputBindings>
      </Image> 
   </DockPanel>
</DataTemplate>