I have a grid with labels, each "Tile" has a transparent background color, however the text also appears to be transparent. Is there a way to remove the transparency from the label text?
My code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LoyaltyWorx.GridMenu"
BackgroundImage="grid.jpg"
Title="Main Menu"
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Label Text="Cards" TextColor="White" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="0" BackgroundColor="#1481BA" Opacity="0.5" x:Name="CardTile"/>
<Label Text="Transactions" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="1" BackgroundColor="#ede890" Opacity="0.5" x:Name="TransactionTile"/>
<Label Text="Promotions" TextColor="White" FontSize="30" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="0" BackgroundColor="#1481BA" Grid.ColumnSpan="2" Opacity="0.7" x:Name="PromoTile"/>
<Label Text="Settings" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="2" Grid.Column="0" BackgroundColor="#ede890" Opacity="0.5" x:Name="SettingsTile" />
<Label Text="My Profile" TextColor="White" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="2" Grid.Column="1" BackgroundColor="#1481BA" Opacity="0.5" x:Name="ProfileTile"/>
</Grid>
</ContentPage>
ScreenShot:
You need to add your label in StackLayout look like this :
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="#1481BA" Opacity="0.5" >
<Label Text="Cards" TextColor="White" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Transparent" x:Name="CardTile"/>
</StackLayout>
You can also use Frame in place of StackLayout
On the labels, set the BackgroundColor property to 0.5 alpha (128 = 0x80) and keep Opacity at 1.0.
<Label ... BackgroundColor="#801481BA" Opacity="1.0" />
Related
I'm developing a Xamarin. Form mobile apps and trying to center and image above 2 buttons, how can I center and image in a grid XAML tag, see XAML code below in which I'm using, and having difficulty place it in the center of the mobile app screen.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DemoApp.Views.MainPage"
NavigationPage.HasNavigationBar="False">
<ContentPage.Content>
<Grid HorizontalOptions="CenterAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<StackLayout Padding="10" HorizontalOptions="Center" VerticalOptions="Center" >
<Image Grid.Row="0" Grid.Column="0" Source="RegisterUser" WidthRequest="100" HeightRequest="81" HorizontalOptions="Center" VerticalOptions="Center" />
</StackLayout>
<Button Text="Sign-In" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" TextColor="White"
Grid.Row="2" Grid.Column="0"
BorderRadius="4" BorderWidth="1"
BackgroundColor="LightGray" />
<Button Text="Register" TextColor="White"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Grid.Row="2" Grid.Column="1"
BorderRadius="4" BorderWidth="1"
BackgroundColor="LightGray" />
</Grid>
</ContentPage.Content>
</ContentPage>
your grid has 2 cols, so your StackLayout needs to span them in order to be centered across the entire grid
<StackLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Padding="10" HorizontalOptions="Center" VerticalOptions="Center" >
<Image Source="RegisterUser" WidthRequest="100" HeightRequest="81" HorizontalOptions="Center" VerticalOptions="Center" />
</StackLayout>
I want to achieve a result like this:
As you see, there is a big area for scroll view and a small area for three buttons at the bottom.
I tried this code:
<ContentPage Title="New Report" IconImageSource="NewReport.png" BackgroundImageSource="blue_windows.jpg">
<StackLayout Margin="5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollView>
<StackLayout x:Name="MyStack">
<!--Labels should be added here programmatically every time the button clicked-->
</StackLayout>
</ScrollView>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="1" Grid.Column="0" Text="Add New Item" Clicked="Button_Clicked" />
<Button Grid.Row="1" Grid.Column="1" Text="Send" />
<Button Grid.Row="1" Grid.Column="2" Text="Reset" />
</Grid>
</Grid>
</StackLayout>
</ContentPage>
<ContentPage Title="Report History" IconImageSource="History.png" BackgroundImageSource="blue_windows.jpg" />
<ContentPage Title="Messages" IconImageSource="Message.png" BackgroundImageSource="blue_windows.jpg"/>
But it is not my desired result. Please help me.
You just need to use a Grid with two Rows and three Columns.
Place the ScrollView in the first row and the three Buttons in the second row.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NewerForms.Page1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="8*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ScrollView Grid.Row="0" Grid.ColumnSpan="3" x:Name="MyStack" >
</ScrollView>
<Button Grid.Row="1" Grid.Column="0" Text="Login" CornerRadius="30"></Button>
<Button Grid.Row="1" Grid.Column="1" Text="Signup" CornerRadius="30"></Button>
<Button Grid.Row="1" Grid.Column="2" Text="Signup" CornerRadius="30"></Button>
</Grid>
</ContentPage>
The more about Grid you could look here.
enter image description herePlease use the below code for your requirement:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SwimmingSpot.Views.Pages.TestPage"
BackgroundColor="White">
<!--<Grid Padding="0,0,0,0" WidthRequest="365">
<StackLayout WidthRequest ="364" x:Name="stack" ></StackLayout>
<Slider x:Name="slider" WidthRequest ="364"/>
</Grid>-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="9*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ScrollView
Grid.Row="0"
Grid.Column="0">
<StackLayout
BackgroundColor="Blue"
Spacing="40">
<Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
TextColor="White"/>
<Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
TextColor="White"/>
<Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
TextColor="White"/>
<Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
TextColor="White"/>
<Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
TextColor="White"/>
<Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
TextColor="White"/>
<Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
TextColor="White"/>
<Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
TextColor="White"/>
<Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
TextColor="White"/>
<Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
TextColor="White"/>
<Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
TextColor="White"/>
</StackLayout>
</ScrollView>
<StackLayout
Grid.Row="1"
Grid.Column="0"
HorizontalOptions="CenterAndExpand"
VerticalOptions="StartAndExpand"
Orientation="Horizontal">
<Button
HeightRequest="40"
WidthRequest="100"
BackgroundColor="Red"
Text="First"
TextColor="White"/>
<Button
HeightRequest="40"
WidthRequest="100"
BackgroundColor="Red"
Text="Second"
TextColor="White"/>
<Button
HeightRequest="40"
WidthRequest="100"
BackgroundColor="Red"
Text="Third"
TextColor="White"/>
</StackLayout>
</Grid>
</ContentPage>
I modify the sample https://learn.microsoft.com/zh-tw/samples/xamarin/xamarin-forms-samples/userinterface-xaminals/ ,
replace the collectionview with listview . after replacing I found the listview cannot scroll to bottom (there are total 17 items , but only show 6 items)
This error only happen on Android,but it works well on IOS.
How to solve this problem?
<?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:Xaminals.Controls"
xmlns:data="clr-namespace:Xaminals.Data"
x:Class="Xaminals.Views.MonkeysPage"
Title="Monkeys">
<RelativeLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
VerticalOptions="FillAndExpand"
Padding="10">
<ListView ItemsSource="{x:Static data:MonkeyData.Monkeys}"
x:Name="CollectionView1"
RowHeight="100">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid VerticalOptions="CenterAndExpand" Padding = "20, 0" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image
Grid.RowSpan="2"
Aspect="AspectFill"
HeightRequest="60"
Source="{Binding ImageUrl}"
WidthRequest="60" />
<Label
Grid.Row="0"
Grid.Column="1"
FontAttributes="Bold"
Text="{Binding Name}" />
<Label
Grid.Row="1"
Grid.Column="1"
FontAttributes="Italic"
Text="{Binding Price}"
VerticalOptions="End" />
<Image Grid.Row="2" Grid.Column="0" Source="bear.png" HeightRequest="25" WidthRequest="25">
<Image.GestureRecognizers>
<TapGestureRecognizer
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<ActivityIndicator x:Name="activityIndicator" Color="Red" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.33}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=0.33}" />
</RelativeLayout>
</ContentPage>
The solution is change the RelativeLayout to Stacklayout:
<StackLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
VerticalOptions="FillAndExpand"
Padding="10">
<ListView ItemsSource="{x:Static data:MonkeyData.Monkeys}"
x:Name="CollectionView1"
RowHeight="100">
.....
</ListView>
</StackLayout>
</StackLayout>
If you want to use RelativeLayout, you need to use XConstraint, YConstraint,WidthConstraint,HeightConstraint to layout the child view instead of VerticalOptions="FillAndExpand", HorizontalOptions="FillAndExpand".
Im' working on XAML view and I want to create simple view with left side bar and the content with Grid and inside grid I have some buttons, that I want to achieve is to fill all form
Code:
<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:local="clr-namespace:App.ViewModels"
mc:Ignorable="d"
x:Class="App.Views.UserSelectionPage">
<ContentPage.Content>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Vertical" BackgroundColor="#093145" HorizontalOptions="Start" VerticalOptions="FillAndExpand" >
<Label Text="AppName"
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="Center"
VerticalOptions="Center"
FontSize="Header"
TextColor="White"
Margin="15,0,10,15" />
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="End" BackgroundColor="#093145">
<Image Source="Assets/LargeTitle.scale-100.png"
Grid.Row="0"
Grid.Column="0"
HorizontalOptions="Center"
WidthRequest="90"
HeightRequest="90"
Margin="15,0,10,15"
VerticalOptions="Center"/>
</StackLayout>
</StackLayout>
<Grid BackgroundColor="AliceBlue">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<BoxView Color="#505CA9" Grid.Row="0" Grid.ColumnSpan="3" />-->
<Button Text="Use username instead"
Command="{Binding ToggleNewUserCommand}"
Grid.Row="0"
Grid.Column="2"
VerticalOptions="Center"
HorizontalOptions="End"
BackgroundColor="Transparent"
FontSize="Title"
TextColor="White"
Margin="15,0,10,15"/>
<Button x:Name="userOne"
d:Text="GQ"
Text="{Binding UserSelectionList[0].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userOne}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Margin="0,40,0,40"
Grid.Row="1"
Grid.Column="0"
BackgroundColor="{Binding UserSelectionList[0].BackgroundColor}"
d:BackgroundColor="#093145"/>
<Button x:Name="userTwo"
d:Text="LR"
Text="{Binding UserSelectionList[1].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userTwo}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Margin="0,40,0,40"
Grid.Row="1"
Grid.Column="1"
BackgroundColor="{Binding UserSelectionList[1].BackgroundColor}"
d:BackgroundColor="#107896" />
<Button x:Name="userThree"
d:Text="AR"
Text="{Binding UserSelectionList[2].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userThree}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Margin="0,40,0,40"
Grid.Row="1"
Grid.Column="2"
BackgroundColor="{Binding UserSelectionList[2].BackgroundColor}"
d:BackgroundColor="#829356" />
<Button x:Name="userFour"
d:Text="RR"
Text="{Binding UserSelectionList[3].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userFour}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Grid.Row="2"
Grid.Column="0"
BackgroundColor="{Binding UserSelectionList[3].BackgroundColor}"
d:BackgroundColor="#EBC944" />
<Button x:Name="userFive"
d:Text="GQ"
Text="{Binding UserSelectionList[4].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userFive}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Grid.Row="2"
Grid.Column="1"
BackgroundColor="{Binding UserSelectionList[4].BackgroundColor}"
d:BackgroundColor="#F26D21" />
<Button x:Name="userSix"
d:Text="GQ"
Text="{Binding UserSelectionList[5].Abbreviation}"
CommandParameter="{x:Reference userSix}"
Command="{Binding ButtonSelectedCommand}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Grid.Row="2"
Grid.Column="2"
BackgroundColor="{Binding UserSelectionList[5].BackgroundColor}"
d:BackgroundColor="#C02F1D" />
</Grid>
</StackLayout>
</ContentPage.Content>
Problem is for some reason it has free space inclusive if I use FillAndExpand on main StackLayout
I read about that but people just say that I missing FillAndExpand, I think problem is because I use Orientation="Horizontal" into first StackLayout, but that is the way I found to merge side bar with gridview. How can I achieve this? Regards
Add HorizontalOptions to the Grid itself:
<Grid HorizontalOptions="FillAndExpand" BackgroundColor="AliceBlue">
Some times when loading a View, it does not fully load on Iphone.. see the screenshot.. (Images are blurred on purpose..) At least, it does not load with proper dimensions. it is usually fixed by rotating the phone to landscape and back.. is there a way to avoid this?
here is my view:
<?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:vm="clr-namespace:GalShare.ViewModel"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:forms="clr-namespace:RedCorners.Forms;assembly=RedCorners.Forms"
mc:Ignorable="d"
x:Class="GalShare.Views.Gallery">
<NavigationPage.TitleView>
<Grid Padding="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="45"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Grid.Column="0" Text="Back" x:Name="Backbutton" Clicked="Backbutton_Clicked"></Button>
<Button Grid.Row="0" Grid.Column="2" Text="Ph. contact info" x:Name="PhInfo" Clicked="PhInfo_Clicked"></Button>
</Grid>
</NavigationPage.TitleView>
<ContentPage.Content>
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1">
<ContentView x:Name="Messagecontainer" Padding="5">
<forms:Frame2 CornerRadius="8"
HasShadow="True"
ShadowRadius="8"
ShadowColor="Black"
Padding="5"
BackgroundColor="LightGray">
<Label x:Name="Messagefield"></Label>
</forms:Frame2>
</ContentView>
<CollectionView ItemsSource="{Binding Galleries}" Margin="0" x:Name="MyCollection" SelectionMode="Single" SelectionChanged="CollectionView_SelectionChanged">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ContentView Padding="8">
<forms:Frame2 CornerRadius="15"
HasShadow="True"
ShadowRadius="5"
HeightRequest="190"
BackgroundColor="LightGray"
Padding="1">
<StackLayout HorizontalOptions="Start" VerticalOptions="Start" Padding="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ffimageloading:CachedImage Grid.Row="0" Grid.Column="0" x:Name="myImage" Source="{Binding ThumbUrl}" Aspect="AspectFit" CacheDuration="1" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" DownsampleToViewSize="False"></ffimageloading:CachedImage>
<StackLayout Padding="0" Margin="0" Spacing="0" Grid.Column="0" Grid.Row="1">
<StackLayout Spacing="0" Margin="0" Padding="5,0,5,0">
<ImageButton HorizontalOptions="Center" Padding="0" WidthRequest="28" Aspect="AspectFit" HeightRequest="28" Margin="0" Source="{Binding likeImg}" x:Name="Favoriteimage" Clicked="LikeButton_Clicked" ></ImageButton>
<!-- <Button CharacterSpacing="0" HorizontalOptions="Center" Padding="0" WidthRequest="50" HeightRequest="28" Margin="0" Text="Like" x:Name="Favoriteimage" Clicked="Button_Clicked" ></Button>-->
</StackLayout>
<Label x:Name="Picname" Text="{Binding ImageName}" IsVisible="{Binding showname}" FontSize="Micro" VerticalOptions="End" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" ></Label>
</StackLayout>
</Grid>
</StackLayout>
</forms:Frame2>
</ContentView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
<StackLayout IsVisible="{Binding isBusy}" x:Name="LoadingLayout" Padding="12"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<ActivityIndicator IsVisible="{Binding IsBusy}"
IsRunning="{Binding IsBusy}" />
<Label Text="Loading gallery..." IsVisible="{Binding IsBusy}" HorizontalOptions="Center" TextColor="Black"/>
</StackLayout>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
Because you used AbsoluteLayout as root layout of the ContentPage . If you want to put the ActivityIndicator on the CollectionView , you could use Grid and put them in the same cell .
<Grid VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" BackgroundColor="Red" x:Name="LoadingLayout" Padding="12">
//...
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="0" IsVisible="{Binding isBusy}" x:Name="LoadingLayout" Padding="12" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<ActivityIndicator IsVisible="{Binding IsBusy}"
IsRunning="{Binding IsBusy}" />
<Label Text="Loading gallery..." IsVisible="{Binding IsBusy}" HorizontalOptions="Center" TextColor="Black"/>
</StackLayout>
</Grid>
If the problem still exists, you could share your sample so that I can test it on my side .