CODEWITHSUNDEEP
xamluwpuwp-xaml
Jon
Jon

Reputation: 13

C# UWP - The first image inside ListView is incorrectly sized

I have a simple layout that basically displays a list of items in ListView using an ItemsWrapGrid as the panel template. The problem I am having is that the first image in the ListView is always bigger than the rest, even with a fixed width / height set. I am completely stumped.

An image of the problem:

Image

The ListView XAML is:

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

The data template:

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

Upvotes: 1

Views: 119

Answers (1)

AVK
AVK

Reputation: 3923

Instead of using ListView and changing ItemsPanelTemplate to create a GridView Effect and tackle issues one by one, I would suggest you switch to AdaptiveGridView.

You can install Nuget Package for UWP Community Toolkit from Here

Add below namespace to your page

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

Now your ListView needs to be replaced like below.

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

Output from Designer

enter image description here

Good Luck.

Upvotes: 1

Related Questions