is it possible to disable user interaction while loading? in my application, when the user inters his login info and presses a button to login I want a loading indicator to show and to disable all user interaction while its loading including disabling the back button/gesture, is there a way to achieve that? any help is appreciated
I solved it by putting the stack layout of my page under an Absolute layout along side a loading overlay that looks like this:
<AbsoluteLayout VerticalOptions="Fill">
<StackLayout AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
//contents of the page....
</StackLayout>
<BoxView AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1"
BackgroundColor="Transparent"
InputTransparent="false"
IsVisible="{Binding Path=IsBusy, Source={x:Reference Page}}" />
<ActivityIndicator IsRunning="{Binding Path=IsBusy, Source={x:Reference Page}}"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".5,.5,-1,-1" />
</AbsoluteLayout>
and changing IsBusy in code will activate the loading overlay
Take a look at https://github.com/redth-org/BTProgressHUD .
It disables user interaction while it shows on screen , you can dismiss it when the loading is finished .
Related
I'm trying to make a design like in the picture
But I don't know how to make tab buttons and tab process. I read microsoft's articles and watched a few videos.but none of them were as I wanted.I would be glad if you help
Yes, you can try to use Xamarin Community Toolkit TabView to achieve this just as Jason mentioned.
You can customize your tab to your needs.
Please refer to the following code:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
x:Class="MyLittleApp.MainPage">
<Grid>
<xct:TabView
TabStripPlacement="Bottom"
TabStripBackgroundColor="Blue"
TabStripHeight="60"
TabIndicatorColor="Yellow"
TabContentBackgroundColor="Yellow">
<xct:TabViewItem
Icon="triangle.png"
Text="Tab 1"
TextColor="White"
TextColorSelected="Yellow"
FontSize="12">
<Grid
BackgroundColor="Gray">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Icon="circle.png"
Text="Tab 2"
TextColor="White"
TextColorSelected="Yellow"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</Grid>
</ContentPage>
Note:You can also check thread: Custom TabbedPage with buttons .
I'm creating an image gallery app using a collection view (thumbnail). I'm using FFloading to get the images from URL. When I click on the image, I want to navigate to another page using the shared Transaction library to view my image on fullscreen. I noticed, however, that when I navigate to the full-screen page the image re-downloads. Is there a way I can achieve this seamless transition? Think Instagram. Thanks
From: Page
Aspect="AspectFill"
HeightRequest="150"
RetryCount="5"
CacheDuration="30"
RetryDelay="450"
DownsampleToViewSize="True"
sharedTransitions:Transition.Name="PlaceImage"
sharedTransitions:Transition.Group="{Binding Id}"
Source="{Binding PhotoPath,Converter={StaticResource Key=path}}"/>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding Source={x:Reference browse},Path=BindingContext.NavigateToDetailsCommand}" CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
To: <ffimageloading:CachedImage
Aspect="AspectFill"
DownsampleToViewSize="True"
RetryCount="5"
FadeAnimationEnabled="True"
CacheDuration="30"
Source="{Binding PhotoPath,Converter={StaticResource Key=path}}"
RetryDelay="450"
sharedTransitions:Transition.Name="PlaceImage"/>```
Found a solution, I needed to set a hightrequest on the second page
I created a page in Xamarin.Forms that should display some items, coming from an IList data source, and a video after them.
List of items will be displayed using ListView. The video is displayed using VideoView.
This is the actual page 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"
xmlns:mm="clr-namespace:Plugin.MediaManager.Forms;assembly=Plugin.MediaManager.Forms"
x:Class="MyApp.Views.ItemDetailPage"
Title="{Binding Title}">
<ScrollView>
<StackLayout Orientation="Vertical" Padding="15">
<ListView
ItemsSource="{Binding Item.Properties}"
HasUnevenRows="true">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10">
<Label Text="{Binding .}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<mm:VideoView x:Name="MyVideo" WidthRequest="320" HeightRequest="190" HorizontalOptions="FillAndExpand" />
<Button x:Name="BtnPlayStop" Text="Iniciar" Clicked="PlayStop_Clicked" BackgroundColor="Silver" TextColor="White"/>
</StackLayout>
</ScrollView>
</ContentPage>
The problems I have when I run the app are:
The page initially appears scrolled down so that the video is initially seen.
The space between the last element of the list view and the video is very big
It´s difficult to do the scroll up or down by using the finger.
Is my XAML code correct? what changes can I apply to fix this weird behaviour?
EDIT: I have found that between the listview and video is nothing. That is why it is difficult to scroll. If I place the finger inside the list view, I can scroll, the same if I place the finger inside the video or button. But if I place the finger between the list view and the video no scroll is performed. Weird, isn't it?
Thanks
Jaime
Finally, I have used solution in this page: https://xamarinsharp.com/2017/05/16/listview-height-issue-in-xamarin-forms-how-to-solve-it/
Basicly, it is to set the HeightRequest of the ListView in code behind according to the number of bound elements.
Regards
Jaime
I have a list of two ContentViews that have the PullToRefreshLayout plugin within them surrounding ScrollViews. I'm not sure what's going on, but when you pull to refresh, the refresh circle appears but the Refresh Command never gets hit nor does the refresh circle ever finish.
Here is my CarouselView
<cv:CarouselView
Margin="0, 0, 0, 0"
ItemsSource="{Binding ContentViews}"
Position="{Binding CarouselPosition}"
x:Name="ContentCarousel">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<ContentView Content="{Binding Content}"/>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
And here is an example of one of my ContentViews.
<ContentView.Content>
<controls:PullToRefreshLayout
IsPullToRefreshEnabled="True"
RefreshCommand="{Binding BindingContext.RefreshReceivingCommand, Source={x:Reference Name=ReceivingContentView}}"
IsRefreshing="{Binding IsBusy}"
RefreshColor="#4ABDAC">
<ScrollView
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Style="{StaticResource cardScrollViewBackgroundColor}">
<StackLayout
Padding="0,0,0,0"
VerticalOptions="StartAndExpand"
x:Name="MainStackLayout">
</StackLayout>
</ScrollView>
</controls:PullToRefreshLayout>
</ContentView.Content>
I'm honestly not sure what's going on. I have tried different binding contexts on the refresh command but the command is never hit. Any ideas is greatly appreciated!
EDIT: I sorta found a solution but not a huge fan.
I created an empty Constructor in my ViewModel that sets my Refreshing Commands. Then in the ContentView, I sent the BindingContext to the ViewModel. Seems redundant, but eh, works for now until I figure out the xaml binding.
In Xamarin Forms i want show multiple image (2) in a row: this is an example of what i'd like to do:
In many Q&A i've seen the use of XLabs gridview but the project is no longer maintained.
I think that i can create a custom cell with a stacklayout inside a row but the recycle policy work? And how can i handle the item tapped if i have two column per row?
Thanks
Alessandros answer should work, but if you want to roll something yourself without any third party controls, keep reading:
Recycling will still work if you use a Custom ViewCell. So I would suggest doing that and adding two items in a custom model and render them in one cell at a time.
Now for handling taps: Override the ItemSelected event on your ListView and set the ListView.SelectedItem to null. Then inside your custom ViewCell, add a TapGestureRecognizer to each of the separate models. One thing to note, is that the Command on your TapGestureRecognizer will bind to your individual list item, so you need to set it relative to the BindingContext of the ListView:
<ListView x:Name="MyListView" ...>
<ListView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal>
<Image ...>
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference MyListView}, Path=BindingContext.Item1Command}"/>
</Image.GestureRecognizers>
</Image>
<Image ...>
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference MyListView}, Path=BindingContext.Item2Command}"/>
</Image.GestureRecognizers
</Image>
</StackLayout>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can take a look to this FlowListView.
I have never used it but sounds good.
<flv:FlowListView.FlowColumnTemplate>
<DataTemplate>
<Label HorizontalOptions="Fill" VerticalOptions="Fill"
XAlign="Center" YAlign="Center" Text="{Binding Title}"/>
</DataTemplate>
</flv:FlowListView.FlowColumnTemplate>