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>
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>
Is there a way to change the shadow color of the Xamarin Forms Frame element?
You can either achieve it with custom renderers, or use RedCorner Nuget
They have a custom frame (Frame2) with several options, including Frame Shadow Color
Here is a sample image :
Usage:
<rf:Frame2
HasShadow="True"
ShadowRadius="20"
ShadowColor="Red"
BackgroundColor="White">
<Grid HorizontalOptions="Fill" HeightRequest="100">
<Label HorizontalOptions="Center" VerticalOptions="Center" Text="Hello, World" />
</Grid>
</rf:Frame2>
You can read more in the official documentation.
I am trying to use Lottie to show animations, but I have a problem when I debug it for Android:
LottieAnimationView not displayed because it is too large to fit into a software layer (or drawing cache), needs 9072000 bytes, only 8294400 available
My XAML code:
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<forms:AnimationView
x:Name="AnimationView"
Animation="data.json"
AutoPlay="True" Loop="true"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
Scale="0.2"/>
</StackLayout>
Can anyone help me to fix this problem?
you need to change the export settings of the animation in AfterEffects, to fit the software layer limit
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
How to use idiom to set Grid (height, width) padding, margin and to set label font size in xamarin forms using C# and XAML code.
I have an example of use Rectangle with StackLayout. But i am not aware of using it with other controls.
<StackLayout Spacing="10" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#0E517B" Padding="0,30,0,0">
<StackLayout.AbsoluteLayout.LayoutBounds>
<OnIdiom x:TypeArguments="Rectangle" Phone="0.5,1,1,0.80" Tablet="1,0,0.5,1" />
</StackLayout.AbsoluteLayout.LayoutBounds></StackLayout>
You can use it with virtually any property of any type of object you use in XAML.
Just use the right property and get the correct type of the argument it needs.
For instance, if you want to set the Spacing in a Grid, just do this:
<Grid VerticalOptions="FillAndExpand">
<Grid.ColumnSpacing>
<OnIdiom x:TypeArguments="x:Double"
Phone="20"
Tablet="40"/>
</Grid.ColumnSpacing>
<Grid.RowSpacing>
<OnIdiom x:TypeArguments="x:Double"
Phone="10"
Tablet="20"/>
</Grid.RowSpacing>
<Grid.Padding>
<OnIdiom x:TypeArguments="Thickness"
Phone="10, 10, 10, 0"
Tablet="20, 20, 20, 0"/>
</Grid.Padding>
<!-- Grid Content -->
</Grid>
The things to note here is that we set the ColumnSpacing by adding a child node to the Grid and as a child of that we use the OnIdiom. If you would want to do something different for a platform there is also the OnPlatform.
The only thing you need to figure out is what the x:TypeArguments has to be. This is the type of object that you are trying to assign as a value. In the case above, you would have to check what the type of Grid.ColumnSpacing is, which is a Double.
For more on this check this blog post by James Montemagno.