I have a Xamarin Form which is using Scroll View.
I am trying to show a Activity Indicator at the top as I have a ListView in the middle.
But when the user scrolls down the loading is not shown.
So, I need help in disabling the page and showing loading at some z-index as in a popup.
If you want to have an overlay while the screen is loading you can do this.
<Grid>
<ScrollView>
<!-- Insert your page content in here -->
</ScrollView>
<ContentView IsVisible="false" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ActivityIndicator IsRunning="false" />
</ContentView>
</Grid>
When you set your ContentView to IsVisible="true" it will then overlay on top of your page. You can set the background color and opacity on the ContentView if needed to provide a grey out effect.
Or you can use a similar method and have
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ActivityIndicator Grid.Row="0" />
<ScrollView Grid.Row="1">
</ScrollView>
</Grid>
In this way you will have the activity indicator above the scroll view at all times and allow the user to still scroll.
I am new to the Xamarin but you do as below.
<Grid IsEnabled="{Binding IsBusy,Converter={converters:InverseBoolConverter}}" >
...
<ActivityIndicator
Color="{StaticResource LightGreenColor}"
IsRunning="{Binding IsBusy}"
IsVisible="{Binding IsBusy}"
VerticalOptions="Center"
HorizontalOptions="Center">
<ActivityIndicator.WidthRequest>
<OnPlatform x:TypeArguments="x:Double">
<On Platform="iOS, Android" Value="100" />
<On Platform="UWP, WinRT, WinPhone" Value="400" />
</OnPlatform>
</ActivityIndicator.WidthRequest>
</ActivityIndicator>
</Grid>
Related
I have a StackLayout inside an AbsoluteLayout with some entries and a button, and the StackLayout has the LayoutBounds equal to "0,0,1,1" and the LayoutFlags equal to "All".
When I tap on the button, I show a Grid that has the same AbsoluteLayout properties described above, so that this Grid positions itself above the previous StackLayout, hiding all controls.
This Grid has a BoxView with a Gray color with some opacity, and an ActivityIndicator running.
Everything works as expected, except the fact that I still can tap on the entries (showing the virtual keyboard) and the button.
I know that this Grid is above the StackLayout with the controls, but why can I still tap on them ? I have the same solution in Xamarin Forms, and it works as expected, the controls have their events inhibited, since they are in a layer beneath.
Here is some sample code. For testing purposes, the Grid is already visible, but the intent is only making it visible after the tap on the button.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PdC.Views.SamplePage"
Title="SamplePage">
<AbsoluteLayout>
<VerticalStackLayout
BackgroundColor="White"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
Padding="0,50,0,0"
Spacing="50">
<Entry
WidthRequest="200"
BackgroundColor="Yellow"
TextColor="Black"
Text="sample text on first entry" />
<Entry
WidthRequest="200"
TextColor="Black"
BackgroundColor="Yellow"
Text="sample text on second entry" />
<Button
Text="tap on me"
WidthRequest="200" />
</VerticalStackLayout>
<Grid
IsVisible="True"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<BoxView
ZIndex="9"
Grid.RowSpan="2"
BackgroundColor="Red"
VerticalOptions="FillAndExpand"
Opacity="0.5" />
<Frame
BackgroundColor="White"
Grid.Row="1">
<VerticalStackLayout
VerticalOptions="FillAndExpand">
<ActivityIndicator
IsRunning="True"
HorizontalOptions="Center"
Color="Red"/>
<Label
TextColor="Black"
Text="Please wait ..."
HorizontalOptions="Center"/>
</VerticalStackLayout>
</Frame>
</Grid>
</AbsoluteLayout>
</ContentPage>
As you can see, the entries and the button have their background color red with some transparency, meaning that the grid is above the stacklayout, but I still can tap on the entries (and the button) as the screenshots show.
Before tapping on the entry
After tapping the entry
Yes, it is the case as you said.
As a test, I replaced VerticalStackLayout with StackLayout and changed the property of BoxView from BackgroundColor="Red" to BackgroundColor="Transparent" .
Then I tested on xamarin forms, there was no such problem. This should be an issue in maui.
And I have created a new issue about this problem, you can follow it up here: https://github.com/dotnet/maui/issues/9514 .
Thanks for your feedback. Have a nice day.
I have a segment control where I'm displaying tabs. But I'm not able to edit the style of the tab in Xamarin Forms. This is the UI I want
This is how I want to display my tabs in the segment control. I'm able to change the tint color, background color, and text color but none of that will get me a tab in this style. This is my current UI
This is XAML code where I implemented the segment control
<controls:SegmentedControl BackgroundColor="White" SelectedTextColor="Black" TintColor="#FFA500" x:Name="SegControl" ValueChanged="Handle_ValueChanged">
<controls:SegmentedControl.Children>
<controls:SegmentedControlOption Text="VENDOR NAME" />
<controls:SegmentedControlOption Text="PRODUCT/SERVICE" />
</controls:SegmentedControl.Children>
</controls:SegmentedControl>
<StackLayout x:Name="SegContent" />
</StackLayout>
<StackLayout Margin="0,30,0,0">
<StackLayout AbsoluteLayout.LayoutBounds=".20,1,1,.1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White" HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckNear">
<Image Margin="0,10,0,10" x:Name="imgNear" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Near" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckSearch">
<Image Margin="0,10,0,10" x:Name="imgSearch" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Search" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckCart">
<Image Margin="0,10,0,10" x:Name="imgCart" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Cart" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckAccount">
<Image Margin="0,10,0,10" x:Name="imgAccount" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Account" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
</StackLayout>
</StackLayout>
I'm not using any custom renderer for this segment control. Do I have to use a custom renderer for implementing the required UI? If yes how? Any suggestions?
SegmentedControl is not a built in Xamarin.Forms control. There are a few libraries that offer a SegmentedControl, so it would help to know which one you are using.
That said, the library author who created that SegmentedControl also made the platform renderers and so the different look on iOS vs Android is a result of that.
You can, of course, create your own custom renderer, but then why use the library?
Easier to me would be to make a control using Xamarin Forms, for instance you can use a grid that has a first row of two labels ( or Buttons) and a second row of 2 BoxViews that can act as the underline (very short height). Then just add TapGestureRecognizers to each Label (or just use a Buttons and style as needed).
Here's an example using Buttons and BoxViews:
XAML:
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="vBtn"
Text="VENDOR NAME" Clicked="Handle_Clicked"
TextColor="Black"
BackgroundColor="Transparent"
BorderColor="Transparent"
Grid.Row="0"
Grid.Column="0"/>
<Button x:Name="pBtn"
Text="PRODUCT/SERVICE" Clicked="Handle_Clicked"
TextColor="Black"
BackgroundColor="Transparent"
BorderColor="Transparent"
Grid.Row="0"
Grid.Column="1" />
<BoxView x:Name="vBox"
Color="#FFA500" HeightRequest="5"
Grid.Row="1"
Grid.Column="0"/>
<BoxView x:Name="pBox"
Color="Silver" HeightRequest="5"
Grid.Row="1"
Grid.Column="1"/>
</Grid>
Code behind:
void Handle_Clicked(object sender, System.EventArgs e)
{
Button btn = sender as Button;
if (btn.Text == "PRODUCT/SERVICE")
{
vBox.Color = Color.Silver;
pBox.Color = Color.FromHex("#FFA500");
// Do anything else you need to do when the PRODUCT/SERVICE is tapped
}
else
{
vBox.Color = Color.FromHex("#FFA500");
pBox.Color = Color.Silver;
// Do anything else you need to do when the VENDOR NAME is tapped
}
}
No library or custom renderer needed.
I have a customized ScrollView as per the requirement which is based on the TLScrollView.
Now when I am adding some data to it there is weird behaviour that I noticed recently a part of the screen area is unclickable, And the rest of the part works fine.
Now the same code works like a charm on Android but iOS is showing this weird behaviour,
Xaml:
<controls:TLScrollView Orientation="Horizontal" BackgroundColor="White"
x:Name="ListAddons" ItemsSource="{Binding ListAddons}" AbsoluteLayout.LayoutFlags = "All"
AbsoluteLayout.LayoutBounds = "0.5, 0.5, 1.0, 1.0">
<controls:TLScrollView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="Transparent" Margin = "0, 5, 0, 0">
<Grid BackgroundColor="White" InputTransparent="true" RowSpacing = "0" ColumnSpacing = "0">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="45.0*" />
<RowDefinition Height="45*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="1" />
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage Source="{Binding Icon, Converter={StaticResource Base64ToImageConverter}}"
ErrorPlaceholder = "nopreviewlandscape" LoadingPlaceholder = "loadingicon"
Grid.Row="1" Grid.Column="0" HorizontalOptions="Center"
VerticalOptions="Center" Aspect="AspectFill" />
<Label x:Name="lblRecommendationsName" Margin="0" Text="{Binding CategoryName}"
LineBreakMode="WordWrap" XAlign="Center" TextColor="{StaticResource gray_text_color}"
VerticalOptions="Center" HorizontalOptions="Center" Grid.Row="2"
Grid.Column="0" Style="{StaticResource RecommendationName}">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="OpenSans-Light" />
<On Platform="Android" Value="OpenSans-Light" />
</OnPlatform>
</Label.FontFamily>
<Label.TextColor>
<OnPlatform x:TypeArguments="Color">
<On Platform="Android" Value="#000000"></On>
</OnPlatform>
</Label.TextColor>
</Label>
<BoxView WidthRequest="0" Grid.Row="1" Grid.Column="1"
BackgroundColor="{StaticResource separator_color}"
Grid.RowSpan="4" Style="{StaticResource BoxViewHomeStyle}">
</BoxView>
</Grid>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.AddonsClickCommand,Source={x:Reference ListAddons}}"
CommandParameter="{Binding CategoryId}"
/>
</StackLayout.GestureRecognizers>
</StackLayout>
</ViewCell>
</DataTemplate>
</controls:TLScrollView.ItemTemplate>
</controls:TLScrollView>
First, I thought there must be some sort of an overlapping in there which might be causing this but then I realized that the same code was working on Android devices and causing this on iOS.
The part of the image that is unclickable is inside the black box everywhere else the click event works well.
It may have nothing to do with this problem but I think "Grid.RowSpan" of BoxView may cause problem.
The Grid have only three rows(0-2 rows) definitions but BoxView specified to merge 1 to 4 rows.
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="45.0*" />
<RowDefinition Height="45*" />
</Grid.RowDefinitions>
<BoxView WidthRequest="0" Grid.Row="1" Grid.Column="1"
BackgroundColor="{StaticResource separator_color}"
Grid.RowSpan="4" Style="{StaticResource BoxViewHomeStyle}">
</BoxView>
Well, I am not sure what was causing the issue but updating to the latest version of Xamarin.Forms fixed the bug!
I updated to Xamarin.Forms version 4.5.0.396
Feel free to get back if you are facing a similar issue.
Heyo,
So in Xamarin I have a <Grid> with an <Image> and a couple <Label>s inside it, all wrapped inside a <ViewCell>. This looks totally fine in Xamarin.Android, however in Xamarin.iOS the images overlap the labels. I'm not sure what the difference could be - why does it look good in Xamarin.Android but in iOS its all wonky?
Below is my XAML and a couple mockups to show what I mean.
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Aspect="AspectFill" Source="{Binding ImageOverlayEN}" />
<Label Grid.Column="0" Grid.Row="1" VerticalTextAlignment="Start" LineBreakMode="WordWrap" Text="{Binding DynamicOfferText}" FontSize="18">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<OnPlatform.iOS>RobotoCondensed-Regular</OnPlatform.iOS>
<OnPlatform.Android>RobotoCondensed-Regular.ttf#RobotoCondensed-Regular</OnPlatform.Android>
<OnPlatform.WinPhone>RobotoCondensed-Regular.ttf#RobotoCondensed</OnPlatform.WinPhone>
</OnPlatform>
</Label.FontFamily>
</Label>
<Label Grid.Column="0" Grid.Row="2" VerticalTextAlignment="Start" LineBreakMode="WordWrap" Text="{Binding DynamicOfferDetail}" FontSize="16">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<OnPlatform.iOS>RobotoCondensed-Regular</OnPlatform.iOS>
<OnPlatform.Android>RobotoCondensed-Regular.ttf#RobotoCondensed-Regular</OnPlatform.Android>
<OnPlatform.WinPhone>RobotoCondensed-Regular.ttf#RobotoCondensed</OnPlatform.WinPhone>
</OnPlatform>
</Label.FontFamily>
</Label>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
I tried setting the HeightRequest but that didn't seem to make a difference:
#if __IOS__
if (viewModel.Items.Count > 0)
{
MyListView.HeightRequest = 300 * viewModel.Items.Count;
}
#endif
Here is a visual representation of what is happening:
Figured it out - had to do with my RowDefinitions being all set to Auto
This got it looking just right:
<RowDefinition Height="1*" />
<RowDefinition Height="0.18*" />
<RowDefinition Height="0.77*" />
I think what was happening is the ListView renders first, the Auto row definition heights set the height of each row before the image is done loading, then the image finishes loading and overlaps the rest of the list view's item (including the labels). This might just be a quirk of iOS, where as Android calculates the row heights after the images are done loading (explaining why it looked fine in Android)
I'm trying to add three button images on the same row inside a StackLayout.
The first button image doesn't show any error, but the problem is with two other buttons.
Here is the code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height ="auto"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" HorizontalOptions="Center" VerticalOptions="Center">
<Image HorizontalOptions="Center" VerticalOptions="Center" Source="loginlogo.png"/>
</StackLayout>
<StackLayout Padding="5" Spacing="5" Grid.Row="1">
<StackLayout>
<Label Text ="editor is used for collecting text that is expected to take more than one line."
TextColor="Black" BackgroundColor="White" HeightRequest="100" />
</StackLayout>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center"
Orientation="Horizontal">
<Button x:Name="facebook" WidthRequest="50" HeightRequest="50" Image="Fb.png">
<Button.Image Aspect="AspectFit" />
</Button>
<Button WidthRequest="50" HeightRequest="50" Image="LINKEDIN.png">
<Button.Image Aspect="AspectFit" />
</Button>
<Button x:Name="YB" WidthRequest="50" HeightRequest="50" Image="YOUTUBE.png">
<Button.Image Aspect="AspectFit" />
</Button>
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="4" HorizontalOptions="Center" VerticalOptions="End" Orientation="Horizontal" Margin="1" >
<Label Text="sample text" TextColor="Gray" HorizontalOptions="Center" HorizontalTextAlignment="Center"/>
</StackLayout>
</Grid>
This is the exact error I receive:
Position 35:18. Can not set the content of Button as it doesn't have a
ContentPropertyAttribute
Position 35 is the third button named YB
I don't understand where the problem is.
Any advice will be helpful.
Thanks
Xamarin.Forms.Button.Image is an FileImageSource and thus there is no Aspect property to it. This abstract control is converted to a platform native one and full image control of how it appears within that button on each platform is not exposed.
But on Xamarin.Forms.Image there is an Aspect property.
If you need to control the aspect ratio, you could created a custom button renderer and handle it at the platform level, or just use a Xamarin.Forms.Image and set a tab gesture on them.