I do have the following XAML code. And the output is as shown below in the picture. How can I achieve to fill the image within its grid in the frame? Thank you for your help.
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10,20,10,0">
<Frame
Margin="5"
BackgroundColor="AntiqueWhite"
CornerRadius="20"
HasShadow="True"
HeightRequest="200"
HorizontalOptions="FillAndExpand">
<Grid RowDefinitions="7*,3*">
<Image
Grid.Row="0"
x:DataType="products:PopularProduct"
Aspect="AspectFill"
HorizontalOptions="FillAndExpand"
Source="{Binding FullImageUrl}"
VerticalOptions="FillAndExpand" />
</Grid>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
I would make use of StackLayout with something like this
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout
HorizontalOptions="FillAndExpand"
Orientation="Horizontal"
VerticalOptions="FillAndExpand">
<Frame
Margin="10,20,10,20"
Padding="0"
BackgroundColor="AntiqueWhite"
HasShadow="False"
HeightRequest="200"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical">
<Frame
Padding="0"
CornerRadius="20"
HasShadow="True"
IsClippedToBounds="True">
<Grid RowDefinitions="7*,3*">
<Image
Grid.Row="0"
x:DataType="products:PopularProduct"
Aspect="AspectFill"
HorizontalOptions="FillAndExpand"
Source="{Binding FullImageUrl}"
VerticalOptions="FillAndExpand" />
<StackLayout
Grid.Row="1"
Margin="10"
Orientation="Vertical">
<Label Text="Any label if you want here" />
</StackLayout>
</Grid>
</Frame>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
Related
good afternoon, i have a listview with grid with two labels in the first column and an image in the second column, it happens that the image is disrespecting, without the image the label is in the correct size.
My problem is that the label doesn’t show all her content when it has the image
When you have the image the labels are wrong. image with resized error
Without the image, which would be expected but I don't know how to fix it for the cells to resize
error-free image
I've tried everything, if anyone can help me thank you
mycode
<ListView
x:Name="ListView_ListaRotas"
HasUnevenRows="True"
IsPullToRefreshEnabled="True"
ItemTapped="ListView_ListaRotas_ItemTapped"
Refreshing="ListView_ListaRotas_Refreshing"
SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame
Margin="0,5"
Padding="5,0"
BorderColor="Gray"
Opacity="{Binding PermiteCheck, Converter={StaticResource Key=OpacityConverter}}">
<Grid
Margin="0"
Padding="1,0"
ColumnSpacing="0"
RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand">
<Label
FontAttributes="Bold"
FontSize="18"
HorizontalTextAlignment="Start"
Text="{Binding Ds_Observacao}"
VerticalTextAlignment="Start" />
<StackLayout Orientation="Horizontal">
<Label
FontSize="Medium"
Text="{Binding Nm_Posto}"
VerticalTextAlignment="Center" />
<Image
Aspect="AspectFit"
HeightRequest="20"
IsVisible="{Binding HasSketch}"
Source="rascunho.png"
WidthRequest="20" />
</StackLayout>
</StackLayout>
<Image
Grid.Column="1"
Aspect="AspectFit"
HorizontalOptions="EndAndExpand"
Source="{Binding TimeLine}"
VerticalOptions="Center" />
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Needed same design of the form. My coding is this Xamarin form, Xamarin iOS, Android
<Frame Grid.Row="0" Grid.Column="0">
<Image
HeightRequest="50"
Source="Dash01.png"
WidthRequest="50" />
<Label Text="Cow Milk"/>
</Frame>
<BoxView
HeightRequest="3"
HorizontalOptions="Fill"
VerticalOptions="Start"
Color="DimGray" Grid.Row="1" Grid.Column="0" />
Try this Code
<StackLayout
Padding="0,10"
BackgroundColor="#e8f5e4"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<CollectionView
x:Name="foodList"
Grid.Row="1"
Margin="12,0"
HorizontalOptions="FillAndExpand"
ItemSizingStrategy="MeasureAllItems"
SelectionMode="Single"
VerticalOptions="FillAndExpand">
<CollectionView.ItemsLayout>
<GridItemsLayout
HorizontalItemSpacing="5"
Orientation="Vertical"
Span="2"
VerticalItemSpacing="5" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame
Margin="5"
Padding="0"
BackgroundColor="Pink"
CornerRadius="10"
HorizontalOptions="FillAndExpand"
VerticalOptions="Fill">
<StackLayout
Margin="0,0,0,10"
Padding="10"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
VerticalOptions="Fill">
<Image
Aspect="AspectFit"
HeightRequest="50"
HorizontalOptions="Center"
Source="star.png" />
<Label
FontSize="18"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="{Binding}" />
</StackLayout>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
Im making an Android application and Im trying to center right checkbox on all rows in the listview, but I cant do it.
I want do something like this. Thanks
https://imgur.com/FhecIT3
<StackLayout Orientation="Vertical">
<RelativeLayout>
<ListView ItemsSource="{Binding Funcionarios}"
HasUnevenRows="True"
Margin="20"
ItemTapped="ListView_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<image:CircleImage Source="{Binding Imagem}" Aspect="AspectFill" WidthRequest="60"
HeightRequest="60" BorderColor="Black" BorderThickness="2">
</image:CircleImage>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Nome}" FontSize="Large"/>
<Label Text="{Binding Zona}"/>
<CheckBox IsChecked="False" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativeLayout>
</StackLayout>
Try
<ViewCell>
<StackLayout Orientation="Horizontal">
<image:CircleImage Source="{Binding Imagem}" Aspect="AspectFill" WidthRequest="60" HeightRequest="60" BorderColor="Black" BorderThickness="2"> </image:CircleImage>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Nome}" FontSize="Large"/>
<Label Text="{Binding Zona}"/>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="End">
<CheckBox IsChecked="False" VerticalOptions="Center"/>
</StackLayout>
</StackLayout>
</ViewCell>
I am returning about 20 rows of data in my listview and it is just showing 12.
How can I introduce a scroll in my listview below. I tried putting a scrollview around it but no luck.
<StackLayout Grid.Column="1" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="0" Spacing="0">
<SearchBar x:Name="searchBar" Placeholder="Search" SearchCommandParameter="{Binding Source={x:Reference searchBar}, Path=Text}"/>
<StackLayout VerticalOptions="FillAndExpand">
<StackLayout VerticalOptions="FillAndExpand" Padding="1" BackgroundColor="Black">
<ListView x:Name="dataList" BackgroundColor="White">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label FontSize="20" VerticalOptions="CenterAndExpand" TextColor="Black" Text="{Binding HeadLines}"></Label>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</StackLayout>
</StackLayout>
Answer
Your XAML structure is wrong. Please have a look my code, and try it. Hope, It will help you.
Code
<Grid VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SearchBar Grid.Column="0" x:Name="searchBar" Placeholder="Search" SearchCommandParameter="{Binding Source={x:Reference searchBar}, Path=Text}" />
<ListView Grid.Column="2" x:Name="dataList" BackgroundColor="White">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label FontSize="20" VerticalOptions="CenterAndExpand" TextColor="Black" Text="{Binding HeadLines}">
</Label>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
I am with a problem. I have a imagecell inside of a Listview, inside of a Frame and i put all inside a stacklayout.
My problem is that the height of the frame with the imagecell are too expensive. Now, i just have 2 items inside but the height is like the size of the page.
The XAML code:
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<ScrollView>
<StackLayout Padding="10,20,10,10">
<Frame x:Name="frameOpcoes" OutlineColor="Gray" HasShadow="True" VerticalOptions="Fill" HorizontalOptions="FillAndExpand" BackgroundColor="White">
<StackLayout Padding="0,10,0,0" Orientation="Vertical">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" HorizontalOptions="Start">
<Label x:Name="lblOpcoes" Text="Placa: " TextColor="Gray" FontAttributes="Bold"/>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<Entry x:Name="entryPlacaLetra" TextChanged="entryLetra_TextoAlterado" Keyboard="Text" TextColor="Black" BackgroundColor="#D3D3D3" />
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="Fill">
<Label x:Name="lblTraco" Text="-" TextColor="Gray" FontAttributes="Bold"/>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<Entry x:Name="entryPlacaNum" TextChanged="entryNum_textoAlterado" Keyboard="Numeric" TextColor="Black" BackgroundColor="#D3D3D3"/>
</StackLayout>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand">
<ListView x:Name="listView" HorizontalOptions="FillAndExpand" VerticalOptions="Start" HasUnevenRows="True" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate >
<ImageCell Text="{Binding Title}" Detail="{Binding Detail}" DetailColor="Gray" TextColor="Black" ImageSource="{Binding IconSource}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</StackLayout>
</Frame>
<StackLayout Padding="0,30,0,0" x:Name="stckCalculo" VerticalOptions="EndAndExpand">
<Button x:Name="btnCalcular" BorderColor="Silver" BackgroundColor="Red" TextColor="White" Text="Prosseguir" />
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout IsVisible="{Binding IsBusy}" Padding="12"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<Frame Padding="50" OutlineColor="Black" HasShadow="true" AbsoluteLayout.LayoutFlags="PositionProportional" Opacity="0.8" BackgroundColor="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<ActivityIndicator IsRunning="{Binding IsBusy}" Color ="White"/>
<Label Text="Aguarde..." HorizontalOptions="Center" TextColor="White"/>
</Frame>
</StackLayout>
</AbsoluteLayout>
You can create a custom cell like this
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding image}" />
<Label Text="{Binding title}"
TextColor="#f35e20" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>