Xamarin Forms Right align button in a Grid - xamarin

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

Related

Xamarin Forms 2.X - ListView with Grid how to call API for each Row that is inserted into my grid rows

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.

xamarin collectionview and listview draw speed very slow

My test phone is LG-V50 and LG-G6 and Note5
my test collectionview code
<CollectionView Grid.Row="1" ItemsSource="{Binding Model.ViewList}" SelectedItem="{Binding Model.SelectedView}" >
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="10"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Margin="2" VerticalOptions="FillAndExpand">
<Frame Grid.Row="0" WidthRequest="500" CornerRadius="8" BackgroundColor="#FFEAEAEA" HorizontalOptions='FillAndExpand' Margin="0" VerticalOptions="FillAndExpand">
<Grid Margin="-15,-10,-15,0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="5"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="5"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="AliceBlue" >
<Label x:Name="test" Text="{Binding DeviceName}" Style="{StaticResource DiviceTitel01}" FontSize="30" />
</StackLayout>
<Button Image="close.png" WidthRequest="50" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.ViewListDeleteCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource ExitBtnStyle}" HorizontalOptions="Center"/>
</StackLayout>
<customControls:Board Grid.Row="2" BindingContext="{Binding VM}" VerticalOptions="FillAndExpand"/>
<StackLayout Grid.Row="4" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Margin="-10,0,-10,0">
<Button Text="button1" FontSize="25" FontAttributes="Bold" WidthRequest="140" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.InfoPageClickCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource InfoBtnStyle}" />
<Button Text="button1" FontSize="25" FontAttributes="Bold" WidthRequest="120" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.DetailDataClickCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource DetailviewBtnStyle}"/>
<Button Text="button2" FontSize="25" FontAttributes="Bold" WidthRequest="120" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.RefPageCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource MoveBtnStyle}" TextColor="black"/>
</StackLayout>
</Grid>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
and listview test code
<ListView x:Name="ListView" Grid.Row="1" BackgroundColor="White" Margin="0"
ItemsSource="{Binding Model.ViewList}"
SelectedItem="{Binding Model.SelectedView}"
HasUnevenRows="True"
IsPullToRefreshEnabled="False"
>
<ListView.ItemTemplate>
<DataTemplate>
<customControls:ExtendedViewCell SelectedBackgroundColor="#FF8FB5C3" >
<ViewCell.View>
<Grid Margin="2" VerticalOptions="FillAndExpand">
<Frame Grid.Row="0" WidthRequest="500" CornerRadius="8" BackgroundColor="#FFEAEAEA" HorizontalOptions='FillAndExpand' Margin="0" VerticalOptions="FillAndExpand">
<Grid Margin="-15,-10,-15,0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="5"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="5"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="AliceBlue" >
<Label x:Name="test" Text="{Binding DeviceName}" Style="{StaticResource DiviceTitel01}" FontSize="30" />
</StackLayout>
<Button Image="close.png" WidthRequest="50" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.ViewListDeleteCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource ExitBtnStyle}" HorizontalOptions="Center"/>
</StackLayout>
<customControls:Board Grid.Row="2" BindingContext="{Binding VM}" VerticalOptions="FillAndExpand"/>
<StackLayout Grid.Row="4" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Margin="-10,0,-10,0">
<Button Text="buuton1" FontSize="25" FontAttributes="Bold" WidthRequest="140" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.InfoPageClickCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource InfoBtnStyle}" />
<Button Text="button2" FontSize="25" FontAttributes="Bold" WidthRequest="120" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.DetailDataClickCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource DetailviewBtnStyle}"/>
<Button Text="button3" FontSize="25" FontAttributes="Bold" WidthRequest="120" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.RefPageCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource MoveBtnStyle}" TextColor="black"/>
</StackLayout>
</Grid>
</Frame>
</Grid>
</ViewCell.View>
</customControls:ExtendedViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
and
my customcontrol code
<Grid IsVisible="{Binding Model.IsWlevelControlVisible}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.Column="0" BackgroundColor="{Binding Model.Color0}" VerticalOptions="FillAndExpand" Margin="-2">
<Grid.RowDefinitions>
<RowDefinition Height="55"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<Label x:Name="W0" Text="{Binding Model.Title_0}" LineBreakMode="TailTruncation" Grid.Row="0" Grid.Column="0" TextColor="White" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" Margin="15,0,0,0" FontSize="24" />
<Label Text="{Binding Model.AIValue_0}" Grid.Row="0" TextColor="White" HorizontalTextAlignment="End" VerticalTextAlignment="Center" Font="23"/>
<Label Text="{Binding Model.Value_0, Converter={StaticResource StingFormatConverter}, ConverterParameter={x:Reference F0}}" Grid.Row="1" Grid.Column="0" FontSize="23" TextColor="White" HorizontalTextAlignment="End" VerticalTextAlignment="Center" Margin="0,0,-40,0"/>
<Label Text="{Binding Model.Value_0, Converter={StaticResource UnitConverter}, ConverterParameter={x:Reference F0}}" Grid.Row="1" Grid.Column="1" FontSize="22" TextColor="White" HorizontalTextAlignment="End" VerticalTextAlignment="Center" Margin="0,0,5,0"/>
</Grid>
<Grid Grid.Row="0" Grid.Column="1" VerticalOptions="FillAndExpand" Margin="-2">
<Label Grid.Row="0" Text="{Binding Model.Time}" TextColor="White" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="18"/>
</Grid>
</Grid>
and Customcontrol Data communication is updated every 2 seconds
It is slow to draw an item except for data communication and without binding.
Excluding controls in collection view and list view makes drawing items fast, but adding controls makes drawing items very slow.
Can you find a solution to this problem?

Xamarin.Forms: calculating listview height wrong?

Why is only half of the text being displayed in the labels at the bottom?
This is my xaml. The listview area is 300, and each listview row is 100 (set in <On Platform="Android">100</On>).
Each ViewCell has 4 rows, with each row being 25, for a total of 100 (the listview row height).
So I don't understand why only half of the text at the bottom is displayed, or why the space taken up by row 0 & 1 of column 2 isn't exactly half of the total height.
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="300" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" x:Name="MapGrid">
<maps:Map WidthRequest="960" HeightRequest="100"
x:Name="MyMap" IsShowingUser="true"/>
</StackLayout>
<StackLayout Grid.Row="1" x:Name="listSection" HeightRequest="300">
<ListView x:Name="ListView_Pets">
<ListView.RowHeight>
<OnPlatform x:TypeArguments="x:Int32">
<On Platform="Android">100</On>
</OnPlatform>
</ListView.RowHeight>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="25*"/>
</Grid.ColumnDefinitions>
<Label Text="Name" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="15" TextColor="Black" Grid.Row="0" Grid.Column="0"/>
<Label Text="Address" HorizontalTextAlignment="Center" VerticalTextAlignment="Start" FontSize="10" TextColor="Black" Grid.Row="1" Grid.Column="0"/>
<Label Text="Price1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="15" TextColor="White" BackgroundColor="#2FA4D9" Grid.Row="0" Grid.Column="2"/>
<Label Text="Price2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="15" TextColor="White" BackgroundColor="#2FA4D9" Grid.Row="1" Grid.Column="2"/>
<Label Text="Tag1" Grid.Row="0" VerticalTextAlignment="Center" HorizontalTextAlignment="End" Grid.Column="1" FontSize="Micro"/>
<Label Text="Tag2" Grid.Row="1" VerticalTextAlignment="Center" HorizontalTextAlignment="End" Grid.Column="1" FontSize="Micro"/>
<StackLayout Grid.Row="3" Grid.Column="0">
<StackLayout Orientation="Horizontal" >
<Label Text="Text1" FontSize="10" VerticalTextAlignment="Start" TextColor="Black" />
<Label Text="Text2" VerticalTextAlignment="Start" FontSize="10" TextColor="Black" />
<Label Text="Text3" VerticalTextAlignment="Start" FontSize="10" TextColor="Black" />
</StackLayout>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
Here's the screenshot:
This is because of the Grid inside your ViewCell has a RowSpacing and ColumnSpacing defaults. To override this, just set <Grid RowSpacing=0 ColumnSpacing=0>

UI Freeze when Navigation a page to another in xamarin forms

In my application My MainPage Showing Menus and after clicking menu the next page loading very slow and freeze the UI.
This happen when the content page contain a listView with Items.
My Data Page Content a listView with 50 items(Infinite Scrolling First 50 items)
XAML:
<ListView
ItemsSource="{Binding ItemsData}"
SelectedItem="{Binding SelectedItemsData}"
HasUnevenRows="True"
BackgroundColor="White" x:Name="ItemsDataList">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid
Margin="2,0,2,0"
Padding="8"
IsEnabled="{Binding IsEnableItemsData}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding SKU}" Grid.Row="0" Grid.Column="0" HorizontalTextAlignment="Center" VerticalOptions="Center" TextColor="{Binding SKUColor}" FontSize="Small"/>
<Label Text="{Binding OrderNumber}" Grid.Row="0" Grid.Column="1" HorizontalTextAlignment="Center" VerticalOptions="Center" TextColor="Black" FontSize="Small"/>
<Label Text="{Binding CategoryName}" Grid.Row="0" Grid.Column="2" HorizontalTextAlignment="Center" VerticalOptions="Center" TextColor="Black" FontSize="Small"/>
<Label Text="{Binding OrderQuantity}" Grid.Row="0" Grid.Column="3" HorizontalTextAlignment="Center" VerticalOptions="Center" TextColor="Black" FontSize="Small"/>
<Label Text="{Binding Bin}" Grid.Row="0" Grid.Column="4" HorizontalTextAlignment="Center" VerticalOptions="Center" TextColor="Black" FontSize="Small"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Behaviors>
<eventToCommand:EventToCommandBehavior
EventName="ItemSelected"
Command="{Binding ItemsDataSelectedItemChange}"/>
<eventToCommand:EventToCommandBehavior
EventName="ItemAppearing"
Command="{Binding ItemsDataItemAppearing}"/>
</ListView.Behaviors>
</ListView>
ViewModel:
public ObservableCollection<ItemsData> Data
{
get { return _data; }
set
{
_data = value;
RaisePropertyChanged();
}
}
Getting the data from Local Database
Data = GetData(GlobalVariable.BranchId, DataLimit, Offset, SearchText, filterData, "Others", sortData);
How to get rid of this issues?

How to merge Grid.Column in Grid Xamarin.Form

Good Day to everyone, I have Grid that has 4 columns I wanted to merge column#2 and and Column#3, like the picture below, But the problem is each entry is assign to specific Grid.Column. How do I achieve this? Thank you and Good Day.
My Xaml Code:
<ContentView Grid.Row="0" HorizontalOptions="StartAndExpand" Padding="10" VerticalOptions="CenterAndExpand">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2"
Source="contact.png"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
/>
<Label Grid.Row="0"
Grid.Column="1"
FontAttributes="Bold"
HorizontalOptions="Start"
Text="Number:"
TextColor="White"
VerticalOptions="Center"/>
<Label Grid.Row="1"
Grid.Column="1"
FontAttributes="Bold"
HorizontalOptions="Start"
Text="Name:"
TextColor="White"
VerticalOptions="Center"/>
<Entry Grid.Row="0"
Grid.Column="2"
FontAttributes="Bold"
IsEnabled="False"
HorizontalOptions="Start"
Text="911"
TextColor="White"
VerticalOptions="Center"/>
<Entry Grid.Row="1"
Grid.Column="2"
IsEnabled="False"
FontAttributes="Bold"
HorizontalOptions="Start"
Text="Andreson Smith"
TextColor="White"
VerticalOptions="Center"/>
</Grid>
</ContentView>
You want to set Grid.Column and Grid.ColumnSpan on the elements that you want to take up multiple columns:
<Entry Grid.Row="0"
Grid.Column="2"
Grid.ColumnSpan="2"
FontAttributes="Bold"
IsEnabled="False"
HorizontalOptions="Start"
Text="911"
TextColor="White"
VerticalOptions="Center"/>
This Entry will start in column #2 and span 2 columns, thus "merging" columns #2 and #3 for this element.

Resources