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"
Related
In Xamarin Forms, having a XAML code: (an example below) is it possible to move the style of the Label and the Image to appplication level style and make it default for all Expander headers (or other containers)?
<xct:Expander>
<xct:Expander.Header>
<StackLayout>
<Label
Margin="20,10,0,10"
FontAttributes="Bold"
HorizontalOptions="StartAndExpand"
Text="ABCD"
TextTransform="Uppercase"
VerticalOptions="Center" />
<Image
Margin="0,0,20,0"
HorizontalOptions="End"
VerticalOptions="Center">
<Image.Source>
<FontImageSource
FontFamily="{StaticResource Font_FASolid}"
Glyph="{x:Static fonts:FASolid.ChevronDown}"
Size="{StaticResource MediumFontSize}" />
</Image.Source>
</Image>
</StackLayout>
</xct:Expander.Header>
</xct:Expander>
What I would like to have in my xaml finally is just:
<xct:Expander>
<xct:Expander.Header>
<StackLayout>
<Label Text="ABCD"/>
<Image>
<Image.Source>
<FontImageSource/>
</Image.Source>
</Image>
</StackLayout>
</xct:Expander.Header></xct:Expander>
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 set my image as a background for my app using BackgroundImage = "background.jpg", but I can't seem to scale it in any way in order to fit the whole image into the app, also, it doesn't show up at all on android. Here is the code and background image:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage Padding="0, 40, 0, 0"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="RoseySports.Login_Page"
BackgroundImage="Background.jpg">
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="Email" HorizontalOptions="Center"/>
<Entry Keyboard="Email" WidthRequest="300" x:Name="email"/>
<Label Text="Password" HorizontalOptions="Center"/>
<Entry IsPassword="true" WidthRequest="300" x:Name="password"/>
<Button Text="Login" x:Name="login" Clicked="Handle_Clicked" TextColor="Navy"/>
</StackLayout>
</ContentPage>
background.jpg ios adroid
Got it working by using this instead:
<?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="RoseySports.Login_Page">
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
Source="background.jpg" Aspect="AspectFill"/>
<ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1">
<StackLayout Padding="0, 40, 0, 0" HorizontalOptions="Center" VerticalOptions="Center" Grid.Column="0" Grid.Row="0">
<Label Text="Email" HorizontalOptions="Center" TextColor="White"/>
<Entry Keyboard="Email" WidthRequest="300" x:Name="email"/>
<Label Text="Password" HorizontalOptions="Center" TextColor="White"/>
<Entry IsPassword="true" WidthRequest="300" x:Name="password"/>
<Button Text="Login" x:Name="login" Clicked="Handle_Clicked" TextColor="Navy"/>
</StackLayout>
</ScrollView>
</AbsoluteLayout>
</ContentPage>
1.To use BackgroundImage property BackgroundImage="Background.jpg" in IOS you need to add the required image to an IOS asset catalog. Xamarin.Forms WILL NOT load an image into the BackgroundImage property when it is located in the Resources folder as for versions of IOS pre 7.
Read more for IOS asset catalog here.
2.You can also achieve this using Grid.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<Grid>
<Image Aspect="AspectFill" x:Name="BGImageLogin" Source="Background.jpg" />
<ScrollView>
<StackLayout >
<Entry Placeholder="Username"/>
<Entry Placeholder="Password"
IsPassword="True"/>
<Button Text="Login""/>
</StackLayout>
</ScrollView>
</Grid>
</ContentPage>
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/
Currently, I am developing a Xamarin.Forms PCL application for Android and iOS. In one of my pages I define a ListView. The template for the ListView.ItemTemplate displays an icon using <Image Source="some_Icon.png" />. The icon displays as expected (black) but I have not found a way to set the color.
I would like to colorize this icon based on logic in my ViewModel.
I have searched for answers both through the Documentation and StackOverlflow to no avail.
Is there a better way to display and style icons from a Xamarin.Forms PCL project?
Does Xamarin.Forms require a set of resource/image files for every possible color I might use?
I solved my problem with Iconize for Xamarin.Forms. I implemented my solution based off the Iconize sample code 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"
xmlns:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize"
x:Class="Iconize.FormsSample.Page1"
Title="{Binding FontFamily}">
<ContentPage.ToolbarItems>
<iconize:IconToolbarItem Command="{Binding ModalTestCommand}" Icon="fa-500px" />
<iconize:IconToolbarItem Command="{Binding VisibleTestCommand}" Icon="fa-500px" IconColor="Red" />
<iconize:IconToolbarItem Command="{Binding VisibleTestCommand}" Icon="fa-500px" IsVisible="{Binding VisibleTest}" />
</ContentPage.ToolbarItems>
<ListView CachingStrategy="RecycleElement" ItemsSource="{Binding Characters}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<iconize:IconImage HeightRequest="20" Icon="{Binding Key}" IconColor="Blue" WidthRequest="20" />
<iconize:IconImage HeightRequest="20" Icon="{Binding Key}" BackgroundColor="Blue" IconColor="Yellow" WidthRequest="20" IconSize="10" />
<iconize:IconButton FontSize="20" Text="{Binding Key}" TextColor="Red" WidthRequest="48" />
<iconize:IconLabel FontSize="20" Text="{Binding Key}" TextColor="Green" VerticalTextAlignment="Center" />
<Label Text="{Binding Key}" VerticalTextAlignment="Center" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
In my case, I simply had to replace my original <Image .../> element and replace it with
<iconize:IconImage HeightRequest="20" Icon="fa-circle" IconColor="{Binding CircleColor}" WidthRequest="20" />.
In my ViewModel, I added the CircleColor property to set the icon color as needed based on my logic.