I'm creating a Xamarin Forms app that uses Prism. The solution has the three projects that Xamarin supports: Android, iOS and UWP. The app starts on a MainPage(MasterDetailPage) that has two children pages: Promotions and Account.
<ContentPage.Content>
<ListView x:Name="listView"
ItemSelected="ListView_ItemSelected">
<ListView.Behaviors>
<behaviors:EventToCommandBehavior EventName="ItemTapped"
Command="{Binding ItemTappedCommand}"
EventArgsParameterPath="Item"/>
</ListView.Behaviors>
<ListView.ItemsSource>
<x:Array Type="{x:Type viewModels:MasterItem}">
<viewModels:MasterItem Title="Promoções" Path="PromotionsPage"/>
<viewModels:MasterItem Title="Conta" Path="AccountPage"/>
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="{Binding Title}" Margin="10"/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
When user navigates to AccountPage, the app verify if the user is logged. If not, a modal page is shown with SignInPage.
...
private async void ItemTapped(MasterItem masterItem)
{
if (masterItem.Title.Equals("Conta"))
{
if (isLogged)
await _navigationService.NavigateAsync("NavigationPage/AccountPage");
else
await _navigationService.NavigateAsync("NavigationPage/SignInPage", useModalNavigation:true);
}
else
{
await _navigationService.NavigateAsync("NavigationPage/" + masterItem.Path);
}
}
...
In SignInPage there's a Cancel button to go back to MainPage. On Android, when the user goes back, the MainPage(MasterDetailPage) menu shows properly. But on UWP it is not working.
Related
I am using Rg.Plugins.Popup plugin in my xamarin forms app. It is a nice plugin for modal dialogs. However, I am looking to dismiss the dialog when user scrolls down. (Most dialogs in iOS has this behavior of closing with scrolling down).
XAML inside Popup page.
Option 1
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
HasSystemPadding="True"
CloseWhenBackgroundIsClicked="False"
x:Name="MyPage"
x:Class="wQuran.Views.Today.PrayerTimesSettingsPopupPage">
<Frame Style="{DynamicResource PopupFrame}" VerticalOptions="FillAndExpand" IsClippedToBounds="True">
<Grid RowDefinitions="Auto,*" Style="{DynamicResource BaseGrid}">
<BoxView Grid.Row="0" Style="{DynamicResource PopupTitleBoxView}"/>
<Grid Grid.Row="0" ColumnDefinitions="*,30" HeightRequest="40" Padding="10">
<Label Grid.Column="0" Text="{Binding Title}" Style="{DynamicResource PopupTitleLabel}"/>
<ImageButton Grid.Column="1" Style="{DynamicResource DialogCloseImageButton}" Command="{Binding CloseDialogCommand}"/>
</Grid>
</Grid>
</Frame>
</pages:PopupPage>
Option 2.
Updated XAML and added the Frame inside ScrollView
<ScrollView Scrolled="ScrollView_Scrolled">
....
</ScrollView>
private void ScrollView_Scrolled(object sender, Xamarin.Forms.ScrolledEventArgs e)
{
if (e.ScrollY > 100)
{
itemViewModel.CloseDialogCommand.Execute(null);
}
}
In option 1 I don't have the scroll, so the plug in works with default behavior, but I have no way to close the dialog in scroll.
In option 2, I added the frame inside the scrollview to check for Y scroll and dismiss the dialog. The Scrolled event never fires. Additionally, I cannot close the dialog when clicking outside the modal.
After all, my question is how to dismiss the dialog while scrolling down?
After all, my question is how to dismiss the dialog while scrolling down?
I guess that you want to close PopupPage when ScrollView scroll ending. If yes, please take a look the following code:
<pages:PopupPage
x:Class="FormsSample.simplecontrol.Page16"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup">
<StackLayout
Padding="20,0"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center">
<Frame
Padding="0"
BackgroundColor="CadetBlue"
CornerRadius="10"
HeightRequest="100">
<ScrollView Scrolled="ScrollView_Scrolled">
<StackLayout Padding="10">
<Label
FontSize="20"
HorizontalOptions="Center"
Text="First Popup Page"
TextColor="Black" />
<Label Text="Hello Xamarin Guys" TextColor="Red" />
<Label Text="This is Very Awesome Popup Plugins For Xamarin forms" TextColor="LightBlue" />
<Button Text="Close" TextColor="Black" />
<Image Source="a11.jpg" />
</StackLayout>
</ScrollView>
</Frame>
</StackLayout></pages:PopupPage>
private async void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
{
ScrollView scrollView = sender as ScrollView;
double scrollingSpace = scrollView.ContentSize.Height - scrollView.Height;
if (scrollingSpace <= e.ScrollY) // Touched bottom
// Do the things you want to do
await PopupNavigation.Instance.PopAsync();
}
We want to implement drag and drop functionality in Xamarin forms
and in this user should be able to drag an emoji from 1 place, and put on another. We don’t want the source emoji to go away though and should be able to come to know on which employee, rating is given .
Image how it is before
Image how it is after
Question also posted on:
https://forums.xamarin.com/discussion/184104/drag-and-drop-on-xamarin-forms/p1?new=1
We have checked a few links like below, but none of them seem to work:
Xamarin Forms Drag Image between Views
https://blog.francois.raminosona.com/drag-and-drop-in-xamarin-forms/
Will appreciate if could get some tips on how to do it and even if this was possible on forms?
You could check the code below.
xaml:
<StackLayout Margin="10">
<StackLayout Margin="10" Orientation="Horizontal">
<components:DragAndDropSample3ReceivingView
BackgroundColor="Beige"
HeightRequest="80"
WidthRequest="80" />
<components:DragAndDropSample3ReceivingView
BackgroundColor="Beige"
HeightRequest="80"
WidthRequest="80" />
<components:DragAndDropSample3ReceivingView
BackgroundColor="Beige"
HeightRequest="80"
WidthRequest="80" />
</StackLayout>
<BoxView
BackgroundColor="Blue"
HeightRequest="5"
WidthRequest="3" />
<StackLayout Margin="10" Orientation="Horizontal">
<components:DragAndDropSample3MovingView
BackgroundColor="Red"
CornerRadius="40"
HeightRequest="40"
WidthRequest="40" />
<components:DragAndDropSample3MovingView
BackgroundColor="Green"
CornerRadius="40"
HeightRequest="40"
WidthRequest="40" />
</StackLayout>
</StackLayout>
Code Behind:
public void OnDropReceived(IDragAndDropMovingView view)
{
if (view is DragAndDropSample3MovingView sender)
{
var control = new DragAndDropSample3MovingView()
{
BackgroundColor=sender.BackgroundColor,
CornerRadius=sender.CornerRadius,
WidthRequest=sender.WidthRequest,
HeightRequest=sender.HeightRequest,
};
Content = control;
}
}
Screenshot:
You could check the source file from the code project for reference.
https://github.com/WendyZang/Test/tree/master/Drag_Drop_Controls/Xamarin-Developer-Sample-master
I have a database that I have created using SQLite. I'm using Xamarin.Forms. I would like to display a carousel of images using CarouselView.FormsPlugin and although I have looked at documentation I have had no luck in displaying it on my app.
I have the CarouselViewRenderer.Init() in the Android MainActivity.cs file. However, no images are displayed.
XAML:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:forms="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions"
x:Class="HostelRentalApp.HostelDetailsPage">
<ContentPage.Content>
<StackLayout>
<forms:CarouselViewControl x:Name="CRSLImages" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<forms:CarouselViewControl.ItemTemplate HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<DataTemplate>
<Image Source="{Binding .}"/>
</DataTemplate>
</forms:CarouselViewControl.ItemTemplate>
</forms:CarouselViewControl>
</StackLayout>
</ContentPage.Content>
</ContentPage>
CS:
public HostelDetailsPage (HostelInfo hostel)
{
var images = App.Database.GetHostelImageList(0);
this.CRSLImages.ItemsSource = images;
}
SQLite Query:
public List<HostelImages> GetHostelImageList(int id)
{
return database.Query<HostelImages>("SELECT Image FROM HostelImages WHERE Hostel_id = ?", id);
}
The Query is returning the correct rows. As shown, when using a tracepoint, the image filenames are retrieved. However, the images are not shown on the UI. What am I doing wrong? Thank you.
ItemsSource is a List<HostelImages> so your binding path should be
<Image Source="{Binding Image}"/>
Redirecting to App.g.i.cs when loading a page in xamarin UWP. Code control comes to the following if block.
#if DEBUG && !DISABLE_XAML_GENERATED_BREAK_ON_UNHANDLED_EXCEPTION
UnhandledException += (sender, e) =>
{
if (global::System.Diagnostics.Debugger.IsAttached) global::System.Diagnostics.Debugger.Break();
};
#endif
If I mouse over the e showing {Windows.UI.Xaml.UnhandledExceptionEventArgs}
I am not understanding what is the problem? Is this related to some error in XAML? This issue is only on the windows app, Android and IOS apps parts are working fine.
XAML 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"
x:Class="Myproject.Pages.CodeValidationPage"
BackgroundColor="#00aff0">
<ScrollView>
<StackLayout
VerticalOptions="FillAndExpand">
<StackLayout
VerticalOptions="CenterAndExpand"
Orientation="Vertical">
<Image
Source="splash.png"
HeightRequest="120"
WidthRequest="120"
IsVisible="True"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"/>
<Label
Text=" Please check your email for the verification code and activate your account. "
HorizontalOptions="CenterAndExpand"
x:Name="italic_test"
HorizontalTextAlignment="Center"
Margin="3"
Font="Italic,15"
TextColor="White"/>
<Frame
HorizontalOptions="FillAndExpand"
CornerRadius="10"
Margin="20"
Padding="0">
<StackLayout
BackgroundColor="White"
Orientation="Vertical"
VerticalOptions="CenterAndExpand" >
<Entry
x:Name="codeentry"
Margin="10,10,10,0"
Keyboard="Numeric"
Placeholder="Enter Verification Code"/>
<Entry
x:Name="passwordentry"
Placeholder="Password"
IsVisible="False"
Margin="10,10,10,0"
IsPassword="True"/>
<Entry
x:Name="confirmpasswordentry"
Margin="10,0,10,-10"
IsVisible="False"
Placeholder="Confirm Password"
IsPassword="True"/>
<Button
Text="Verify Code"
HeightRequest="40"
WidthRequest="150"
x:Name="validationButton"
TextColor="White"
HorizontalOptions="CenterAndExpand"
Font="Bold,15"
Margin="5,15,5,10"
BorderRadius="20"
BackgroundColor="#00aff0"
Clicked="SaveNewPassword"/>
</StackLayout>
</Frame>
</StackLayout>
<Label
VerticalOptions="EndAndExpand"
HorizontalOptions="CenterAndExpand"
Margin="0,0,0,15"
x:Name="backto_label"
TextColor="White"
Font="Bold,16"
Text=" Back to Sign Up "/>
</StackLayout>
</ScrollView>
</ContentPage>
With Xamarin.forms 3.x Microsoft moved to .net standard 2.0.
I was able to compile the code and run the app after converting your PCL to .net standard 2.0, updating all nuget packages to last version and changing xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions" to xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin" as stated in the documentation in your XAML files.
Clicking on ResetPassword shows a System.Collections.Generic.KeyNotFoundException at this line:
string initialLogin = Application.Current.Properties["initialLogin"].ToString();
So change it to
Application.Current.Properties.TryGetValue("initialLogin", out var initialLogin);
to handle the case that "initialLogin" was not added to the Application.Current.Properties collection. Next check the value for being != null before use it.
Also in Mainpage.xaml.cs you do the same mistake with username and password.
Also change PDB type from full to pdb-only to allow debugging. This is a known issue.
So reset works:
The real problem is with the disaplayalert.
I am using the following code for display alert:
await DisplayAlert("Alert", "A verification code has been sent to your email.", "OK");
If I changed the above lines like below, no issue will come.
Device.BeginInvokeOnMainThread(async () =>
{
await DisplayAlert("Alert", "A verification code has been sent to your email.", "OK");
});
Im trying to show an Overlay with an activityIndicator by clicking an custom sync button in the toolbar. The Button makes an API call to get datas from my backend.
Im using Xamarin forms with the Prism Plugin
This is my MasterDetailPage Xaml
<MasterDetailPage.ToolbarItems >
<ToolbarItem Command="{Binding SyncCommand}" Icon="sync32.png">
</ToolbarItem>
</MasterDetailPage.ToolbarItems>
<MasterDetailPage.Master >
<ContentPage Title="Default"
BackgroundColor="Gray">
<StackLayout Padding="0,60,0,0">
<ListView x:Name="Menu"
VerticalOptions="FillAndExpand"
HorizontalOptions="Fill"
ItemsSource="{Binding Items}"
SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout MinimumHeightRequest="48"
Orientation="Horizontal"
Spacing="40">
<Label Text="{Binding TitleKey}"
TextColor="White"
FontSize="20"
VerticalOptions="Center"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Behaviors>
<behaviors:ListViewItemSelectedBehavior Command="{Binding ChangePageCommand }"/>
</ListView.Behaviors>
</ListView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage>
<AbsoluteLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<ActivityIndicator
Color="#69d2e7"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=0.33}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=0.33}"
IsVisible="{Binding IsBusy}"
IsRunning="{Binding IsBusy}"
/>
</AbsoluteLayout>
</ContentPage>
</MasterDetailPage.Detail>
This is my MasterDetail xaml cs
public SMasterDetail()
{
InitializeComponent();
Menu.ItemSelected += async (s, e) =>
{
Menu.SelectedItem = null;
IsPresented = false;
await Task.Delay(200);
};
}
When im clicking on The Sync button in the toolbar the ViewModel gets the datas from the backend and populate an ObservableCollection. Im setting IsBusy to true and after that to false.
But I cant see the overlay. Is their any solution how to show the activityIndicator overlay on each page by clicking the sync button?