While the application is calling a web service, I want to show an activity indicator.
So I created the service, the method which is calling the service and the view.
I tested everything with the an android emulator without any troubles, but if I want to debug it on a phone (LG G6), the activity indicator is not spinning..
The control is visible, but the animation is not working...
This is the code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Button
Grid.Row="0"
Clicked="Button_OnClicked"
HorizontalOptions="Center"
Text="Press"
VerticalOptions="Center" />
<StackLayout
x:Name="StackLayout"
Grid.Row="1"
Padding="30"
BackgroundColor="Black"
HorizontalOptions="Center"
IsVisible="False"
Opacity="0.8"
VerticalOptions="Center">
<ActivityIndicator IsRunning="True" Color="White" />
<Label
FontAttributes="Bold"
Text="Loading..."
TextColor="White" />
</StackLayout>
</Grid>
CodeBehind
private void Button_OnClicked(object sender, EventArgs e)
{
StackLayout.IsVisible = !StackLayout.IsVisible;
}
Related
I want to implement a Carousel view swipe gesture recognizer left or right Swipes.
But ONLY tapped event can be recognized ,gesture events cannot be captured(not firing).
What i need is when user swipe left or right according to the swipe event i want to manage dot button opacity accordingly.
I saw some nuget packages already there to achieve this.I prefer not to use nuget packages.
I have tried the tapped event,tapped event is firing but not the gesture event
<CarouselView x:Name="CV" ItemsSource="{Binding People}" HeightRequest="200" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Margin="10" >
<CarouselView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal" SnapPointsAlignment="Center" SnapPointsType="Mandatory"/>
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame BorderColor="LightGray" CornerRadius="3" HasShadow="False">
<Grid>
<Grid.GestureRecognizers>
<SwipeGestureRecognizer Direction="Left" Swiped="SwipeGestureRecognizer_OnSwiped" />
<SwipeGestureRecognizer Direction="Right" Swiped="SwipeGestureRecognizer_OnSwiped"/>
<SwipeGestureRecognizer Direction="Up" Swiped="SwipeGestureRecognizer_OnSwiped" />
<SwipeGestureRecognizer Direction="Down" Swiped="SwipeGestureRecognizer_OnSwiped"/>
</Grid.GestureRecognizers>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Source="person" VerticalOptions="Start"/>
<StackLayout Grid.Column="1" Grid.Row="1" HorizontalOptions="EndAndExpand" VerticalOptions="EndAndExpand">
<Label Text="{Binding}" FontSize="24" HorizontalOptions="EndAndExpand"/>
<Label Text="Company Address" HorizontalOptions="EndAndExpand"/>
<Label Text="City, State" HorizontalOptions="EndAndExpand"/>
</StackLayout>
</Grid>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Yes,CarouselView have GestureRecognizers ,for example,
<CarouselView>
<CarouselView.GestureRecognizers>
<SwipeGestureRecognizer Swiped="OnSwiped" />
</CarouselView.GestureRecognizers>
</CarouselView>
method OnSwiped
private void OnSwiped(object sender, SwipedEventArgs e)
{
if (e.Direction == (e.Direction & SwipeDirection.Left))
{
}
}
In my Xamarin Forms app, I have a Syncfusion SfListView with an item template that contains a ffimageloading image control. The list view has an item tapped event that navigates to a details page. Upon navigating back, I have the list rebinding in the page's onappearing method. Sometimes, rather most of the time (not all the time) when you click a list item, navigate to the details page, and come back, the list will load with the item that you clicked, but the image in the row that you clicked is shrunken. I attached a pic. Here's the relevant code
<syncfusion:SfListView x:Name="CountriesListView" ItemTapped="SflistView_ItemTapped"
AutoFitMode="Height" ItemsSource="{ Binding CountryList }" VerticalOptions="FillAndExpand">
<syncfusion:SfListView.HeaderTemplate>
<DataTemplate>
......
</DataTemplate>
</syncfusion:SfListView.HeaderTemplate>
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame OutlineColor="Gray" Padding="2" HasShadow="True" HeightRequest="200">
<Grid RowSpacing="5" ColumnSpacing="0" Margin="10,5">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="AUTO" />
</Grid.RowDefinitions>
<!--<Image Source="{Binding MainIMageURL}" Aspect="Fill" Grid.RowSpan="2">
</Image>-->
<ffimageloading:CachedImage Aspect="Fill" Grid.RowSpan="2"
FadeAnimationEnabled="true"
Source="{ Binding MainIMageURL }" />
<Image Source="{Binding ShadowOverlay}" Grid.RowSpan="2" Aspect="Fill" VerticalOptions="End" HorizontalOptions="Fill" />
<Grid Margin="10,10,10,0" RowSpacing="10" ColumnSpacing="10" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="AUTO" />
<!--<RowDefinition Height="25" />-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="AUTO" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Name}" Grid.Row="0" Grid.ColumnSpan="3" HorizontalOptions="Center"
VerticalOptions="End"
FontSize="25" LineBreakMode="NoWrap" TextColor="#FFFFFF">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="HelveticaNeue-Bold" />
<On Platform="Android" Value="sans-serif-medium" />
</OnPlatform>
</Label.FontFamily>
</Label>
</Grid>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
protected override void OnAppearing()
{
BindData();
}
private async Task BindData()
{
await LoadCountries();
}
private async Task LoadCountries()
{
try
{
CountriesListView.IsBusy = true;
Console.WriteLine("Getting countries");
await vm.RefreshDataAsync();
Console.WriteLine("Countries retrieved");
}
catch (Exception ex)
{
.......
}
finally
{
CountriesListView.IsBusy = false;
}
}
I have a very simple Xamarin.Forms app. It's just for testing, and at the moment is just supposed to display messages when different boxes on the screen are tapped. The tap gesture isn't working though.
Here is my XAML:
<!-- Header -->
<Label Text="My Company"
TextColor="White"
FontSize="Large"
BackgroundColor="#a6192e"
HorizontalTextAlignment="Center" />
<!-- Body -->
<FlexLayout FlexLayout.Grow="1">
<!-- Content -->
<BoxView
BackgroundColor="#80225f"
FlexLayout.Grow="1" />
<Grid
BackgroundColor="#80225f"
Padding="20,50,50,20"
RowSpacing="20"
ColumnSpacing="20">
<Grid.RowDefinitions>
<RowDefinition Height="300"/>
<RowDefinition Height="300"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="280"/>
<ColumnDefinition Width="280"/>
<ColumnDefinition Width="280"/>
</Grid.ColumnDefinitions>
<BoxView
x:Name="App1Box"
BackgroundColor="Silver"
Grid.Row="0"
Grid.Column="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
<BoxView
BackgroundColor="Gray"
Grid.Row="0"
Grid.Column="0"
HeightRequest="60"
VerticalOptions="Start"/>
<Label
Grid.Row="0"
Grid.Column="0"
HorizontalTextAlignment="Center"
TextColor="White"
FontSize="Large"
FontAttributes="Bold"
Margin="10">
App1</Label>
<BoxView
x:Name="App2Box"
BackgroundColor="Silver"
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
<BoxView
BackgroundColor="Gray"
Grid.Row="0"
Grid.Column="1"
HeightRequest="60"
VerticalOptions="Start"/>
<Label
Grid.Row="0"
Grid.Column="1"
HorizontalTextAlignment="Center"
TextColor="White"
FontSize="Large"
FontAttributes="Bold"
Margin="10">
App2</Label>
<BoxView
x:Name="App3Box"
BackgroundColor="Silver"
Grid.Row="0"
Grid.Column="2"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
<BoxView
BackgroundColor="Gray"
Grid.Row="0"
Grid.Column="2"
HeightRequest="60"
VerticalOptions="Start"/>
<Label
Grid.Row="0"
Grid.Column="2"
HorizontalTextAlignment="Center"
TextColor="White"
FontSize="Large"
FontAttributes="Bold"
Margin="10">
App3</Label>
<Button Grid.Row="1"
Grid.Column="0"
Text="Test Tap"
Clicked="OnMealsTapped"
WidthRequest="100"
HeightRequest="100"
BackgroundColor="Lime"
TextColor="Red"/>
</Grid>
<!-- Navigation items-->
<BoxView FlexLayout.Basis="50"
FlexLayout.Order="-1"
Color="#80225f" />
<!-- Aside items -->
<BoxView FlexLayout.Basis="50"
Color="#80225f" />
</FlexLayout>
<!-- Footer -->
<Label Text="Test App"
FontSize="Large"
BackgroundColor="Gray"
HorizontalTextAlignment="Center" />
</FlexLayout>
</ContentPage.Content>
And here is my C#:
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace TESTAPP
{
public partial class MyPage : ContentPage
{
public MyPage()
{
InitializeComponent();
var App1TapHandler = new TapGestureRecognizer();
var App2TapHandler = new TapGestureRecognizer();
var App3TapHandler = new TapGestureRecognizer();
App1TapHandler.NumberOfTapsRequired = 1;
App1TapHandler.Tapped += OnApp1Tapped;
App2TapHandler.NumberOfTapsRequired = 1;
App2TapHandler.Tapped += OnApp2Tapped;
App3TapHandler.NumberOfTapsRequired = 1;
App3TapHandler.Tapped += OnApp3Tapped;
App1Box.GestureRecognizers.Add(App1BoxTapHandler);
App2Box.GestureRecognizers.Add(App2BoxTapHandler);
App3Box.GestureRecognizers.Add(App3BoxTapHandler);
}
private void OnApp1Tapped(object sender, EventArgs e)
{
DisplayAlert("App1","Lets use App1","OK");
}
private void OnApp2Tapped(object sender, EventArgs e)
{
DisplayAlert("App2", "Lets use App2", "OK");
}
private void OnApp3Tapped(object sender, EventArgs e)
{
DisplayAlert("App3", "Lets use App3", "OK");
}
}
}
Button is there for testing. When tapping button I get the test alert message. Nothing happens when tapping any of the BoxViews.
Why is that not working?
Your problem isn't related to the TapGesture, but you have 2 Boxviews overlapping.
So you will have to add the InputTransparent in the BoxViews that aren't receiving any input:
<BoxView
x:Name="App1Box"
BackgroundColor="Silver"
Grid.Row="0"
Grid.Column="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
<BoxView
InputTransparent="true" <!-- Here -->
BackgroundColor="Gray"
Grid.Row="0"
Grid.Column="0"
HeightRequest="60"
VerticalOptions="Start"/>
Repeat for the remaining.
Try to invoke the code in the event handlers on the main thread.
Device.BeginInvokeOnMainThread(() =>
{
//Run the code here.
});
I have two images in 'Images' folder. Trying to load these images in page but image not showing on page. It does not produce any error in debug. I am checking in Xamarin live player android device.
ImageResourceExtension.cs
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Xamarin.Forms.Internals;
namespace Buffting
{
// You exclude the 'Extension' suffix when using in Xaml markup
[Preserve(AllMembers = true)]
[ContentProperty(nameof(Source))]
public class ImageResourceExtension : IMarkupExtension
{
public string Source { get; set; }
public object ProvideValue(IServiceProvider serviceProvider)
{
if (Source == null)
return null;
// Do your translation lookup here, using whatever method you require
var imageSource = ImageSource.FromResource(Source);
return imageSource;
}
}
}
BeautySalon.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:local="clr-namespace:Buffting;assembly=Buffting"
x:Class="Buffting.Home.BeautySalon"
Title="Beauty Salon">
<ContentPage.Content>
<ListView x:Name="SalonList" RowHeight="370">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Margin="5,5,5,-5" OutlineColor="Blue" HasShadow="true">
<Grid>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.ColumnSpan="2" HeightRequest="200" Source="{ Binding SalonImage}" VerticalOptions="Fill" Aspect="AspectFill" />
</Grid>
<Grid Grid.Row="1" Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.Column="0" Margin="0, 40, 0, 0" Text="{ Binding SalonName }" FontSize="Large" TextColor="White" />
<Image Grid.Row="1" Grid.Column="1" x:Name="Star" Source="{local:ImageResource Buffting.Images.star_outline.png}" />
</Grid>
<Grid Grid.Row="2" Padding="0, 0, 10, 0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="Location:" FontAttributes="Bold" FontSize="Small" TextColor="Black" />
<Label Grid.Row="0" Grid.Column="1" Text="{ Binding Location}" />
<Label Grid.Row="1" Grid.Column="0" Text="Full Address:" FontAttributes="Bold" FontSize="Small" TextColor="Black" />
<Label Grid.Row="1" Grid.Column="1" Text="{ Binding Address}" />
<Label Grid.Row="2" Grid.Column="0" Text="Phone:" FontAttributes="Bold" FontSize="Small" TextColor="Black" />
<Label Grid.Row="2" Grid.Column="1" Text="{ Binding Phone}" />
<Label Grid.Row="3" Grid.Column="0" Text="Opening Time:" FontAttributes="Bold" FontSize="Small" TextColor="Black" />
<Label Grid.Row="3" Grid.Column="1" Text="{ Binding OpeningTime}" />
</Grid>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
I am using this code but image is not loading. I ma new in Xamarin please guide me.
It's wrong, the images are placed within each native project. For Xamarin.Forms you should place the images in the Drawables folders.
If your project is android and ios ,you finally have two images : one in iosproject/Resources and one in AndroidProject/Resources/Drawab.
see Images Doc
If you want to load your images from the shared assembly. Ensure images are set as "EmbeddedResource" (Right Click: Properties, Build Action).
You have too add each image in there native Projects. here is a sample of how it should look like:
You can use the following plugin to generate your images for iOS:
Plugin: Link
For Android:
For IOS :
You can now reference your images in your xaml :
<Image Source="star_outline.png" />
<Image Source="star_selected.png" />
UPDATE:
In your xaml change:
<Image Grid.Row="1" Grid.Column="1" x:Name="Star" Source="{local:ImageResource Buffting.Images.star_outline.png}" />
with :
<Image Grid.Row="1" Grid.Column="1" x:Name="Star" Source="star_outline.png" />
The image should appear , This answers your main question. I'm not sure why your using IMarkupExtension , your not even calling it in the xaml
I had this same problem and found the answer in this thread. Embedded images not showing
When using the ImageResourceExtension the Source property should be prefixed with the Assembly Na
I am doing an application using Xamarin.Forms. There I need to show a datePicker when clicks on a Frame layout. For that purpose I have done this.
xaml part
<Frame Margin="15,0,15,5" HasShadow="false" OutlineColor="{StaticResource TextColorBlue}" BackgroundColor="White" x:Name="selectDate" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<DatePicker x:Name="datePicker" IsVisible="false" DateSelected="Handle_DateSelected" TextColor="Maroon" />
<Label Text="Date" FontAttributes="Bold" FontSize="20" HorizontalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<BoxView HorizontalOptions="FillAndExpand" BackgroundColor="Silver" HeightRequest="1" />
<Grid RowSpacing="1" ColumnSpacing="1" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Saturday" FontAttributes="Bold" FontSize="25" Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<Label Text="May" FontAttributes="Bold" FontSize="25" Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<Label Text="20" FontAttributes="Bold" FontSize="25" Grid.Row="1" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<Label Text="2017" FontAttributes="Bold" FontSize="25" Grid.Row="1" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
</Grid>
</StackLayout>
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Handle_Tapped_DatePicker" />
</Frame.GestureRecognizers>
</Frame>
cs part
void Handle_Tapped_DatePicker(object sender, System.EventArgs e)
{
Debug.WriteLine("Handle_Tapped_DatePicker");
if (datePicker.IsFocused)
{
Debug.WriteLine("Yes, datePicker is focused");
datePicker.Unfocus();
}
datePicker.Focus();
}
void Handle_DateSelected(object sender, Xamarin.Forms.DateChangedEventArgs e)
{
Debug.WriteLine("e.NewDate: " + e.NewDate.ToString());
}
But nothing happening here. The datePicker is not showing. I am testing on iOS simulator. Please help me on this.
Thankfully I got the answer after some searches.
The thing is that, You need to bring the focus of datePicker through the device main UI thread. I have changed my code like this.
Device.BeginInvokeOnMainThread(() =>
{
if (datePicker.IsFocused)
datePicker.Unfocus();
datePicker.Focus();
});