I have an image that in xamarin form the image adjust to fit in stacklayout. Now that i migrated to .net MAUI the image does not adjust but part of the image is hidden by the stacklayout or the stacklayout swallows part of the image. The purple background is another stacklayout that will contain other images that will also fit to the purple stacklayout.
<StackLayout x:Name="PlayingWindow">
<StackLayout HorizontalOptions="Center" VerticalOptions="End" Padding="2" x:Name="PlayingWindow1" >
</Grid>
<Grid Grid.Row="1" >
<ScrollView HorizontalOptions="Center" VerticalOptions="End" Padding="2" x:Name="PlayingWindow1" >
<Grid x:Name="mainGrid"
Grid.Row="1" Padding="2,0" RowSpacing="2" ColumnSpacing="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<!-- Initialized for Portrait m\ -->
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<!-- History display. -->
<Label Text="Levels:" Grid.Row="0" Grid.Column="0" BackgroundColor="LightGreen" HeightRequest="15"/>
<Label Text="1" Grid.Row="0" Grid.Column="1" x:Name="Level" BackgroundColor="LightGreen" />
<Label Text="Timer:" Grid.Row="0" Grid.Column="2" x:Name="Time" BackgroundColor="DarkGray" />
<Label Text="" Grid.Row="1" Grid.Column="0" x:Name="Callback" BackgroundColor="DarkGray" />
<Label Text="Commands:" Grid.Row="1" Grid.Column="1" x:Name="Card" BackgroundColor="DarkGray" />
<Label Text="Player6" Grid.Row="1" Grid.Column="2" x:Name="Player6" BackgroundColor="DarkGray" />
<Label x:Name="TimeContainer1" Text="" BackgroundColor="White" Grid.Row="1" Grid.Column="2" />
<Image Source="" x:Name="ImageCommands" Grid.Row="1" Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center" >
<Image.GestureRecognizers >
<TapGestureRecognizer Tapped ="Imagejokerb" />
</Image.GestureRecognizers >
</Image>
<Button x:Name="initiator" Text="Me" BackgroundColor="LightGreen" Grid.Row="1" Grid.Column="3" Pressed="play" CornerRadius="25" />
</Grid>
</ScrollView >
</Grid>
</StackLayout >
<ScrollView HorizontalOptions="Center" HorizontalScrollBarVisibility="Always" Orientation="Horizontal" >
<StackLayout Orientation="Horizontal" x:Name="PlayingWindow2">
<Image Source="pickme.png" x:Name="pickCard" HorizontalOptions="Center" VerticalOptions="Center" >
<Image.GestureRecognizers >
<TapGestureRecognizer Tapped ="TapGestureRecognizer_pickme_5" />
</Image.GestureRecognizers >
</Image>
<Image x:Name="droppedCard" HorizontalOptions="Center" VerticalOptions="Center" />
</StackLayout>
</ScrollView>
<ScrollView HorizontalOptions="Center" HorizontalScrollBarVisibility="Always" Orientation="Horizontal" >
<StackLayout Orientation="Horizontal" x:Name="PlayingWindow3" BackgroundColor="MediumPurple">
<Image Source="pickme.png" x:Name="VariableImagepickmeb" HorizontalOptions="Center" VerticalOptions="Center" IsVisible="false" >
<Image.GestureRecognizers >
<TapGestureRecognizer Tapped ="Imagepickmeb" />
</Image.GestureRecognizers >
</Image>
<Image Source="pickme.png" x:Name="VariableImagepickmer" HorizontalOptions="Center" VerticalOptions="Center" IsVisible="false" >
<Image.GestureRecognizers >
<TapGestureRecognizer Tapped ="Imagepickmer" />
</Image.GestureRecognizers >
</Image>
</StackLayout>
</ScrollView>
</StackLayout>
I wish to have the picture adjust, to the stacklayout proportion.
Can some help please?
First of all, you have ScrollViews stacked on top of each other in a StackLayout and your image is in a StackLayout inside of one of the ScrollViews, which means the StackLayout that contains the image will have an overflow that is hiding part of the image. You should be able to scroll to it.
You could remove the ScrollView around the StackLayout with the image.
[UPDATED]
At least you should set the Image.Aspect property to AspectFit or Fill: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/image#control-image-scaling:
<ScrollView HorizontalOptions="Center" HorizontalScrollBarVisibility="Always" Orientation="Horizontal">
<StackLayout Orientation="Horizontal" x:Name="PlayingWindow2">
<Image Source="pickme.png" x:Name="pickCard" HorizontalOptions="Center" VerticalOptions="Center"
Aspect="AspectFit">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_pickme_5"/>
</Image.GestureRecognizers>
</Image>
<Image x:Name="droppedCard" HorizontalOptions="Center" VerticalOptions="Center"/>
</StackLayout>
</ScrollView>
However, auto-sizing images does not work well with ScrollViews when neither Width nor Height are constrained in any way.
Also, if you want to keep adding items to the View, then I recommend using a different type of View. You could, for example, use a HorizontalListView (Sharpnado.CollectionView package) or a CollectionView or anything that allows you to display a set of Views or Data, because they are better suited for dynamic layouts and data compared to a StackLayout wrapped inside a ScrollView, which is more appropriate for View elements that are known at compile time.
Related
I have a Xamarin project with a view of a product's details. I have two buttons which can increase or decrease the quantity of the product. To show how it changes I have a label named lblQuantity which shows the quantity and it's updated if you tap on the remove or add button.
To have some context here's the view
The issue is that the lblQuantity isn't updating itself. I had previously another view with a stacklayout and the gesture recognizers worked fine. Now it doesn't even go inside the method.
Here's the xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:controls="clr-namespace:AppCrijoya.Controls"
x:Class="AppCrijoya.Views.ProductDetailPage">
<ScrollView>
<StackLayout VerticalOptions="FillAndExpand" BackgroundColor="White" Spacing="0" Margin="0" Padding="0">
<Grid BackgroundColor="White" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<!-- 1. Profile picture-->
<Frame HasShadow="True" Margin="10" CornerRadius="20">
<Image x:Name="ProductImage" Aspect="AspectFit" Grid.Row="0" Margin="0" VerticalOptions="Start" HeightRequest="230"/>
</Frame>
<!-- Here add the code that is being explained in the next block-->
<StackLayout HeightRequest="90" Grid.Row="1" BackgroundColor="Transparent" VerticalOptions="Start">
<StackLayout Padding="20" BackgroundColor="Transparent">
<!-- Here add the code that is being explained in the next block-->
<!-- Blocks: 3 and 4 -->
<Grid Padding="25,5,25,0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
<!-- Here add the code that is being explained in the next block-->
<!-- 4. Contact information-->
<Label x:Name="txtName" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" FontAttributes="Bold" FontSize="30" TextColor="Black"/>
<Label x:Name="txtDescription" Grid.Row="1" Grid.ColumnSpan="4" TextColor="Black" FontSize="16"/>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="4" Padding="0,10,0,0" FontSize="16">
<Label.FormattedText>
<FormattedString>
<Span Text="Stock: " FontAttributes="Bold" TextColor="Black"/>
<Span x:Name="txtDetails" TextColor="black"/>
</FormattedString>
</Label.FormattedText>
</Label>
<!--4. Contact information: Board inforation-->
<Label Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="3" Text="Quantity" FontAttributes="Bold" Style="{StaticResource stlBoardTitle}" />
<Frame Grid.Column="2" Grid.Row="3" Style="{StaticResource stkCart}">
<Frame.GestureRecognizers>
<TapGestureRecognizer x:Name="RemoveTap" Tapped="RemoveTap_Tapped"/>
</Frame.GestureRecognizers>
<Label Text="-" Style="{StaticResource lblCart}"/>
</Frame>
<StackLayout Grid.Column="3" Grid.Row="3" HeightRequest="40" VerticalOptions="Center" >
<Label
x:Name="lblQuantity"
Text="1"
FontSize="17"
TextColor="Black"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
HeightRequest="40"/>
</StackLayout>
<Frame Grid.Column="4" Grid.Row="3" Style="{StaticResource stkCart}">
<Frame.GestureRecognizers>
<TapGestureRecognizer x:Name="AddTap" Tapped="AddTap_Tapped"/>
</Frame.GestureRecognizers>
<Label Text="+" Style="{StaticResource lblCart}"/>
</Frame>
</Grid>
</StackLayout>
</StackLayout>
</Grid>
<controls:MyFrame HasShadow="true" HeightRequest="80" BackgroundColor="#e5d3c2" VerticalOptions="EndAndExpand">
<StackLayout WidthRequest="20" VerticalOptions="Center">
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Label
x:Name="txtPrice"
Grid.Column="0"
HorizontalTextAlignment="End"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
FontAttributes="Bold"
FontSize="25"
/>
<Button CornerRadius="30"
x:Name="btnAddToCart"
Clicked="BtnAddToCart_Clicked"
Grid.Column="2"
TextColor="Black"
Text="Añadir al carrito"
BackgroundColor="White"
Style="{StaticResource btn}"
FontAttributes="Bold"
/>
</Grid>
</StackLayout>
</controls:MyFrame>
</StackLayout>
</ScrollView>
</ContentPage>
Here's the Add and Remove method that I know work fine
private void RemoveTap_Tapped(object sender, EventArgs e)
{
int quantity = Convert.ToInt32(lblQuantity.Text);
if (quantity > 1)
{
quantity -= 1;
}
lblQuantity.Text = quantity.ToString();
}
private void AddTap_Tapped(object sender, EventArgs e)
{
int quantity = Convert.ToInt32(lblQuantity.Text);
quantity += 1;
lblQuantity.Text = quantity.ToString();
}
The text of the label is supossed to be changed but it isn't. And as I said it doesn't even enter on the method.
I don't know what's the issue. Please help and thanks.
EDIT
I have tried changing it for a Button but still doesn't work. I thought it might be a problem with the grid but I still don't know.
I fixed the issue by making sure the frames where inside the StackLayout as they weren't before
Here is an image to explain it
The frames to add or remove weren't inside the red StackLayout so the tap gesture recognizer wouldn't do anything. I just gave it more height and set the Aspect to FillAndExpand
It appears that my Grid layout is set for the the second row is displaying first.
When the application loads Grid.Row="2" which is the middle part of the page show first.
I have to scroll down to see the carousel witch Grid.Row="1"
I am trying to figure out the carousel the at the top then the video the the Change program last.
Here is my xaml code.
<ScrollView HorizontalOptions="Center">
<Grid x:Name="page" Padding="0,0">
<Grid.RowDefinitions>
<RowDefinition Height="600" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0">
<CarouselView x:Name="carousel" Scrolled="Handle_Scrolled" ItemsSource="{Binding Items}"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<CarouselView.Behaviors>
<behaviors:FrontBannerViewParallaxBehavior ParallaxOffset="100"/>
</CarouselView.Behaviors>
<CarouselView.ItemTemplate> <DataTemplate> <Grid Padding="18,24,18,64"> <custom:PancakeView
CornerRadius="24" BackgroundColor="#FFFFFF"> <StackLayout VerticalOptions="Fill"
HorizontalOptions="Fill"> <custom:PancakeView VerticalOptions="FillAndExpand" HeightRequest="200"
CornerRadius="10" BackgroundGradientStartColor="{Binding StartColor}"
BackgroundGradientEndColor="{Binding EndColor}"> <Grid> <StackLayout> <StackLayout
Orientation="Horizontal"> <Label Text="{Binding Title}" FontFamily="{StaticResource
font_extrabold}" HorizontalOptions="Center" TextColor="#60229a" VerticalOptions="End"
Margin="14,0,0,0" FontSize="36" FontAttributes="Bold" LineBreakMode="NoWrap" /> </StackLayout>
<Label FontFamily="{StaticResource font_regular}" Text="{Binding Details}" TextColor="#60229a"
Margin="14,8,24,24" FontSize="22" LineBreakMode="WordWrap" /> </StackLayout> </Grid>
</custom:PancakeView> </StackLayout> </custom:PancakeView> <Image Source="{Binding ImageSrc}"
WidthRequest="{Binding Width}" VerticalOptions="EndAndExpand" HorizontalOptions="EndAndExpand"
Margin="0,0,15,0" /> </Grid> </DataTemplate> </CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
<StackLayout Grid.Row="1">`
`<StackLayout Orientation="Horizontal">
<Label Text="Listen to Apostle Johnson's" FontFamily="{StaticResource
font_extrabold}" HorizontalOptions="Center" TextColor="#FFFFFF" VerticalOptions="End" Margin="14,0,0,0" FontSize="36" FontAttributes="Bold" LineBreakMode="NoWrap" />
</StackLayout>
<Label FontFamily="{StaticResource font_regular}" Text="Detox Transformation." TextColor="#FFFFFF" Margin="14,8,24,24" FontSize="22" LineBreakMode="WordWrap" />
<StackLayout Orientation="Horizontal">
<Label FontFamily="{StaticResource font_regular}" Text="Apostle Johnson gives a
riveting short bio of his testimony of traveling a road of living a life of descriptive chaos. Hey just click on the video and hear it from him." TextColor="#FFFFFF" Margin="14,8,24,24" FontSize="22" LineBreakMode="WordWrap" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<ovideo:VideoPlayer x:Name="vmo" Source="http://iowegodministry.org/wp-content/uploads/2020/06/y2mate.com-FROM-GANGSTA-TO-GOD_JeR29HVa7HE_360p.mp4" WidthRequest="250" />
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="2">
<StackLayout Orientation="Horizontal">
<Label Text="Chance Program" FontFamily="{StaticResource font_extrabold}" HorizontalOptions="Center" TextColor="#FFFFFF" VerticalOptions="End" Margin="14,0,0,0" FontSize="36" FontAttributes="Bold" LineBreakMode="NoWrap" />
</StackLayout>
<Label FontFamily="{StaticResource font_regular}" Text="The mission of C.H.A.N.C.E. is to help people succeed in the workforce by providing training and mentorship. One of the goals is to help those who've been in the prison system become successful members of society after they get out. The program will provide clas`enter code here`ses on a variety of spiritual-based educational curriculum, teach job interview skills, and help with strengthening family relationships and bonds." TextColor="#FFFFFF" Margin="14,8,24,24" FontSize="22" LineBreakMode="WordWrap" />
<Button BackgroundColor="#FFFFFF"
FontFamily="{StaticResource font_bold}"
Padding="20,0" CornerRadius="20"
TextColor="{Binding BackgroundColor}"
FontSize="12" BorderColor="{Binding BackgroundColor}"
BorderWidth="2" HeightRequest="40"
Text="Read More About the Program" HorizontalOptions="Center" Clicked="OnButtonClicked"
/>
</StackLayout>
</Grid>
</ScrollView>
From shared Xaml code , used ScrollView as RootLayout . ScrollView has a ScrollToAsync method to scroll to one position into View . You can have a try with this to scroll to your wanted position when application loads.
A position within a ScrollView can be scrolled to with the ScrollToAsync method that accepts double x and y arguments.
Given a vertical ScrollView object named scrollView, the following example shows how to scroll to 150 device-independent units from the top of the ScrollView:
await scrollView.ScrollToAsync(0, 150, true);
In the cross-platform app that I’m developing on Xamarin Forms, I want to achieve a map look where the map covers the whole screen and a semi-transparent control center covers on top of it at a section in the bottom of the screen as in Apple Maps.
My current code looks like this. I have my desired map view and control center view but I can't get to control center to overlap on top of my map.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:map="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
xmlns:pan ="http://xamarin.com/schemas/2014/forms"
xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
mc:Ignorable="d"
x:Class="GreenPath.MainPage">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="1.8*"/>
</Grid.RowDefinitions>
<yummy:PancakeView CornerRadius="25,25,0,0" Opacity="0.8" Grid.Row="1" HorizontalOptions="FillAndExpand">
<StackLayout VerticalOptions="FillAndExpand" Orientation="Vertical">
<Image Source="down.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1"/>
<Label Text="X" TextColor="#3E454F" FontSize="40" FontFamily="segoeui.ttf" Margin="10,0"/>
<SearchBar FontFamily="segoeui.ttf" Text="X" VerticalTextAlignment="Center" VerticalOptions="Fill" HorizontalTextAlignment="Start" IsReadOnly="True" HorizontalOptions="Fill" SearchButtonPressed="SearchBar_SearchButtonPressed" PlaceholderColor="#3E454F" TextColor="#3E454F" CancelButtonColor="#3E454F" Visual="Material" Keyboard="Default" Placeholder="Search a location" IsEnabled="True"/>
<Label Text="X" FontFamily="segoeui.ttf" FontSize="25" VerticalOptions="Center" TextColor="#3E454F" Margin="10,0"/>
<Grid Grid.Row="1" ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="0" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="1" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="2" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="3" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="4" />
</Grid>
</StackLayout>
</yummy:PancakeView>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<map:Map MapType="Street" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</Grid>
</ContentPage>
Try putting the StackLayout that contains the map before the yummy:PancakeView (Also remove the Grid.Row="1")
It is similar at this answer.
After reading what David Jesus recomended I did what he said but unfortunately it was't the answer that I was looking for but I followed his advices and did some cahnges myself. In conclusion, I put StackLayout at the top like David said but ı didn't remove Grid.Row="1" and I added the desired height in yummy:PancakeView as TranslationY="550".
My final code is:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:map="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
xmlns:pan ="http://xamarin.com/schemas/2014/forms"
xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
mc:Ignorable="d"
x:Class="GreenPath.MainPage">
<Grid>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<map:Map MapType="Street" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</StackLayout>
<yummy:PancakeView CornerRadius="25,25,0,0" Opacity="0.8" HorizontalOptions="FillAndExpand" BackgroundColor="White" TranslationY="550">
<StackLayout VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="5">
<Image Source="down.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1"/>
<Label Text="X" TextColor="#3E454F" FontSize="40" FontFamily="segoeui.ttf" Margin="10,0"/>
<SearchBar FontFamily="segoeui.ttf" Text="X" VerticalTextAlignment="Center" VerticalOptions="Fill" HorizontalTextAlignment="Start" IsReadOnly="True" HorizontalOptions="Fill" SearchButtonPressed="SearchBar_SearchButtonPressed" PlaceholderColor="#3E454F" TextColor="#3E454F" CancelButtonColor="#3E454F" Visual="Material" Keyboard="Default" Placeholder="Search a location" IsEnabled="True"/>
<Label Text="X" FontFamily="segoeui.ttf" FontSize="25" VerticalOptions="Center" TextColor="#3E454F" Margin="10,0"/>
<Grid Grid.Row="1" ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="0" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="1" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="2" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="3" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="4" />
</Grid>
</StackLayout>
</yummy:PancakeView>
</Grid>
</ContentPage>
I am working on Xamarin forms using synfusion controls.
I needed a page with image upload in popup page, but image is not uploaded from the project image folder.
After debugging it seems the main problem is the tags and its properties
so please kindly suggest what should I use for the same.
<sfPopup:SfPopupLayout x:Name="popupLayout">
<sfPopup:SfPopupLayout.PopupView>
<sfPopup:PopupView HeaderTitle="Popup Imagess"
AnimationMode="None"
AutoSizeMode="None"
HeightRequest="{OnPlatform UWP={OnIdiom Phone=250, Tablet=290, Desktop=290}, Android=350, iOS=250}" >
<sfPopup:PopupView.ContentTemplate>
<DataTemplate>
<syncfusion:SfListView x:Name="listView" Orientation="Horizontal" Padding="10,10,10,10"
SelectionMode="None" Grid.Row="1"
ItemsSource="{Binding Gallerynfo}"
ItemDoubleTapped="ListView_ItemDoubleTapped_1"
ItemSpacing="3">
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Frame BackgroundColor="#EEEEEE" Padding="2">
<Grid x:Name="headerGrid" RowSpacing="1">
<Label LineBreakMode="NoWrap"
Text="photo" FontAttributes="Bold" TextColor="Black" HorizontalOptions="Center" VerticalOptions="Center"/>
<Image Source="{Binding Image}" Aspect="Fill"/>
<Label Grid.Row="1" Text="{Binding ImageTitle}"
LineBreakMode="WordWrap"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center"
TextColor="Black" Opacity="0.87"
Margin="16,0,0,0">
</Label>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
</Grid>
</Frame>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
</DataTemplate>
</sfPopup:PopupView.ContentTemplate>
</sfPopup:PopupView>
</sfPopup:SfPopupLayout.PopupView>
<sfPopup:SfPopupLayout.Content>
<StackLayout x:Name="layout">
<Button x:Name="clickToShowPopup" Text="ClickToShowPopup" VerticalOptions="Start"
HorizontalOptions="FillAndExpand" Clicked="ClickToShowPopup_Clicked" />
</StackLayout>
</sfPopup:SfPopupLayout.Content>
</sfPopup:SfPopupLayout>
I have a button that has an image and a text below the image, I want to reduce the space between the two on android, on iOS there is no spaces in between, here is what I have done:
<Grid x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="btnApplyLeave" ContentLayout="Top,0" BackgroundColor="White" FontSize="10" TextColor="#777777"" ImageSource="applyleave.png" BorderWidth="1" BorderColor ="#ededed" Text="Apply Leave" Grid.Row="0" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Fill" HeightRequest="{Binding Width, Source={x:Reference btnApplyLeave}}" >
<Button.CornerRadius>
<OnPlatform Android="6">
</OnPlatform>
</Button.CornerRadius>
</Button>
<Button x:Name="captureIntent" ContentLayout="Top,0" ImageSource="capturescores.png" Text="Capture Scores" TextColor="#777777 FontSize="10" BorderWidth="1" BorderColor ="#ededed" BackgroundColor="White" Grid.Row="0" Grid.Column="1" VerticalOptions="Center" HorizontalOptions="Fill" HeightRequest="{Binding Width, Source={x:Reference captureIntent}}" >
<Button.CornerRadius>
<OnPlatform Android="6">
</OnPlatform>
</Button.CornerRadius>
</Button>
</Grid>
I found this issue is realted to the ContentLayout in the android platform.
If I set the value of spacing to -200 in the android Platform We can reduce the spacing.
if (Device.RuntimePlatform == Device.Android)
{
btnApplyLeave.ContentLayout = new Button.ButtonContentLayout(Button.ButtonContentLayout.ImagePosition.Top, -200);
}
I'm not sure about how to do it with a single button, but you could make a frame with a TapGestureRecognizer that will act like a button.
The TapGestureRecognizer have both Tapped (like clicked on button) and Command for MVVM. The code needs some adjustment in your project, but you get the idea:
<Frame HeightRequest="{Binding yourHeight}" CornerRadius="6" HasShadow="false"
BackgroundColor="White" BorderColor="#ededed" HorizontalOptions="Fill">
<Frame.GestureRecognizers>
<TapGestureRecognizer />
</Frame.GestureRecognizers>
<Image Source="image.png" HorizontalOptions="Center" VerticalOptions="Center"/>
<Label Text="TestText" HorizontalOptions="Center" VerticalOptions="Center"/>
</Frame>