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>
Related
I have a CarouselView inside a ScrollView. To control the height I calculate it and modify it programmatically. It almost works, but the problem however is that it only works when the height is increased not when the height is decreased.
CarouselView
<CarouselView x:Name="cv" HeightRequest="8" ItemsSource="{Binding Challenge.ChallengeParts}" VerticalOptions="Center" ItemTemplate="{StaticResource ChallengePartTemplate}" Position="{Binding PageCarouselPosition}" Grid.Row="0" Grid.Column="1"></CarouselView>```
DataTemplate
<DataTemplate x:Key="ChallengePartTemplate">
<StackLayout BackgroundColor="LimeGreen" VerticalOptions="Center">
<Grid x:Name="rulesGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<StackLayout x:Name="toggleShowRules" Grid.Column="0" Grid.Row="0">
<Label x:Name="showRulesText" Text="Vis regler fra video" FontAttributes="Bold" Grid.Column="0" Grid.Row="0" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference thisPage}, Path=BindingContext.ToggleShowRulesTappedCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
<Label Text="{Binding Source={x:Reference thisPage}, Path=BindingContext.ShowRules,Converter={StaticResource CaretConverter}}" FontFamily="{StaticResource FontAwesomeSolid}" Grid.Column="1" Grid.Row="0" HorizontalTextAlignment="End" />
</Grid>
<StackLayout x:Name="showRulesStack" IsVisible="{Binding Source={x:Reference thisPage}, Path=BindingContext.ShowRules}">
<Grid Margin="20, 0, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--Antal spillere-->
<StackLayout Orientation="Horizontal" Grid.Column="0" Grid.Row="0">
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
</StackLayout>
<StackLayout x:Name="numPlayersText" Spacing="0" Grid.Column="1" Grid.Row="0">
<Label Text="Antal spillere:" FontAttributes="Bold" FontSize="Micro" />
<Label Text="{Binding NumPlayers}" FontSize="Micro" />
</StackLayout>
<!--Nødvendigt udstyr-->
<StackLayout Orientation="Horizontal" Grid.Column="0" Grid.Row="1">
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
</StackLayout>
<StackLayout Spacing="0" Grid.Column="1" Grid.Row="1">
<Label Text="Nødvendigt udstyr:" FontAttributes="Bold" FontSize="Micro" />
<StackLayout BindableLayout.ItemsSource="{Binding NeededAccesories}" Spacing="0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding .}" FontSize="Micro" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
<!--Regler-->
<StackLayout Orientation="Horizontal" Grid.Column="0" Grid.Row="2">
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="2">
<Label Text="Regler:" FontAttributes="Bold" FontSize="Micro" />
<StackLayout BindableLayout.ItemsSource="{Binding Rules}" Spacing="0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding .}" FontSize="Micro" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</Grid>
</StackLayout>
</StackLayout>
</DataTemplate>
Code behind
var cvVisibleViews = cv.VisibleViews;
if(cvVisibleViews.Count > 0)
{
var rulesStack = cvVisibleViews[0].FindByName<StackLayout>("showRulesStack");
var toggleShowRules = cvVisibleViews[0].FindByName<StackLayout>("toggleShowRules");
var showRulesText = cvVisibleViews[0].FindByName<Label>("showRulesText");
double height = 0;
height = height + toggleShowRules.Height;
height = height + showRulesText.Height;
if (rulesStack.IsVisible && rulesStack.Height > -1)
{
height = height + rulesStack.Height;
}
cv.HeightRequest = height;
}
It seems like the new height of the CarouselView is measured from the center of it. Like the content is placed outside above the CarouselView
Any idea to realign the content inside the resized CarouselView?
Thanks a lot!
I've been trying to put border on these text and the only way i can is taking off grid on every row so now it has borders but then the grid frame is off. I can't differentiate which part is from row1 or the beginning of list.
<StackLayout>
<Label Text="rain Log" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,50,0,0" />
<ListView x:Name="postListView" >
<ListView.ItemTemplate>
<!-- from the post.cs -->
<DataTemplate>
<ViewCell >
<Grid BackgroundColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions > <!-- 8 rows -->
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<!-- Row 1 -->
<Label Grid.Row="1" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="1" Text="{Binding drain1vol}" BackgroundColor="cornflowerblue"/>
<!-- endrow1 -->
<!-- rain1 Row 1 -->
<Label Grid.Row="2" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="2" Grid.Column="1" Text="{Binding drain2vol}"
HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
<!-- endrow1 -->
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
what i want
If you want to separate out your item as like group than you can use SeparatorColor and its visibility.
Instead of 2 boxview you can also use one grid as wrapper and using ColumnSpacing and RowSpacing.
<ListView x:Name="postListView" SeparatorVisibility="Default" HasUnevenRows="True" ItemsSource="{Binding Items}" SeparatorColor="White">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid BackgroundColor="Black" HorizontalOptions="CenterAndExpand"
VerticalOptions="FillAndExpand" Padding="1,2,1,0">
<Grid HorizontalOptions="CenterAndExpand"
VerticalOptions="FillAndExpand" ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions >
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="0" Text="{Binding drain1vol}" HorizontalTextAlignment="Center" BackgroundColor="cornflowerblue"/>
<Label Grid.Row="1" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding drain2vol}" HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Yes, you can use BoxView to achieve this function, try the following code :
<StackLayout>
<Label Text="rain Log" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,50,0,0" />
<ListView x:Name="postListView" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<Grid HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" ColumnSpacing="2" RowSpacing="0" BackgroundColor="Black">
<Grid.RowDefinitions >
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="0" Text="{Binding drain1vol}" HorizontalTextAlignment="Center" BackgroundColor="cornflowerblue"/>
<!-- thin separator -->
<BoxView Color="Black" Grid.Row="0" Grid.ColumnSpan="2" HeightRequest="2" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="1" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding drain2vol}" HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
<!-- thick separator -->
<BoxView Color="Black" Grid.Row="3" Grid.ColumnSpan="2" HeightRequest="5" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
The effect is as follows:
use a BoxView overlaid on your Grid to simulate a separator
<Grid HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand">
<!-- Row 1 -->
<Label Grid.Row="1" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="1" Text="{Binding drain1vol}" BackgroundColor="cornflowerblue"/>
<! thin separator -->
<BoxView Color="Black" Grid.Row="1" Grid.ColumnSpan="2" HeightRequest="2" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
<!-- rain1 Row 1 -->
<Label Grid.Row="2" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="2" Grid.Column="1" Text="{Binding drain2vol}"
HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
<! thick separator -->
<BoxView Color="Black" Grid.Row="2" Grid.ColumnSpan="2" HeightRequest="5" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
</Grid>
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?
I have a card view and in that, I have an image. I have to set the corner radius for that image so I'm using frames for doing that.
This is the UI I need and I have marked the Image
This is the result I'm getting
.
This is my code
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="30"
HeightRequest="100" >
<Grid RowSpacing="0">
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame CornerRadius="10" Margin="0" Padding="0" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Source="restaurantimage1.jpg" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"/>
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Aqua" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Green" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="LightBlue" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>
</Grid>
</Grid>
</xfx:XfxCardView>
I have made changes in corner radius and margins but I'm not getting the desired result. Do I have to use something else to do that or should I make any changes in the Frame.
I have done some changes in code so and I'm slightly near to the desired output.
This is the current output
There is still a gap in the frame as you can see I have made changes in the code but still it is not getting fixed. This is my code
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="30"
HeightRequest="100" >
<Grid RowSpacing="0">
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame Margin="0" Padding="-40" CornerRadius="25" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="AliceBlue" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>
</Grid>
</Grid>
</xfx:XfxCardView>
Try setting the is clipped to bounds property as true in your Grid's xaml
<Grid RowSpacing="0" IsClippedToBounds="True">
I fixed it by changing the margin of my frame. This is my code now
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="150" IsClippedToBounds="True">
<Grid RowSpacing="0" >
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame Margin="10,10,10,20" Padding="-40" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="AliceBlue" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,30,30,0" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Image Grid.Row="0" Grid.Column="1" Margin="0,30,10,0" HorizontalOptions="End" Source="whitehearticon3.jpg"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,-20,40,0" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,0,40,0" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese Kitchen" TextColor="LightGray"/>
</Grid>
</Grid>
</xfx:XfxCardView>
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"/>