C# UWP - ListView 中的第一个图像大小不正确答案

【问题标题】：C# UWP - The first image inside ListView is incorrectly sizedC# UWP - ListView 中的第一个图像大小不正确
【发布时间】：2017-09-11 13:16:31
【问题描述】：

我有一个简单的布局，基本上使用 ItemsWrapGrid 作为面板模板在 ListView 中显示项目列表。我遇到的问题是 ListView 中的第一个图像总是比其他图像大，即使设置了固定的宽度/高度。我完全被难住了。

问题的图片：

ListView XAML 是：

<ListView ItemsSource="{Binding Currencies}" ItemTemplate="{StaticResource PortfolioCurrencyTemplate}">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal" Width="Auto" Height="Auto"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

数据模板：

<Page.Resources>
    <DataTemplate x:Key="PortfolioCurrencyTemplate" x:DataType="viewModels:PortfolioViewModel">
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
              BorderBrush="Black"
              BorderThickness="1"
              CornerRadius="2"
              Padding="10">

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>

            <Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="1" MaxWidth="100" MaxHeight="100" Source="https://www.cryptocompare.com/media/19633/btc.png"/>

            <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center"/>
            <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Symbol}" VerticalAlignment="Center"/>
            <TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding LastPrice}" VerticalAlignment="Center"/>

        </Grid>            
    </DataTemplate>
</Page.Resources>

【问题讨论】：

标签： xaml uwp uwp-xaml

【解决方案1】：

建议您改用AdaptiveGridView，而不是使用ListView 和更改ItemsPanelTemplate 来创建GridView 效果并解决问题。

您可以从Here 为UWP Community Toolkit 安装 Nuget 包

将以下命名空间添加到您的页面

xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

现在您的ListView 需要如下替换。

<controls:AdaptiveGridView ItemsSource="{Binding Currencies}" 
                           ItemTemplate="{StaticResource PortfolioCurrencyTemplate}" 
                           DesiredWidth="250"/>

设计师的输出

祝你好运。

【讨论】：