I'm trying to make a popup page in Xamarin Forms 3.0.0.530893. I use the Rg.Plugins.Popup v.1.1.4.158-pre and test it on Android 8.0.0. But the popup is displayed in the left top corner, no matter what I put in the Horizontal and Vertical options.
Here is my Popup Page
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ScanApp.Page.Popup.SignOutPopup"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup">
<StackLayout BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="Log ud" TextColor="Black"></Label>
<Label Text="AutomationProperties du sikker på du ønsker at logge ud?"></Label>
<Button Text="LOG UD"></Button>
<Button Text="ANNULLER"></Button>
</StackLayout>
</pages:PopupPage>
And here is backend
using Rg.Plugins.Popup.Pages;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace ScanApp.Page.Popup
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class SignOutPopup : PopupPage
{
public SignOutPopup ()
{
InitializeComponent ();
}
}
Here I initialize the plugin for Android in MainActivity OnCreate
Rg.Plugins.Popup.Popup.Init(this,bundle);
Here I push the page
Navigation.PushPopupAsync(new SignOutPopup());
I'm not sure on how works this plugin exactly , but I already used it in a past project and here what I did:
I suggest you to define your page like this. Embed your stacklayout into a 'fullscreen' Frame, and set some margin and paddig to your frame:
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ScanApp.Page.Popup.SignOutPopup"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
>
<Frame HorizontalOptions="Center" VerticalOptions="Center"
BackgroundColor="White" Margin="20" Padding="20">
<StackLayout>
<Label Text="Log ud" TextColor="Black"></Label>
<Label Text="AutomationProperties du sikker på du ønsker at logge ud?"></Label>
<Button Text="LOG UD"></Button>
<Button Text="ANNULLER"></Button>
</StackLayout>
</Frame>
</pages:PopupPage>
Xamarin Forms Frame class has specific properties like 'CornerRadius' or 'HasShadow' to give a real 'popup' appearance to your Frame... And your frame should be centered.
Tell me if it's working...
The problem was not with the plugin or popup page. The problem was these lines that I put in the android MainActivity, for the app to fill the whole screen
if (Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.Lollipop)
{
Window.AddFlags(WindowManagerFlags.LayoutNoLimits);
Window.AddFlags(WindowManagerFlags.LayoutInScreen);
Window.DecorView.SetFitsSystemWindows(true);
}
Related
I´ve started to learn xamarin forms and now I'm already starting to apply animation to my Image. But I've got an error in my code.
Here's my code in xaml.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace teste2
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Page1 : ContentPage
{
public Page1()
{
InitializeComponent();
}
protected override async void OnAppearing()
{
base.OnAppearing();
// The animation
car.FadeTo(0, 2000);
}
}
}
And here's my error:
Error CS0103 Name 'car' does not exist in current context teste2
And here's my xaml code:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="teste2.TabsPage" BarBackgroundColor="#508ca7"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom">
<TabbedPage.Children >
<ContentPage Title="Voiture" IconImageSource="lab_icon_voiture.png" BackgroundColor="#DCCECD">
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="Center">
<!-- The image that i want to animate-->
<Image Source="lab_voiture.png" x:Name="car"/>
</StackLayout>
</ContentPage>
<ContentPage Title="Avion" IconImageSource="lab_icon_avion.png" BackgroundColor="#f4f4f4">
<StackLayout Orientation="Vertical" HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
<Image Source="lab_avion.png" x:Name="plane"/>
</StackLayout>
</ContentPage>
</TabbedPage.Children>
</TabbedPage>
This is a common issue with Xamarin on VS, especially on MAC, what happens is that your debug file does not generate the XAML changes onto the xaml.g.cs file. Which is basically the file that is autogenerated where our compiler combines the xaml and xaml.cs file.
All you need to do for this to update correctly is to comment the following line of code:
car.FadeTo(0, 2000);
Once you do this go for a clean build or a rebuild. once your app builds successfully go back to this line of code again and uncomment it and this should start working
Goodluck !
I have been reading much about Xamarin for sometime and how to make a splash screen. I am quite new to something like this and hence i wanted to ask on here, Why is the splash screen not redirecting to the login page in the Emulator'
i am using Visual Studio 2019, I added a new folder drawable-hdpi and then added the images to it to be used inside the xaml. Now what? it does not redirect!
Here is what my code looks like
Splash screen Xaml (MainPage.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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="VisitorMan.MainPage"
BackgroundColor="#fff">
<StackLayout HorizontalOptions="Center" VerticalOptions="Center" Padding="10">
<Image Source="splash_logo.png" x:Name="imgLogo" HeightRequest="150" WidthRequest="150"/>
</StackLayout>
</ContentPage>
The corresponsing MainPage.xaml.cs File Looks like this
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace VisitorMan
{
// Learn more about making custom code visible in the Xamarin.Forms previewer
// by visiting https://aka.ms/xamarinforms-previewer
[DesignTimeVisible(false)]
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
Animate();
}
public async Task Animate()
{
imgLogo.Opacity = 0;
await imgLogo.FadeTo(1, 4000);
Application.Current.MainPage = new LoginPage();
}
}
}
The Login Page which shows the username and password (LoginPage.xaml) Looks like this
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="VisitorMan.LoginPage"
BackgroundColor="#fff">
<ContentPage.Content>
<StackLayout Spacing="20" Padding="50" VerticalOptions="Center">
<Image Source="splash_logo.png" x:Name="imgLogo" HeightRequest="150" WidthRequest="150"/>
<Entry Placeholder="Username"></Entry>
<Entry Placeholder="Password" IsPassword="True"></Entry>
<Button Text="Log In" TextColor="White" BackgroundColor="#ff77D065"></Button>
</StackLayout>
</ContentPage.Content>
</ContentPage>
The splashscreen is just standstill and does not redirect to the Login Page. Could there be something i am missing?
I have tried shared sample , the problem is that you need to update nuget packages (especially version of Xamarin.Forms) of project to the latest version.
Right click Solution of project , choose Manage Nuget Packages For Solution...
After Updated :
The effect :
I didn't check but you can try this
public async Task Animate()
{
imgLogo.Opacity = 0;
await imgLogo.FadeTo(1, 4000);
Device.BeginInvokeOnMainThread(() =>
{
Application.Current.MainPage = new LoginPage();
});
}
I have a little problem in this project. This is my tabbed page declaration:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:JacksCurrencyConverter;assembly=JacksCurrencyConverter"
x:Class="JacksCurrencyConverter.StartPage"
x:Name="Children"
HeightRequest="10"
WidthRequest="10">
<TabbedPage.Children>
<local:MainPage Icon="currency.png" Title="Exchange"/>
<local:FavouritesPage Icon="favourites2.png" Title="Favourites"/>
<local:MainPage Icon="statistics2.png" Title="Info"/>
</TabbedPage.Children>
</TabbedPage>
Then this is how it looks in iOS and Android:
iOS:
Android:
How could I reduce the empty blue space shown in the tabbpage on Android?
Blue space to reduce:
Sorry, I need at least 10 reputation to post images.
The reason you are getting this space is because you have a navigation page wrapped on your normal content page
Doing something like this will remove your space:
Mainpage= new StartPage();
Add horizontal and vertical option and this should fix the top empty space.
<TabbedPage>
<ContentPage Title="Exchange"
HorizontalOptions="StartAndExpand"
VerticalOptions="Center" Padding="0">
<local:MainPage Icon="currency.png" Title="Exchange"/>
</ContentPage>
<ContentPage Title="Favourites"
HorizontalOptions="StartAndExpand"
VerticalOptions="Center" Padding="0">
<local:FavouritesPage Icon="favourites2.png" Title="Favourites"/>
</ContentPage>
<ContentPage Title="Info"
HorizontalOptions="StartAndExpand"
VerticalOptions="Center" Padding="0">
<local:MainPage Icon="statistics2.png" Title="Info"/>
</ContentPage>
</TabbedPage>
You can add NavigationPage.HasNavigationBar="False" to the TabbedPage tag in your XAML.
Then your code should look like this:
<TabbedPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:JacksCurrencyConverter;assembly=JacksCurrencyConverter"
x:Class="JacksCurrencyConverter.StartPage"
x:Name="Children"
HeightRequest="10" WidthRequest="10"
NavigationPage.HasNavigationBar="False">
...
Another way would be calling NavigationPage.SetHasNavigationBar(this, false); in the constructor or OnAppearing function of your Page.
In Xamarin.Forms, I have an ActivityIndicator and a label that pops up when a video is loading and I wish to correctly disable it when the video is fully loaded.
I have a binding in my code "this.IsBusy" that correctly enables/disables the ActivityIndicator.
I notice in my debug, I receive this message when the video starts:
05-05 14:17:09.843 V/MediaPlayer-JNI(19723): isPlaying: 1
QUESTION: How can I use this isPlaying state to turn my "this.IsBusy" to become false? Is it possible? Or do I need a custom renderer to make this all happen.
Below is my XAML:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:PreAppStructure"
xmlns:roxv="clr-namespace:Rox;assembly=Rox.Xamarin.Video.Portable"
x:Class="PreAppStructure.Page3"
Title="Welcome to page 3">
<ContentPage.Content>
<Grid>
<roxv:VideoView x:Name="VideoView" AutoPlay="True" LoopPlay="True" ShowController="True" Source="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" />
<StackLayout BackgroundColor="Black" HorizontalOptions="Center" VerticalOptions="Center" IsVisible="True">
<ActivityIndicator Color="White"
x:Name="loader"
IsRunning="{Binding IsBusy}"
VerticalOptions="Center" HorizontalOptions="Center" />
<Label x:Name ="loadingtext" Text="Loading...Please wait!" HorizontalOptions="Center" TextColor="White" IsVisible="{Binding IsBusy}"/>
</StackLayout>
</Grid>
</ContentPage.Content>
</ContentPage>
Below is my C# class:
...
using Rox;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace PreAppStructure
{
public partial class Page3 : ContentPage
{
public Page3()
{
InitializeComponent();
this.BindingContext = this;
this.IsBusy = true; // Activity Indicator is now successfully visible!
// When the app reaches the "isPlaying" state, I wish the Activity Indicator to not be visible (false)
} //On this line, the page loads, video buffers and then the video plays
}
}
I know there are already some questions about this situation but I've not found a solution even following literally some youtube videos.
My situation is the followed:
I've started a new Xamarin form application that supports Android and iOS (I don't know why only these ones and not even Windows10 and Windows Phone)
I've tried to put an Image inside the MainPage with a specific local or remote image but nothing seems to be shown
MainPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:liveband"
x:Class="liveband.MainPage">
<StackLayout>
<Image
WidthRequest="200"
HeightRequest="150"
x:Name="MyImage"/>
<Label Text="Welcome to Xamarin Forms!"
HorizontalOptions="Center"
VerticalOptions="Center"/>
<Slider />
</StackLayout>
</ContentPage>
MainPage.xaml.cs
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace liveband
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
MyImage.Source = new UriImageSource()
{
Uri = new Uri("http://www.satsignal.eu/wxsat/Meteosat7-full-scan.jpg")
};
}
}
}