xaml - C# UWP - The first image inside ListView is incorrectly sized -
i have simple layout displays list of items in listview using itemswrapgrid panel template. problem having first image in listview bigger rest, fixed width / height set. stumped.
an image of problem:
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>
instead of using listview
, changing itemspaneltemplate
create gridview effect , tackle issues 1 one, suggest switch adaptivegridview
.
you can install nuget package uwp community toolkit here
add below namespace page
xmlns:controls="using:microsoft.toolkit.uwp.ui.controls"
now listview
needs replaced below.
<controls:adaptivegridview itemssource="{binding currencies}" itemtemplate="{staticresource portfoliocurrencytemplate}" desiredwidth="250"/>
output designer
good luck.
Comments
Post a Comment