I've created a Xamarin Forms project. I have the following XAML in my project:
<CarouselPage>
<ContentPage>
<StackLayout>
<Label Text="Red" />
<BoxView Color="Red" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout>
<Label Text="Green" />
<BoxView Color="Green" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout>
<Label Text="Blue" />
<BoxView Color="Blue" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
</CarouselPage>
Now the Carousel page works on the following platforms:
UWP - localMachine
Windows 8.1 - localMachine
Android - emulator
It does not work for the following platforms:
UWP - device (mobile)
WinPhone (WinPhone 8.1) - device (mobile)
It does not recognize the swipe gesture on the phones. How do I resolve this?
Not sure what was causing this issue, but I created a new project and shifted all my existing code to that project which then fixed the carousel page. Now working!
Related
New to Xamarin and I'm trying to create a custom navigation bar in my Cross-Platform App. After some reading I found that I might be able to use the the title-view component in my xaml page file like below.
<?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="amici.MyGroups">
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
<Label HorizontalOptions="StartAndExpand" Text="Left"/>
<Label HorizontalOptions="CenterAndExpand" Text="Center"/>
<Label HorizontalOptions="EndAndExpand" Text="Right"/>
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
<ScrollView>
<Grid x:Name="grid1">
<StackLayout>
<Label Text="Welcome"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
<ActivityIndicator x:Name="WaitIcon" IsRunning="{Binding IsBusy}" VerticalOptions="Center" HorizontalOptions="Center" />
</Grid>
</ScrollView>
</ContentPage.Content>
</ContentPage>
I navigate to my page "MyGroups" like this : Navigation.PushAsync(new MyGroups());.
However, the only thing that shows is the default navigation page with the back icon arrow?
obliviously I missing something, or I don't understand something. Does this need to be done at the application level?
If you are using Shell in your Xamarin.Forms app than you will have to use <Shell.TitleView> instead of <NavigationPage.TitleView>. Below code worked for me...
<Shell.TitleView>
<Label Text="QR Code" HorizontalTextAlignment="End" Margin="0,0,10,0" Padding="0" VerticalTextAlignment="Center" TextColor="White" FontSize="20"/>
</Shell.TitleView>
As XAML states:
<NavigationPage.TitleView> .. </NavigationPage.TitleView>
You could set a totally custom View as a NavigationBar, however, this is possible only on NavigationPages. Your code is partly correct because you set the NavigationPage.TitleView not on a NavigationPage:
Navigation.PushAsync(new MyGroups())
If you will navigate to a NavigationPage:
Navigation.PushAsync(new NavigationPage(new MyGroups()))
You should see your custom NavigationPage.TitleView. The outcome, however, will depend on your current navigation model and you may end up with multiple navigation bars. That is because you will nest a NavigationPage within another NavigationPage.
I would strongly recommend reading the official documentation on this topic so it would become clear for you.
You can also set Navigation with MainPage like
MainPage = new NavigationPage(new PageName());
I am trying to incorporate a background image into my App using Xaml. I have tried various different methods but none seem to working. My code at the minute is
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Cabiee;assembly=Cabiee"
BackgroundImage="CabieBackground.jpg"
x:Class="Cabiee.Login">
<ContentPage.Content>
<StackLayout VerticalOptions="CenterAndExpand" HeightRequest="500">
<Entry
x:Name="usernameEntry"
Placeholder="Email"/>
<Entry
x:Name="passwordEntry"
IsPassword="true"
Placeholder="*********"
Completed="PasswordEntry_Completed"/>
<StackLayout Orientation="Horizontal">
<Button
x:Name="BtnCustomer"
Text="Customer"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
FontSize="30"
Clicked="BtnCustomer_Clicked"/>
<Button
x:Name="BtnDriver"
Text="Driver"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
FontSize="30"
Clicked="BtnDriver_Clicked"/>
</StackLayout>
<RelativeLayout HorizontalOptions="CenterAndExpand" >
<Button
x:Name="BtnRegister"
WidthRequest="300"
Text="Register"
FontSize="30"
Clicked="BtnRegister_Clicked"
/>
</RelativeLayout>
</StackLayout>
</ContentPage.Content>
And this what my solution explorer looks like: https://gyazo.com/0af186bbca7e8456dfb1e7b1bafcb7ad
I have CabieBackground.jpg in my Resources folder so that is displays on android but when i run the code nothing appears on the screen, it just blank
The background image was made in photoshop, the dimensions are: 640px by 1136 px with a resolution of 600 pixels/inch
You need to put your image in drawable folder. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#local-images
As said in the comment, you should also ensure that the image has right properties as copy and paste make wrong properties.
I'm trying to setup a XAML form definition which shows a WebView but which has a Floating Action Button over the bottom right.
If I use an AbsoluteLayout, the FAB appears correctly over the WebView. However, due to the Height/WidthRequest of the Webview, it is displayed at full size - the text disappears off the right side and doesn't wrap, so the page doesn't scroll.
<ContentPage ...snip... Title="Document">
<StackLayout Padding="5,5,5,5" HorizontalOptions="FillAndExpand" Orientation="Vertical">
<WebView x:Name="webViewDocument" WidthRequest="1000" HeightRequest="1000" />
<Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}"
VerticalTextAlignment="Center" HorizontalTextAlignment="End" FontSize="Small" />
<customControls:ImageButton x:Name="fab"
Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
Command="{Binding AddCommand}"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.95,0.975,-1,-1"
Margin="10" />
</StackLayout>
</ContentPage>
If I use a StackLayout, the WebView sizes and scrolls correctly, however the FAB occupies a full width strip at the bottom of the screen and the text does not appear behind it - the WebView stops above it.
I've spent the last hour and a half trying every combination of nested Layout I can think of to solve this and just can't get it right - can some kind layout genius out there please tell me how I can solve this.
Thanks
Use a Grid and do not indicate rows or columns.
Something like this:
<Grid Padding="5,5,5,5"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<WebView x:Name="webViewDocument"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}"
VerticalOptions="End"
HorizontalOptions="Center"
HorizontalTextAlignment="End"
FontSize="Small" />
<customControls:ImageButton x:Name="fab"
Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
Command="{Binding AddCommand}"
VerticalOptions="End"
HorizontalOptions="End"
Margin="10" />
</Grid>
This should work for you.
I'm developing a Xamaring.Forms cross-platform app, and want to show Loading gif when user click a button to connect to the server. Everythink is working as expected except the gif image is not shown, even when I try with a different format of images I also don't see any images.
I have Installed all the required packages of ffimageloading and the gif image locate in project root ,drawable folder of android project and Resources folder of IOS project.
I gave the property of Embedded Resource to the image in Android project.
I'm using Android emulator to test the Android project.
I'm using Xamarin Live Player to test the IOS project
Hier is my code:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:ffSvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
xmlns:ffTransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
x:Class="MyApp.Login"
Title="Login"
NavigationPage.HasNavigationBar="False">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0"/>
</ContentPage.Padding>
<ContentPage.Content>
<AbsoluteLayout BackgroundColor="White">
<StackLayout VerticalOptions="StartAndExpand" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<Image Source="Logo.png" Aspect="AspectFit"/>
<StackLayout Padding="30, 10, 30, 0">
<Label x:Name="errormessage" TextColor="Red"/>
<Entry x:Name="EmailEntry" Placeholder="Email" Keyboard="Email" Margin="0, 10"/>
<Entry x:Name="PasswordEntry" IsPassword="true" Placeholder="Password" />
<Entry x:Name="CompanyEntry" Placeholder="Company" />
<Button x:Name="LoginBtn" Pressed="Pressed_Handler" Text="Login" Clicked="Login_Handler" BackgroundColor="Black" TextColor="White" FontAttributes="Bold" Margin="90, 30" />
</StackLayout>
</StackLayout>
<StackLayout x:Name="LoadingView" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="Black" Opacity="0.3">
</StackLayout>
<StackLayout x:Name="LoadingView2" AbsoluteLayout.LayoutBounds="0.5,0.5,200,200" AbsoluteLayout.LayoutFlags="PositionProportional" BackgroundColor="Black">
<Label Text="Loading..." TextColor="White" FontAttributes="Bold" FontSize="30" VerticalOptions="Center"/>
<!-- ------------- here is the gif image ----------------- -->
<ff:CachedImage x:Name="Gif" Source="resource://MyApp.LoadingGif.gif" />
</StackLayout>
</AbsoluteLayout>
</ContentPage.Content>
This is not how resource:// should be used. It is used to share the same file inside common dll. You're using it as a platform specific file, change:
Source="resource://MyApp.LoadingGif.gif" to Source="LoadingGif.gif"
I am working on a Xamarin Forms Project and stuck with an issue, where I want to open some popups. As Forms does not have in build Popups so, I have different XAML pages and I’m loading them inside my MainPage.xaml and changing the visibility when required.
Popup_1.xaml
<?xml version="1.0" encoding="utf-8" ?>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
x:Class="ABC.Views.Popup_1">
<StackLayout >
<Label Text="{Binding FirstName}" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
</StackLayout>
I have many layouts like Popup_1 which I want them to be shown as popup. Here’s my MainPage.xaml here contains 3 popup layouts.
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPagexmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
xmlns:controls="clr-namespace:ABC.Views;assembly=ABC"
x:Class="ABC.Views.MainPage">
<AbsoluteLayout BackgroundColor="Transparent" Padding="10" IsVisible="{Binding ShowPopup_1}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<StackLayout Orientation="Horizontal" BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" AbsoluteLayout.LayoutFlags="PositionProportional" >
<controls:Popup_1 />
</StackLayout>
</AbsoluteLayout>
<AbsoluteLayout BackgroundColor="Transparent" Padding="10" IsVisible="{Binding ShowPopup_2}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<StackLayout Orientation="Horizontal" BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" AbsoluteLayout.LayoutFlags="PositionProportional" >
<controls:Popup_2 />
</StackLayout>
</AbsoluteLayout>
<AbsoluteLayout BackgroundColor="Transparent" Padding="10" IsVisible="{Binding ShowPopup_3}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<StackLayout Orientation="Horizontal" BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" AbsoluteLayout.LayoutFlags="PositionProportional" >
<controls:Popup_3 />
</StackLayout>
</AbsoluteLayout>
</ContentPage>
The problem is when I am trying to navigate to Mainpage.xaml it taking a lot of time to navigate. Is there any standard solution for this issue? or How can I deal with this delay ?
Note: I’m using MVVM binding pattern to change the visibility of layouts.
You're right about to use ContentPage to customize your own popup dialog, but the normal way to show this custom dialog is not setting the visibility of the parent element of your dialog. We need to display it using PushModalAsync and dismiss it using PopModalAsync.
For code sample you can refer to PushModalAsync or PopModalAsync.
I'm not sure what blocks your UI to cause the delay of navigation since you didn't post any code behind of your dialog. Anyway, you can try to push and pop a modal page and see if this helps.
As Forms does not have in build Popups
Refer this page of documentation
https://developer.xamarin.com/guides/xamarin-forms/user-interface/navigation/pop-ups/