I am new to Xamarin.Forms in which I need loading message. How can I display the loading message?
Code:
<AbsoluteLayout>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
AbsoluteLayout.LayoutFlags="All" Padding="30" >
<Grid>
//something
</Grid>
</StackLayout>
<ContentView x:Name="overlay" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" IsVisible="False" BackgroundColor="#C0808080" Padding="10, 0">
<ActivityIndicator WidthRequest="110" HeightRequest="70" IsRunning="True" IsVisible="True" Color="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</ContentView>
</AbsoluteLayout>
Set IsVisible="True" for ContentView will show you the ActivityIndicator.
<ContentView x:Name="overlay" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" IsVisible="True" BackgroundColor="#C0808080" Padding="10, 0">
<ActivityIndicator WidthRequest="110" HeightRequest="70" IsRunning="True" IsVisible="True" Color="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</ContentView>
If you are using MVVM and want full modal Loading Messages look at ACR User Dialogs for Xamarin and Windows. You can install it via nuget. You can find the sample application here.
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 have this Xamarin XAML which have a background image with header text and 3 button overlay at the bottom. Second how do I remove the extra margin between the 3 buttons?
<AbsoluteLayout>
<Image Source="Flower.jfif" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" />
<AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,0,1,0.1" AbsoluteLayout.LayoutFlags="All" Margin="0,20">
<StackLayout BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<Label Text="Relax" TextColor="White" FontSize="30" HorizontalOptions="Center" />
</StackLayout>
</AbsoluteLayout>
<AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,1,1,0.1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#66000000">
<StackLayout Orientation="Horizontal" BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<Button Text="Profile" BackgroundColor="Transparent" TextColor="White" HorizontalOptions="FillAndExpand" />
<Button Text="Meditate" BackgroundColor="Transparent" TextColor="White" HorizontalOptions="FillAndExpand" />
<Button Text="Theme" BackgroundColor="Transparent" TextColor="White" HorizontalOptions="FillAndExpand" />
</StackLayout>
</AbsoluteLayout>
</AbsoluteLayout>
XAML Header text missing when phone preview orientation change to
horizontal
This is caused by the margin(Margin="0,20") you set :
<AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,0,1,0.1" AbsoluteLayout.LayoutFlags="All" Margin="0,20">
Solution:
Remove the margin and give a Y(here I use 0.05) to ViewControls like:
<AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,0.05,1,0.1" AbsoluteLayout.LayoutFlags="All" >
extra margin for absolute layout
There is a default space of stacklayout, the default value is 6.0.
Solution: you can add a spacing = -6 to remove it:
<StackLayout Orientation="Horizontal" BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Spacing="-6">
Here is the full code:
<AbsoluteLayout>
<Image Source="Flower.jfif" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" />
<AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,0.05,1,0.1" AbsoluteLayout.LayoutFlags="All" >
<StackLayout BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<Label Text="Relax" TextColor="White" FontSize="30" HorizontalOptions="Center" />
</StackLayout>
</AbsoluteLayout>
<AbsoluteLayout x:Name="ViewControlss" AbsoluteLayout.LayoutBounds="1,1,1,0.1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#66000000">
<StackLayout Orientation="Horizontal" BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Spacing="-6">
<Button Text="Profile" BackgroundColor="Yellow" TextColor="White" HorizontalOptions="FillAndExpand"/>
<Button Text="Meditate" BackgroundColor="Green" TextColor="White" HorizontalOptions="FillAndExpand"/>
<Button Text="Theme" BackgroundColor="Red" TextColor="White" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</AbsoluteLayout>
</AbsoluteLayout>
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 using Xamarin forms and am trying to create an overlaying loader for my screens. From my findings, I need to use an absolute layout, which I have done. I have accomplished for the loader to work on some screens however when the screen is a little more complex (using nested scrollviews, grids, etc.) it doesn't seem to work. Below is a sample of the code that DOES work:
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout Padding="10" Orientation="Vertical" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<StackLayout Padding="0,85,0,0">
<Image Source="myimage.png" HorizontalOptions="Center" VerticalOptions="Start" />
</StackLayout>
<StackLayout Orientation="Vertical" Padding="10, 5, 10, 5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label Text="This works perfect"></Label>
</StackLayout>
</StackLayout>
<!-- Loader -->
<ContentView BackgroundColor="#222222"
Opacity="0.3"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1"
IsVisible="{Binding IsIndicatorActive}">
<ActivityIndicator AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1"
VerticalOptions="{StaticResource LoaderPosition}"
HorizontalOptions="{StaticResource LoaderPosition}"
IsEnabled="{Binding IsIndicatorActive}"
IsRunning="{Binding IsIndicatorActive}"
IsVisible="{Binding IsIndicatorActive}" />
</ContentView>
</AbsoluteLayout>
The following code is what DOESN'T work:
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<ScrollView>
<StackLayout Padding="0,85,0,0">
<Image Source="myimage.png" HorizontalOptions="Center" VerticalOptions="Start" />
</StackLayout>
<StackLayout Orientation="Vertical" Padding="10, 5, 10, 5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label Text="This doesn't work"></Label>
</StackLayout>
</ScrollView>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand" ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand" Text="Button1" Command="{Binding Button2Command}" />
<Button Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" Text="Button2" Command="{Binding Button2Command}" />
</Grid>
</StackLayout>
<!-- Loader -->
<ContentView BackgroundColor="#222222"
Opacity="0.3"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1"
IsVisible="{Binding IsIndicatorActive}">
<ActivityIndicator AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1"
VerticalOptions="{StaticResource LoaderPosition}"
HorizontalOptions="{StaticResource LoaderPosition}"
IsEnabled="{Binding IsIndicatorActive}"
IsRunning="{Binding IsIndicatorActive}"
IsVisible="{Binding IsIndicatorActive}" />
</ContentView>
</AbsoluteLayout>
From my understanding it has something to do with the fact that scrollviews and gridviews are Managed Layouts and absolute layouts are Unmanaged Layouts so I figured if i put a stacklayout occupying the full absolute layout and afterwards the scrollview and gridview instide the stacklayout it would be relative to its parent (the way html handles this). Clearly this isn't handled in such manner (instead i just get a blank screen), which is leaving me stumped as to how I would go about this issue.
Any ideas how I can get around this issue and have my loader display without affecting my screen display? Thanks!
Maybe this will be easier:
https://components.xamarin.com/view/andhud
https://components.xamarin.com/view/btprogresshud
To implement those you only need to use the Dependency Service:
iOS implementation:
http://pastie.org/10821570
Android Implementation:
http://pastie.org/10821571
Interface implementation:
using System;
namespace YourNameSpace
{
public interface IHudService
{
void ShowHud(string ProgressText = "Loading...");
void HideHud();
void SetText(string Text);
void SetProgress(double Progress, string ProgressText = "");
}
}
And to use it simply use:
DependencyService.Get<IHudService>().ShowHud();
//Your Task...
DependencyService.Get<IHudService>().HideHud();
Not really sure how to properly describe my problem using correct wording as I'm new to Xamarin and Xaml.
I have a Frame with several StackLayouts within and I want to slide a specific StackLayout outside the Frame without showing it outside the Frame.
I can currently do this with:
XAML:
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
xmlns:mr="clr-namespace:MR.Gestures;assembly=MR.Gestures"
x:Class="iRemote.UI.Maps.LocationFinderMap"
xmlns:map="clr-namespace:iRemote.Location"
Title="Location Finder">
<Frame HasShadow="true" OutlineColor="Color.Black" WidthRequest="700" HeightRequest="300" Padding="3"
BackgroundColor="White">
<mr:StackLayout x:Name="sl_main" Padding="2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
Orientation="Horizontal" WidthRequest="200">
<StackLayout HorizontalOptions="Start" Orientation="Vertical">
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<Label Text="Parcel #" />
<Entry x:Name="txtParcel" WidthRequest="100" />
<Label HorizontalOptions="FillAndExpand" />
<Button x:Name="btnClose" BackgroundColor="#0786a3" BorderRadius="30" TextColor="White"
Text="Close" HorizontalOptions="End" />
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<Label Text="Meter #" />
<Entry x:Name="txtMeter" WidthRequest="100" />
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<SearchBar x:Name="search" Placeholder="Search" />
</StackLayout>
<StackLayout Padding="2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="FillAndExpand">
<mr:Image x:Name="img_map" Source="down" HeightRequest="19" WidthRequest="32" />
</StackLayout>
</StackLayout>
</StackLayout>
<StackLayout x:Name="sl_map" Padding="2" HorizontalOptions="FillAndExpand" HeightRequest="5"
VerticalOptions="FillAndExpand" IsVisible="true" WidthRequest="300">
<map:ExtendedMap
BackgroundColor="Blue"
x:Name="MP"
IsShowingUser="true"
MapType="Street" />
</StackLayout>
</mr:StackLayout>
</Frame>
</ContentPage>
Code-Behind:
if (panelShowing)
{
var rect = new Rectangle(this.Width - sl_map.Width, sl_map.Y, sl_map.Width, sl_map.Height);
sl_map.LayoutTo(rect, 250, Easing.CubicIn);
}
else
{
var rect = new Rectangle(this.Width + sl_map.Width - 40, sl_map.Y, sl_map.Width, sl_map.Height);
sl_map.LayoutTo(rect, 200, Easing.CubicOut);
}
However, sl_map simply just shows outside the frame. I want it to not be visible as it crosses the border of the frame. I hope that's clear enough. Again, sorry if I'm not using the correct terminology. I'm a WinForms guy.