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
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 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 read the Xamarin docs https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/radiobutton and tried to follow the exact syntax given in the doc to include a radiobutton in my project. The code is as follows :
<StackLayout Grid.Column="1" Grid.Row="2">
<widget:RadioButton Text="Cat" />
</StackLayout>
The error I get here is 'invalid type: expected type is 'View', actual type is 'RadioButton' Is there a way to solve this ?
I think what your looking for in Xamarin.Forms is the control <RadioButton../> without the widgetpart.This will create a radiobutton in the native controls for UWP, iOS and Android.
This is the code I use to display radiobuttons.
<?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="TestButton.MainPage">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<RadioButton Text="test radio button"/>
</StackLayout>
</ContentPage>
Beware it is experimental and you will need to add the build flag for it.
build flag for experimental XamarinForms controls
If you want to add the experimental flag for the RadioButton, you have to do so in all your projects (iOS, Android and UWP).I've added images to clarify where exactly (they need to be before the Xamarin.Forms.Forms.Init). This is the code to add:
global::Xamarin.Forms.Forms.SetFlags(new string[] { "RadioButton_Experimental" });
Here's where to add the code in the Android project. MainActivity.cs
Here's where to add the code in the iOS project. AppDelegate.cs
Here's where to add the code in the UWP project. App.xaml.cs
I am using this code to show image from an URL
.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" x:Class="LandAHand.VolunteerView">
<ContentPage.Content>
<AbsoluteLayout BackgroundColor="Maroon">
<Image x:Name="backgroundImage" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" />
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
.cs
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace LandAHand
{
public partial class VolunteerView : ContentPage
{
public VolunteerView()
{
InitializeComponent();
backgroundImage.Source = new UriImageSource
{
Uri = new Uri("https://s9.postimg.org/aq1jt3fu7/handshake_87122244_std.jpg"),
CachingEnabled = true,
CacheValidity = new TimeSpan(5, 0, 0, 0)
};
}
}
}
This code is successfully working with iOS but it is not working with Android.
Well you can do this thing easier with your Xaml just make your xaml like this
<Image x:Name="backgroundImage" Source="https://s9.postimg.org/aq1jt3fu7/handshake_87122244_std.jpg" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill"/>
And remove the code related in the code behind. The cashing is enabled by default for 24 hours
It's not working because you use a https url.
For fix it, you should be configure your Android Project like this :
In Project Options > Android Options, click Advanced Options
HttpClient implementation : choose Android
SSL/TLS implementation : choose Native TLS 1.2+
https://learn.microsoft.com/en-us/xamarin/android/app-fundamentals/http-stack?tabs=windows
And update all Xamarin.Android packages
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!