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>
Ok, this is a little strange, but I need to take a screenshot of a list of items in Xamarin. The problem is that I'm using a ListView and it only renders about 5 items. I need to render all elements in the list. I don't care if it's smaller on-screen; I just want to take a screenshot of the view and be able to share it.
This is my .xaml:
<BoxView HorizontalOptions="FillAndExpand" HeightRequest="0.5" Color="Gray"/>
<controls:CustomListView x:Name="list"
ItemsSource="{Binding List}"
HeightRequest="1000" VerticalOptions="Fill"
HasUnevenRows="True">
<x:Arguments>
<ListViewCachingStrategy>RecycleElement</ListViewCachingStrategy>
</x:Arguments>
<controls:CustomListView.ItemTemplate>
<DataTemplate>
<cell:ItemViewCell></cell:ItemViewCell>
</DataTemplate>
</controls:CustomListView.ItemTemplate>
</controls:CustomListView>
<BoxView HorizontalOptions="FillAndExpand" HeightRequest="0.5" Color="Gray"/>
This is for Android.
In the code behind you something like this on the OnAppearing method
list.HeightRequested = list.ItemSource.Count * list.RowHeight;
you can also try to do the same thing on the CustomList's OnPropertyChanged where propertyName is ItemSource whatever feels best for you
I had to create pdf, it is not possible to "overlap" the boundaries of the screen, At least no with a List, I went the pdf way
I'm building a Xamarin.Forms app and I need to set the background of the nav bars to an image. Is this possible without creating something super custom? If not, what's the best way to go about it? Has anyone else done it already?
Here's what I need to do. Note the nav bar area with the back button, messaging icon, and "COMMENTARY" text.
Any ideas?
It's not possible with xamarin to change the navigation background image. You have to do that in native for each platform.
Android :
in Ressources/layout/Toolbar.axml remove background color and add :
android:background="#drawable/yourImage"
2. iOS
in AppDelegate.cs add :
UINavigationBar.Appearance.BarTintColor=UIColor.FromPatternImage(UIImage.FromFile("YOURIMAGE.png"));
// To change Text Colors to white here
UINavigationBar.Appearance.TintColor=UIColor.White;
// To change Title Text colors to white here
UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes() { TextColor = UIColor.White});
Images
Don't forget to put your images in different ressources folders.
Hope this help you !
You can add a background image and buttons to Navigation bar. element can be used to customise the element. You could use AbsoluteLayout to achieve what you want (button, Text ...etc)
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MobileApp.Views.PhotoUploadPage">
<NavigationPage.TitleView>
<StackLayout>
<Image Source="background_image.jpg"></Image>
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Multiple Photo Upload!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
https://forums.xamarin.com/discussion/139894/putting-an-image-on-navigation-bar
I am developing an app using Xamarin Forms PCL. I need a StackLayout with rounded corners. I have tried frame as well for rounded corner container but there is no corner radius property available for it. I cannot find renderers for iOS,Android,UWP,Windows 8.1.
Please can any one suggest me how to achieve StackLayout with rounded corners along with corner radius property for all the platforms.
You can use Frame and put StackLayout inside , Note Frame take padding 20 by default :
<Frame CornerRadius="10"
OutlineColor="Red"
Padding="0">
<StackLayout>
</StackLayout>
</Frame>
<!--Curved stack-->
<Frame CornerRadius="5"
HorizontalOptions="Center"
VerticalOptions="Start"
HasShadow="True"
IsClippedToBounds="True"
Padding="0">
<StackLayout Padding="10,5,10,5"
Orientation="Horizontal"
BackgroundColor="White" >
<Image Source="settingsIcon"
HeightRequest="25"
WidthRequest="25"
Aspect="Fill" />
<Label Text="Filter"
FontSize="Medium"
VerticalTextAlignment="Center"
VerticalOptions="Center"/>
</StackLayout>
</Frame>
I just tried to copy BigBasket's filter buttons. See How cool it looks
Since Xamarin has released Effects mechanism, it now can be done by implementing a custom effect on both platforms. An advantage of this approach is that effects are more light-weight, reusable and can be parameterized and applied to any UI element.
After you create a custom RoundCornersEffect inheriting RoutingEffect, declare a CornerRadius attached property and implement PlatformEffect on each platform, it can be applied to any Xamarin.Forms layout or control like this:
<StackLayout effects:RoundCornersEffect.CornerRadius="48"/>
with hardcoded corners radius or a value from resources
<BoxView effects:RoundCornersEffect.CornerRadius="{StaticResource LargeCornerRadius}" />
Here is a link to full implementation and usage examples.
Just use a Frame with CornerRadius and set IsClippedToBounds to True. That should do the trick.
<Frame CornerRadius="30"
HorizontalOptions="Center"
VerticalOptions="Start"
HasShadow="True"
IsClippedToBounds="True"
Padding="0">
<StackLayout></StackLayout>
</Frame>
Use following to achieve your expected output;
Xamarin Forms control:
https://github.com/nitescua/Xamore/blob/master/Xamore.Controls/Border.cs
iOS:
https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.iOS/Renderers/BorderRenderer.cs
Android:
https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.Droid/Renderers/BorderRenderer.cs
https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.Droid/Renderers/BorderRendererVisual.cs
(Note some files in https://github.com/nitescua/Xamore/tree/master/Xamore.Controls.Droid/Renderers have compilation set to None, I was doing some tests, need to remove those)
WinPhone:
https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.WinPhone/Renderers/BorderRenderer.cs
I recently had the same need, so I created a Custom Renderer for both iOS and Android. I released it as a Nuget which you can find here.
The source code is available on GitHub, and here is a little "How-To"
Hope this helps!
It is very easy to use (Same as a ContentView, which it is at it's base), although note this is compile for .NET Standard, but you can also pull the code into your PCL
A lot of valid answers were already given.
I just wanted to add that since Xamarin Forms 5, Shapes control were added.
Now, you can just add a Rectangle which exposes RadiusX and RadiusY.
You can set rounded corner for any Layout or View or Cell (StackLayout, Grid, ListView)
http://venkyxamarin.blogspot.in/2017/12/how-to-set-corner-radius-for-view.html#more
Try using PancakeView Nuget Package. First, install the package in your PCL project. Give the reference in xaml content page.
xmlns:pkView="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
<StackLayout>
<pkView:PancakeView>
CornerRadius="10,0,10,0"
</pkView:PancakeView>
</StackLayout>