I have the following Xamarin forms grid.
<ListView x:Name="liewViewData" ItemsSource="{Binding InfoList}" ItemAppearing="OnItemApprearing" ItemSelected="OnItemSelected" RowHeight="{Binding ListViewRowHeight}">
<ListView.Header>
<StackLayout Padding="10,5,0,5" BackgroundColor="#cccccc">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="" VerticalTextAlignment="Center" HorizontalTextAlignment="Start" FontSize="Small" />
<Label Grid.Column="1" Text="Demo" VerticalTextAlignment="Center" FontSize="Small" />
</Grid>
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Image Source="danger.png" Grid.Column="0" BackgroundColor="Transparent" HorizontalOptions="Center" VerticalOptions="Center"></Image>
<Label Grid.Column="1" Text="{Binding Name}" VerticalTextAlignment="Center" FontSize="Small" />
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
What I need is that on the ItemAppearing event for each grid row added I call an API and update the row data such as the image etc.
Any clue on how to do this?
You need to data bind the image, implement OnPropertyChanged for that field and assign value to it in the event that you mention. Not sure which part you were missing, but as simple as that.
Related
I am working with a collectionview using GridItemsLayout orientation=“Vertical” Span=“2”.
When I click on a button that expands the lower part of my grid item. Currently only by using ItemSizingStrategy.MeasureAllItems I am able to get the lower part to expand. I was wondering if there is a way of controlling the item positioning on the image so the images always align and only the lower half expands evenly.
I am aware each item has its own layout, but this looks messy. I’ve read the documentation mention this type of sizing.
<ContentPage.Content>
<StackLayout>
<CollectionView x:Name="CollectionList"
VerticalOptions="FillAndExpand"
ItemsSource="{Binding Shares}"
IsGrouped="True"
ItemSizingStrategy="MeasureAllItems">
<!--HEADER-->
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal"
Padding="5"
BackgroundColor="#f7f7fb">
<Label x:Name="labelname"
Text="{Binding GroupKey}"
/>
<Button Text=" More"
FontSize="16"
Clicked="OpenButton_Clicked"/>
</StackLayout>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<!--TEMPLATING-->
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="2" />
</CollectionView.ItemsLayout>
<!--BODY-->
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="viewmodels:ShareViewModel">
<Grid Padding="5" Margin="1,0,1,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ImageButton x:Name="image"
Source="{Binding ImageLink}"
WidthRequest="150"
Clicked="FullImageView"
Grid.ColumnSpan="2"
Aspect="AspectFill"
Grid.Row="0"
Grid.Column="0"/>
<Label FontSize="16"
Text="{Binding Name}"
Grid.Row="1"
Grid.Column="0"/>
<Label x:Name="label_more"
Text="More"
Grid.Row="1"
Grid.Column="1"
HorizontalTextAlignment="End"/>
<Label
Text="{Binding CreateDate}"
Grid.Row="2"
Grid.Column="0"/>
<ImageButton IsVisible="{Binding TVNImageSet}"
Command="{Binding BindingContext.ToggleTVNCommand, Source={x:Reference Name=sharepage}}"
CommandParameter="{Binding .}"
Source="addresscard.png"
Grid.Row="2"
Grid.Column="1">
</ImageButton>
<!--Lower Section if the card is tapped (EXPAND)-->
<StackLayout
IsVisible="{Binding TVNVisible}"
Grid.Row="3"
Grid.ColumnSpan="2">
<StackLayout Orientation="Horizontal"
IsVisible="{Binding PhoneVisible}"
ClassId="{Binding Phone}">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"
NumberOfTapsRequired="1"
/>
</StackLayout.GestureRecognizers>
<Image Source="call.png"
WidthRequest="15"/>
<Label
FontSize="12"
Text="{Binding Phone}" />
</StackLayout>
<Label
FontSize="12"
Text="{Binding Address}"
IsVisible="{Binding AddressVisible}">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1" NumberOfTapsRequired="1"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
All BindingContext.ToggleTVNCommand does is set TVNVisible to true which shows the lower half the "expanding potion". I don't need to use collection view if there is an easier way fo displaying this data, but CollectionVView seemed like the best choice for the layout and item source I wanted.
After digging around GitHub forums on bugs and updates for Xamarin, someone mentioned to just work with SyncFusion's sfListview the membership is not that bad and my company is willing to pay for it if it makes working with Xamarin easier.
That wasn't the solution I was hoping for, but it works and their customer support is great.
below is the reference
https://help.syncfusion.com/xamarin/listview/working-with-sflistview
Has anyone implanted something like the following, that could be of relevance to me? How can I put a frame that encompasses both the group and the items in the photo:
click to enlarge
I have a dirty but simple way:
When I make same forms I use ListView without grouping and ViewCell with RepeaterView. You need remember that it is not the best perfomance way.
If you want to design the UI like the screenshot your provided, using frame to crop image, you can take a look:
<CollectionView IsGrouped="true" ItemsSource="{Binding Animals}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Frame Padding="0"
Grid.RowSpan="2"
BorderColor="Black"
CornerRadius="50"
HeightRequest="40"
HorizontalOptions="Center"
IsClippedToBounds="True"
WidthRequest="40">
<Image
Aspect="AspectFill"
HeightRequest="100"
Source="{Binding ImageUrl}"
WidthRequest="100" />
</Frame>
<Label
Grid.Column="1"
FontAttributes="Bold"
Text="{Binding Name}" />
<Label
Grid.Row="1"
Grid.Column="1"
FontAttributes="Italic"
Text="{Binding Location}"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<Label
BackgroundColor="LightGray"
FontAttributes="Bold"
FontSize="Large"
Text="{Binding Name}" />
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
</CollectionView>
About viewmodel class, you can take a look Xamarin.Forms CollectionView Grouping
Is it possible to create a `ListView' like the attached screen shot using Xamarin Forms.
Try this:
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding image}" WidthRequest="50" HeightRequest="50" Grid.Column="0" VerticalOptions="Center"/>
<StackLayout Grid.Column="1">
<Label Text="{Binding property1}" TextColor="#f35e20" HorizontalTextAlignment="Center"/>
</StackLayout>
<StackLayout Grid.Column="2">
<Label Text="{Binding property2}" HorizontalTextAlignment="Center" TextColor="#503026"/>
</StackLayout>
<StackLayout Grid.Column="3">
<Label Text="{Binding property3}" HorizontalTextAlignment"Center" TextColor="#503026"/>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can use https://github.com/jamesmontemagno/ImageCirclePlugin to create circular image for the first column.
To design something like this, you can take a Grid layout with 1 row and 4 column.
In 1st column: you can draw shape like this:How To Draw a circle with a text in the center using Xamarin Forms C# Without using custom-renderer?
<Frame HeightRequest="40" WidthRequest="40" CornerRadius="20" HorizontalOptions="Start" VerticalOptions="Start" Margin="0" Padding="0" BackgroundColor="Maroon">
<Label Text="7" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
In other columns, you can have Stacklayout with padding 1 and BackgroundColor black applied in it, containing Label with BackgroundColor Blue and text in it.
Hope this may solve your issue.
I am working on an app that displays results from a RSS feed. I am trying to show the Title and the Date in the same row of a Stacklayout.
Xaml Code:
StackLayout>
<Label Text="60 Second Sports" FontAttributes="Bold" HorizontalOptions="Center"/>
<ListView x:Name="mainArticleRssList" IsPullToRefreshEnabled="True" Refreshing="ListItems_Refreshing" ItemTapped="RssList_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="15,0,15,0">
<Label Text="{Binding Title}"
LineBreakMode="WordWrap"
MaxLines="2"/>
<Label Text="{Binding PublishedDate}"
LineBreakMode="WordWrap"
MaxLines="1"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<controls:AdMobView />
</StackLayout>
Here is what it looks like:
What I Expect:
I want the Title to auto scale to fit in the same row as the date. Is it possible to set a width for the entire row and then have the two labels fit inside of the row?
Other fruits of a few hours of googling:
Here are some of the links I found, but some are old and not sure if they work.
This one is old Auto Scale Text Size
This one didn't work Auto-scaling label fontsize in Xamarin
I also found a couple Nuget packages, but i don't think i need to do that.
https://baskren.github.io/Forms9Patch/
https://forums.xamarin.com/discussion/43468/autosize-font-label
Use Grid Layout inside stack layout to achive it
<ListView x:Name="mainArticleRssList" IsPullToRefreshEnabled="True" HasUnevenRows="True" Refreshing="ListItems_Refreshing" ItemTapped="RssList_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="15,0,15,0">
<Grid x:Name="grd">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding Title}"
LineBreakMode="WordWrap"
MaxLines="2"/>
<Label Text="{Binding PublishedDate}" Grid.Column="1"
LineBreakMode="WordWrap"
MaxLines="1"/>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Use this code and it will work for you.
Is that your needs like this screenshot?
You can use Grid to achieved that.
<ContentPage.Content>
<StackLayout>
<Label Text="Xamarin.Forms native cell" HorizontalTextAlignment="Center" />
<ListView x:Name="listView" CachingStrategy="RecycleElement"
ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Title}" Grid.Row="0" Grid.Column="0"
LineBreakMode="TailTruncation"
MaxLines="2" />
<Label Text="{Binding PublishedDate}" Grid.Row="0" Grid.Column="1"
LineBreakMode="WordWrap"
MaxLines="1"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
If title is too long, you can setLineBreakMode="TailTruncation" it will automatically truncate when the label reaches the end of the container.
I'm using a Grid with 7 rows and 3 columns. I added a button to the 7th row and 3rd column like this:
<Button Grid.Row="6" Grid.Column="2" HorizontalOptions="End"/>
The problem is the button is always in the center. I can't seem to get it to go to the end.
Here's the structure
<Image Aspect="AspectFit" HeightRequest="60" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Source="{Binding ProdImg}" />
<Label Grid.Row="0" Grid.Column="1" HorizontalOptions="Start" TextColor="White" FontSize="22" Text="{Binding UserName}"/>
<Label HorizontalOptions="End" Grid.Row="0" Grid.Column="2" TextColor="#b1fc03" FontSize="25" Text ="{Binding Sales, StringFormat='{0:#,#.}'}"/>
<Label Grid.Row="1" Grid.Column="1" HorizontalOptions="Start" TextColor="White" FontSize="10" Text="{Binding LastSale, StringFormat='{0:dd-MMM-yyyy}'}"/>
<Label HorizontalOptions="End" Grid.Row="1" Grid.Column="2" TextColor="White" FontSize="10" Text="{Binding ProdName}"/>
<Button x:Name="TryNowBtn" HorizontalOptions="End" Image="try-now.png" Grid.Row="2" Grid.Column="2"></Button>
</Grid>
</StackLayout>
<Image Aspect="AspectFit" Source="separator-line.png"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I also tried
View.HorizontalOptions="End"
chagne your column definition to this
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
for button this code is ok
<Button Grid.Row="6" Grid.Column="2" HorizontalOptions="End"/>