ListView 中的图像展开到 ListView 容器大小保持纵横比

Question

I am making kind of a picture carousel in my app using a ListView with horizontal scrolling.

The height of my ListView is binded to the window, so it can change.

My images are always way bigger than the height of my view and I can't figure out how to make sure the image dosen't take more space than it has.

(height should be = height of the ListView - the height of the Checkbox - height of the 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

The issue is that a StackPanel has no notion of available space. It just stacks its children and if there is not enough space to accomodate them, they will be cut-off by the containing element.

In order to make your images size to fit the available space, you could use a Grid with two rows. The first using a Height of Auto to make it take only as much space as the CheckBox needs and the second using the default size of one star to take up the remaining space.

Columns and rows that are defined within a Grid can take advantage of Star sizing to distribute remaining space proportionally . 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>

Alternatively, you can use a DockPanel with LastChildFill set to true (default).

If you set the LastChildFill property to true , which is the default setting, the last child element of a DockPanel always fills the remaining space , regardless of any other dock value that you set on the last child element.

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