how to create custom popup window in Xamarin.Form - c#

In Xamarin.Forms I need to create a popup window that shows login page in popup window.
here is my code using xlab popup control.
MainPage l = new MainPage();
Navigation.PushModalAsync(l);
PopupLayout popupLayout = new PopupLayout();
popupLayout.Content = l.Content;
ShowPopup(l);
MainPage extends ContentPage and currently its working fine for login screen, but my requirement is to show it as a popup. Can anyone please help on this? Or is there any other way to do this ?

Here is how you do it
private async void ShowPopup()
{
//Create `ContentPage` with padding and transparent background
ContentPage loginPage = new ContentPage
{
BackgroundColor = Color.FromHex("#D9000000"),
Padding = new Thickness(20, 20, 20, 20)
};
// Create Children
//Create desired layout to be a content of your popup page.
var contentLayout = new StackLayout
{
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Orientation = StackOrientation.Vertical,
Children =
{
// Add children
}
};
//set popup page content:
loginPage.Content = contentLayout;
//Show Popup
await Navigation.PushModalAsync(loginPage, false);
}

#misho thanks for your help
here is my final working code. But it can't be called popup window. This can just fulfill my purpose.
private async void ShowPopup()
{
ContentPage detailsPage = new ContentPage
{
BackgroundColor = Color.Transparent,// Color.FromHex("#00F0F8FF"),
Padding = new Thickness(40, 40, 40, 40)
};
MainPage l = new MainPage();
detailsPage.Content = l.Content;
Button b = l.FindByName<Button>("btnClose");
b.Clicked += ((o2, e2) =>
{
this.Navigation.PopModalAsync();
});
await Navigation.PushModalAsync(detailsPage, false);
}
Hi #Misho here is actual screen shot op popup screen.

Related

How to make same center for main window and its navigated pages in wpf navigation

We are working on WPF application which has MainWindow. From main window we are calling NavigationWindow.
NavigationWindow nav = new NavigationWindow();
nav.Content = new Page1();
After this we are navigating to page2 from page1 using
NavigationService.NavigationService navigationService = NavigationService.GetNavigationService(this);
navigationService.Navigate(new Page2());
Our issue is page alignment. We want same center for Mainwindow and Page2.
We already tried using WindowStartupLocation as CenterScreen/CenterOwner/Manual.
We also tried Top and left margin.
We need a generic solution not system specific.
NavigationWindow nav = new NavigationWindow();
nav.Content = new Page1();
nav.WindowStartupLocation = WindowStartupLocation.Manual;
var screenW =
System.Windows.SystemParameters.PrimaryScreenWidth;
var windowW = nav.Width;
var xAxis = 0;
if ((screenW - windowW)>0)
{
xAxis = Convert.ToInt32((screenW - windowW) / 2);
}
nav.Left = xAxis; //Left position to set window at centre else to the left
nav.Top = (System.Windows.SystemParameters.PrimaryScreenHeight /8);
//Fixed top positio
nav.ShowDialog();

Add listview and stacklayout to a frame in code behind (not xaml)

I have this line of code to add the listview in the frame:
frame.Content = containerListView;
However, I also have a button inside a stacklayout that I also want to be included in the frame.
I tried this but no luck:
frame.Content = containerListView && buttonStackLayout;
frame.Content = containerListView , buttonStackLayout;
This is not the same scenario as the other stack post because the other post adds 2 stacklayouts to a viewcell. I need to add a listview and stacklayout to a frames content.
Firstly, you need to create your StackLayout and Button then add add them as the content of your
//StackLayout
StackLayout buttonStack = new StackLayout()
{
Padding = new Thickness(0, 10),
HorizontalOptions = LayoutOptions.FillAndExpand,
BackgroundColor = "Gray" ,
};
//Button
Button btn = new Button() { Text = "Button", HorizontalOptions = LayoutOptions.Center};
btn.Clicked += btn_Clicked; //don't forget to create the btn_Clicked event/method
buttonStack.Children.Add(btn);
Edit
private ListView GetListView(int index)
{
ListView listView = new ListView();
listView.ItemsSource = //your list Source
Frame frame = new Frame();
frame.Margin = new Thickness(3);
frame.Content = listView;
return listView;
}

How to visible indicator on busy

Am trying to do the front end XAML code in C#. When I try to bind the activity indicator with IsBusy Am not able to achieve it.
I want the activity indicator to pop up when the page is busy.
This post is to Show How can we achieve a basic screen with scrollview and a indicator in backend C# code.
the Layout assigned to the scroll Content is any basic layout which we design as per the requirement.
Here is my code sample:
#region render
scroll = new ScrollView
{
Content = layout
};
AbsoluteLayout.SetLayoutBounds(scroll, new Rectangle(0, 0, 1, 1));
AbsoluteLayout.SetLayoutFlags(scroll, AbsoluteLayoutFlags.All);
AbsoluteLayout screenMask = new AbsoluteLayout { BackgroundColor = Color.FromHex("#22000000") };
screenMask.BindingContext = this;
screenMask.SetBinding(IsVisibleProperty, "IsBusy", BindingMode.OneWay);
AbsoluteLayout.SetLayoutBounds(screenMask, new Rectangle(0.5, 0.5, 1, 1));
AbsoluteLayout.SetLayoutFlags(screenMask, AbsoluteLayoutFlags.All);
ActivityIndicator indicator = new ActivityIndicator { Color = Color.Black };
indicator.BindingContext = this;
indicator.SetBinding(IsVisibleProperty, "IsBusy",BindingMode.OneWay);
indicator.SetBinding(ActivityIndicator.IsRunningProperty, "IsBusy");
AbsoluteLayout.SetLayoutBounds(indicator, new Rectangle(0.5, 0.5, 0.1, 0.1));
AbsoluteLayout.SetLayoutFlags(indicator, AbsoluteLayoutFlags.All);
Content = new AbsoluteLayout
{
Children = { scroll, screenMask, indicator }
};
#endregion
Hope this helps many people.

C# Xamarin Label Padding for iOS app

I know this question has been asked a lot but I've tried the various solutions and can't seem to find one that works. I have a label on my storyboard titled Messages. On button click, different text appears in the label. I need to pad just this label.
I've looked at:
Adding space/padding to a UILabel,
UILabel text margin,
and Resizing a UILabel to accommodate insets.
Also not sure where in my ViewController.cs to put the code. I put it under public partial class ViewController : UIViewController but get errors.
Edit 2:
Okay, at first I did a UITextView but couldn't get vertical align to work so went back to label. This is what I have:
public partial class ViewController : UIViewController
{
public partial class PaddedUILabel : UILabel
{
private UIEdgeInsets EdgeInsets { get; set; }
public PaddedUILabel()
{
EdgeInsets = new UIEdgeInsets(0, 10, 0, 10);
}
public override void DrawText(CoreGraphics.CGRect rect)
{
base.DrawText(EdgeInsets.InsetRect(rect));
}
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
Message.Layer.BorderWidth = 1;
Message.BackgroundColor = UIColor.FromWhiteAlpha(1, 0.88f);
PaddedUILabel _paddedUILabel = Message as PaddedUILabel;
I'm still not getting any padding.
You can either use a UITextView and provide the insets directly (as mentioned in this link) which you can do either in ViewDidLoad or ViewWillAppear, or you can subclass your UILabel and override the DrawText method.
The DrawText method helps manipulate the rectangle in which the text within a label is drawn. I'd suggest you pay around with some values to get started with it.
Something like:
public partial class PaddedUILabel : UILabel
{
//Override draw text here
}
If you are using Xamarin iOS Native, give your label(for example: myLabel) the custom class from story board and retrieve the label as:
PaddedUILabel _paddedUILabel = this.myLabel as PaddedUILabel;
I'm sorry I would have given you the whole code but as of now, don't have access to a Mac environment. Let me know if you need anything else.
For vertical align in TextView follow link.
Cheers
i tried many solutions as discussed here but the actual out coming not what i wanted so i made it like that :
if (this.Padding != default(Thickness))
{
Device.BeginInvokeOnMainThread(() =>
{
if (Parent is Grid)
{
var parentAsGrid = Parent as Grid;
var index = parentAsGrid.Children.IndexOf(this);
parentAsGrid.Children.Remove(this);
Grid marginGrid = new Grid() { BackgroundColor = this.BackgroundColor, HorizontalOptions = this.HorizontalOptions, VerticalOptions = this.VerticalOptions };
var lbl = new Label() { Text = this.Text, TextColor = this.TextColor, BackgroundColor = this.BackgroundColor, HorizontalOptions = this.HorizontalOptions, VerticalOptions = this.VerticalOptions, FontSize = this.FontSize };
lbl.Margin = this.Padding;
if (!parentAsGrid.Children.Contains(this))
{
marginGrid.Children.Add(lbl);
parentAsGrid.Children.Insert(index, marginGrid);
}
}
if (Parent is StackLayout)
{
var parentAsGrid = Parent as StackLayout;
var index = parentAsGrid.Children.IndexOf(this);
parentAsGrid.Children.Remove(this);
Grid marginGrid = new Grid() { BackgroundColor = this.BackgroundColor, HorizontalOptions = this.HorizontalOptions, VerticalOptions = this.VerticalOptions };
var lbl = new Label() { Text = this.Text, TextColor = this.TextColor, BackgroundColor = this.BackgroundColor, HorizontalOptions = this.HorizontalOptions, VerticalOptions = this.VerticalOptions, FontSize = this.FontSize };
lbl.Margin = this.Padding;
if (!parentAsGrid.Children.Contains(this))
{
marginGrid.Children.Add(lbl);
parentAsGrid.Children.Insert(index, marginGrid);
}
}
});

Xamarin Forms Tap gesture recognizer Ios doesn't work

I have a problem about some Gesture Recognizer into my Xamarin Forms project.
I was working to set three Image into a grid layer to see a viewfinder with Zxing Forms library to go into specific page and manage the flash camera device.
After I compiled and build my project, into Android device works perfectly, besided Ios that when I touch an image of them they didn't work not at all. I don't make any mistake to write the code.
Tap recognizer for example are wrote like these:
var settingsGestureRecognizer = new TapGestureRecognizer();
settingsGestureRecognizer.NumberOfTapsRequired = 1;
settingsGestureRecognizer.Tapped += async(s, e) =>
{
// handle the tap
NavigationPage nav = new NavigationPage(new SettingsPage());
await Navigation.PushModalAsync(nav);
};
And also, I add it into a button of a StackLayout like these
settingsImage = new Image
{
Source = ImageSource.FromFile(ConstantStringCollector.iconSettings),
Aspect = Aspect.AspectFit,
WidthRequest = 45,
HeightRequest = 45,
MinimumHeightRequest = 45,
MinimumWidthRequest = 45,
IsEnabled = true
};
settingsImage.GestureRecognizers.Add(settingsGestureRecognizer);
And then there is my personal layout
StackLayout stackLayoutBottom = new StackLayout
{
IsEnabled = true,
IsVisible = true,
IsClippedToBounds = true,
Padding = new Thickness(20, 20),
BackgroundColor = Color.Black,
Opacity = 0.8,
VerticalOptions = LayoutOptions.FillAndExpand,
Orientation = StackOrientation.Horizontal,
Children = {
infoImage,
flashImage,
settingsImage
}
};
Someone could help me?
if what you're trying to tap is visible, then I'd look at whether it is getting input, one option is to turn on InputTransparent for all the items except for the image and see if that lets your image recieve you input.
see: InputTransparent
Can you Try this
NavigationPage nav = new NavigationPage(new SettingsPage());
var settingsGestureRecognizer = new TapGestureRecognizer();
settingsGestureRecognizer.NumberOfTapsRequired = 1;
settingsGestureRecognizer.Tapped += async(s, e) =>
{
await Navigation.PushModalAsync(nav);
};

Categories

Resources