Very good morning, I'm trying to implement the functionality when clicking the UserName the StackPanel up so that the keyboard does not hide the information. But what is not the best choice for this, I'm working on iOS and Android. Could you help me.
<?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="BackGround.BackGroundImageDemo" BackgroundImage="Avion.jpg">
<ContentPage.Content >
<StackLayout VerticalOptions="Center" Padding="5, 50, 120, 0" BackgroundColor="White" HorizontalOptions="Center">
<Entry Placeholder="UserName" PlaceholderColor="Gray" TextColor="Navy" />
<Entry Placeholder="Password" IsPassword="true" PlaceholderColor="Gray" TextColor="Navy"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Chase application have something similar.
Chase UserName normal -
Chase in mode up stacklayout
This can be achieved using scrollview. This is simple code snippet.
<ContentPage.Content>
<ScrollView x:Name="scr">
Your Stack Layout having entry and click button
Add TapGestureRecognizer to entry control in this case it is username or password whichever you want.
How to add TapGestureRecognizer. You can look at here.
</ScrollView>
</ContentPage.Content>
Then on your code behind
field.GestureRecognizers.Add(new TapGestureRecognizer
{
Command = new Command(async () =>
{
await ScollTest();
}),
NumberOfTapsRequired = 1,
});
private async void ScollTest()
{
// Then adjust your scroll this way.
await scr.ScrollToAsync(100, 1000, true);
}
For what I have understood from your question, you want an approach to make sure that, when the keyboard pops in, it does not cover the entries and / or other relevant information in the screen, right?
The approach for that is to have your content inside a ScrollView, so the user will be able to scroll it if necessary. Also, both Android and iOS will automatically roll the screen up to the entry is visible.
I changed your example to look 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"
x:Class="BackGround.BackGroundImageDemo" BackgroundImage="Avion.jpg">
<ScrollView>
<StackLayout VerticalOptions="Center" Padding="5, 50, 120, 0" BackgroundColor="White" HorizontalOptions="Center">
<Entry Placeholder="UserName" PlaceholderColor="Gray" TextColor="Navy" />
<Entry Placeholder="Password" IsPassword="true" PlaceholderColor="Gray" TextColor="Navy"/>
</StackLayout>
</ScrollView>
</ContentPage>
That is not normally how you animate items in Xamarin.Forms. Check out the BikeShare360 app on Github.
It is a beautiful app and uses the 3rd party animation libraries and custom Storyboard XAML to give a great user experience.
For example to fade up an arbitrary element in a control.
Define what you want to do:
<animations:StoryBoard
x:Key="ProfileImageAnimation"
Target="{x:Reference ProfileImage}">
<animations:FadeInAnimation
Direction="Up"
Duration="500" />
</animations:StoryBoard>
What event do you want to trigger the animation:
<ContentPage.Triggers>
<EventTrigger Event="Appearing">
<triggers:BeginAnimation
Animation="{StaticResource ProfileImageAnimation}" />
</EventTrigger>
</ContentPage.Triggers>
The element you are going to effect:
<ctrl:UserProfileImageControl
WidthRequest="105"
HeightRequest="105"
BorderColor="{StaticResource ProfileGrayColorHexString}"
ProfileImage="{Binding Profile.PhotoUrl}"
UpdatePhotoCommand="{Binding UpdatePhotoCommand}"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand" />
All the source is available and it is not too hard to get started.
Good luck!
Related
Is it possible to scale labels, buttons, and frames with font size? I'm running into accessibility issues, where iOS has a few lines to disable all accessibility scaling and after googling android doesn't seem to have it at all. I have a number of components that have text inside and buttons that have custom fonts for arrows pause and play icons which are custom fonts. I need to scale the entire button around depending if the font size within the accessibility has been changed.
Only for iOS: Accessibility Scaling for Named Font Sizes on iOS, cannot find anything about android.
Another post: Getting Android/iOS Accessibility font sizes, first answer has this line of code for android Android.Content.Res.Resources.System.Configuration.FontScale but I can't seem to be able to access the Android.Content anywhere I try to use it.
Many Thanks in advance.
Edit: Temp Fix. Still would like to know if its even possible to do component scaling with fontsize.
Reference:
<?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="BugTestMediaElement.Page3">
<Shell.TitleView>
<StackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Red">
<Frame BackgroundColor="White"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand">
<Label Text="Test"
FontSize="{StaticResource ToolbarIconFontSize}"
TextColor="Black" />
</Frame>
</StackLayout>
</Shell.TitleView>
</ContentPage>
I use the following approach. In App.xaml file (application wide declarations), I make the following declarations:
<Application.Resources>
<ResourceDictionary>
<OnPlatform x:Key="ToolbarIconFontSize" x:TypeArguments="x:Double" Android="48" iOS="64" />
</ResourceDictionary>
</Application.Resources>
Then on a page (I use icons from FontAwesome), I make this declaration:
<Shell.TitleView>
<Grid Style="{StaticResource GridTitle}" RowDefinitions="*" ColumnDefinitions="*, 0.20*, 0.20*">
<!-- other declarations are skipped -->
<ImageButton Grid.Row="0" Grid.Column="1" HorizontalOptions="Start" Command="{Binding SomeActionCommand}">
<ImageButton.Source>
<FontImageSource Glyph="{x:Static icons:IconFontGlyphNames.SomeActionSymbol}"
FontFamily="IconFontFamily"
Color="White"
Size="{StaticResource ToolbarIconFontSize}" />
</ImageButton.Source>
</ImageButton>
<!-- other declarations are skipped -->
</Grid>
</Shell.TitleView>
IconFontGlyphNames class declarations look like that:
public static class IconFontGlyphNames
{
public const string SomeActionSymbol = "\uf234";
// other declarations are skipped
}
I set fonts sizes for icons, and texts using this approach, and it works fine as for Android and for iOS platform.
Update #1. Explaining `Shell.TitleView` location.
Shell.TitleView is located here:
<ContentPage>
<Shell.TitleView>
<!-- Shell title view elements go here -->
</Shell.TitleView>
<ContentPage.Content>
<!-- Your page body elements go here -->
</ContentPage.Content>
</ContentPage>
I'm developing a xamarin.forms app for my company but I have a stranger problem.
When I try to load in a stackLayout another content page, xamarin.forms doesn't load correctly the page. Probably because the page that I try to load is too big, infact if I try to load a smaller page It works correctly. (I Can't load a smaller page because I need to get a lot of data from user).
BigPage bigpage = new BigPage(defaultData);
stackLayout.Children.Clear();
stackLayout.Children.Add(bigpage);
This is what I see
In your opinion, what is the best way to solve this problem?
When the page does not load correctly, if I click on a component that opens the keyboard (like <entry>), the system loads the page correctly even if it is big.
I find a solution. It's not the best solution but it works.
It was my XAML code:
<ScrollView>
<StackLayout>
<StackLayout x:Name="stackLayout" Padding="15" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="GhostWhite" />
</StackLayout>
</ScrollView>
And It is my C# code:
BigPage bigpage = new BigPage(defaultData);
stackLayout.Children.Clear();
stackLayout.Children.Add(bigpage);
In order to solve this problem I add in the end of the page an empty label. In this way I can load the page without problem.
<ScrollView>
<StackLayout>
<StackLayout x:Name="stackLayout" Padding="15" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="GhostWhite" />
<Label Text=" " HorizontalOptions="End"/>
</StackLayout>
</ScrollView>
I'm creating a cross platform app with Xamarin for iOS and Android which uses the camera. I didn't want to use the MediaPicker to access the camera because I wanted the app to display other information while taking a picture. I therefore used CameraView. I wrote the app and tested it with an Android emulator which was running on Android 11. However, I didn't think to test the app for previous versions of Android. The targeted version of Android is 11, but the minimum android version which works is 5.1. Therefore, the app functions on a phone which uses Android 9, but there is a bug when I try and take a picture. The method which is called upon when the user wants to take a picture is the following:
private void CaptureImage(object sender, EventArgs e)
{
xctCameraView.Shutter();
}
When I try and take a picture using Android 9, an error is thrown: System.NullReferenceException
Message=Object reference not set to an instance of an object.
I understand there may be some differences between android 9 and 11 and therefore the code doesn't work, but I've been searching for an alternative with no outcome. Can anyone help? Thanks!
EDIT:
<?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:xct="http://xamarin.com/schemas/2020/toolkit" Title="Prenez une photo" BackgroundColor="Transparent"
x:Class="App1.CameraViewPage">
<Grid x:Name="myGrid">
<xct:CameraView
x:Name="xctCameraView"
CaptureMode="Photo"
MediaCaptured="MediaCaptured"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
<StackLayout VerticalOptions="EndAndExpand" Spacing="2" Padding="6">
<Button WidthRequest="70" HeightRequest="70" CornerRadius="40" BackgroundColor="Transparent" BorderColor ="White" BorderWidth="8" Clicked="CaptureImage" x:Name="captureBtn" HorizontalOptions="Center" VerticalOptions="Center"/>
</StackLayout>
<StackLayout VerticalOptions="StartAndExpand" Spacing="2" Padding="6">
<Label x:Name="labelOfMine" x:FieldModifier="public"
Text="" BackgroundColor="LightYellow">
</Label>
</StackLayout>
</Grid>
</ContentPage>
I use the code below to take a picture on Android 9 on emulator. It works. You could refer to it.
<StackLayout>
<xct:CameraView
Grid.Column="0"
x:Name="xctCameraView"
CaptureMode="Photo"
FlashMode="Off"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
<Button Clicked="Button_Clicked"></Button>
</StackLayout>
Code behind:
private void Button_Clicked(object sender, EventArgs e)
{
xctCameraView.Shutter();
}
Permissions:
<uses-permission android:name="android.permission.CAMERA" />
I'm using the ImageButton and would like that by taking the image by source it fills every button. The problem is that the image appears small simply on the right side. I want it to occupy every button
<ContentView.Content>
<StackLayout>
<controls:ImageButton x:Name="CmdVoltar" BackgroundColor="#1C97D5" TextColor="White" FontSize="Small" WidthRequest="100" HeightRequest="40" HorizontalOptions="EndAndExpand" Margin="0,0,50,0"></controls:ImageButton>
</StackLayout>
</ContentView.Content>
CmdVoltar.Source = ImageSource.FromResource("Agmovel.Img.btnVoltar.png");
I would suggest not using the default button with images, it has several issues.
You can use a package such as https://github.com/robinmanuelthiel/flexbutton
I am working in Xamarin Studio, trying to learn C# and XAML and I am having some trouble with a bit of XAML for a simple program. I am trying to use a and change the TickFrequency, but it doesn't seem to recognize it or any Tick related attributes. Here is my code:
<?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="HelloWorld.GreetPage">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness"
iOS="0, 20, 0, 0">
</OnPlatform>
</ContentPage.Padding>
<StackLayout
BindingContext = "{x:Reference slider}">
<Label
HorizontalOptions="Start"
Text="{Binding Value,
StringFormat='Font Size: {0:F0}'}"/>
<Slider
x:Name="slider"
Maximum = "64"
Minimum = "16"
TickFrequency="1"/>
</StackLayout>
</ContentPage>
The error I receive says "No property, bindable property, or event found for "TickFrequency"
Thank you in advance!
For adding ticks in xamarin forms in android and iOS apps, you can try this