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
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 have a gif animation that i want to use as background for my ContentPage.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MainPage"
xmlns:viewmodel="clr-namespace:MyApp.ViewModels"
x:DataType="viewmodel:MainViewModel"
BackgroundImageSource="background.gif">
I tried it this way but only the first frame is shown as static image.
Does anyone know how to set an animated background on Net Maui?
PS: This animation is from LottieFiles so i have the .gif and the .json file if I need that.
you can install " SkiaSharp.Extended.UI.Maui " plugin fron nuget package
and add the code in MauiProgram add "UseSkiaSharp"
builder.UseMauiApp<App>().ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
}).UseSkiaSharp();
in mainpage add grid
in grid you can add this code
<Grid >
<skia:SKLottieView`
Source="an_back.gif"
RepeatCount="-1"
IsAnimationEnabled="True"/>
</Grid>
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 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
I'm using xamarin forms to build android app, and I use navigation page to navigate between pages. I'd like to hide the bar but keep the back button, because I have some else controls to put in the top area. I used HasNavigationBar and HasBackButton for this, but it looks the back button cannot be restored if the bar is hidden. Is there anyway to show the back button?
XAML:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CH.AdDetailPage"
NavigationPage.HasNavigationBar="True"
NavigationPage.HasBackButton="True"
NavigationPage.BackButtonTitle="Back" Title="AdDetail">
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Ad Detail Pages!" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
When HasNavigationBar=True, and HasBackButton=True:
When HasNavigationBar=True, and HasBackButton=False:
Both above works.
But when HasNavigationBar=False, and HasBackButton=True: it does not work.
Back button is a part of navigation bar. You can not show it without showing the navbar.
your only way is to create your back button and assign command with NavigationService.GoBack ...