I have decided to update a Xamarin Forms app to XF 4.8. I have written some AppThemeColor for the handling of dark mode. Everything worked fine in XF 4.6. Upgrading to XF 4.8 has produced an error now where I am getting the error that AppThemeColor does not exist and wondering if I have referenced all of my assemblies. Previously, there had been a problem with the the XF 4.7 and needing to opt into the experimental theme features. Ok, so I go into my App.xaml.cs class and into the App initializor and call:
Device.SetFlags(new string[] {"AppTheme_Experimental"});
No love. Ok, so I try this in the iOS and Android projects to set the flags programmatically in the FinishedLaunching and the OnCreate methods. Still no love. I continue to get the errors.
Personally, I would think that I need to do something in a project options setting to get the compiler to pick this up, but I don't see anything.
Question: How do I turn on the AppThemeColor so that it will compile properly?
TIA,
Wally
You could use AppThemeBinding to handling of dark mode.
<!-- Light colors -->
<Color x:Key="LightPrimaryColor">WhiteSmoke</Color>
<Color x:Key="LightSecondaryColor">Black</Color>
<!-- Dark colors -->
<Color x:Key="DarkPrimaryColor">Teal</Color>
<Color x:Key="DarkSecondaryColor">White</Color>
<Style x:Key="ButtonStyle"
TargetType="Button">
<Setter Property="BackgroundColor"
Value="{AppThemeBinding Light={StaticResource LightPrimaryColor}, Dark={StaticResource DarkPrimaryColor}}" />
<Setter Property="TextColor"
Value="{AppThemeBinding Light={StaticResource LightSecondaryColor}, Dark={StaticResource DarkSecondaryColor}}" />
</Style>
I test on Xamarin.Forms 4.8.0.1269. It works well when i add the code below in MainActivity before Forms.Init().
Forms.SetFlags("AppTheme_Experimental");
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
LoadApplication(new App());
You could download the source file from the link below.
https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-systemthemesdemo/
Related
I try to use Divider and Card control from the uno.toolkit.ui package:
<utu:Divider SubHeader="Uno.Material Controls:"
Style="{StaticResource MaterialDividerStyle}" />
<utu:Card HeaderContent="Header Outlined card With supporting text"
SubHeaderContent="With supporting text"
SupportingContent="This is the supporting text"
Style="{StaticResource MaterialOutlinedCardStyle}" />
when I run the sample, I get a lot of messages like:
warn: Uno.UI.ResourceResolver[0]
Couldn't statically resolve resource MaterialOutlinedCardContentControlStyle
warn: Uno.UI.ResourceResolver[0]
Couldn't statically resolve resource MaterialDividerStyle
warn: Uno.UI.ResourceResolver[0]
and the Controls are not displayed. Using the TabBar - Control from the Toolkit works.
Any idea what is going wrong?
Make sure to follow instructions as described in the README page on the uno.toolkit.ui repo...
Since the reference to the missing style (MaterialDividerStyle for the <Divider> control) is defined in the MaterialToolkitResources dictionary, you need to add a reference to it in your App.xaml file, like that:
<!-- App.xaml: -->
<!-- Load Uno.UI.Toolkit resources -->
<ToolkitResources xmlns="using:Uno.Toolkit.UI" />
<!-- Load Material resources -->
<MaterialColors xmlns="using:Uno.Material" />
<MaterialResources xmlns="using:Uno.Material" />
<!-- Load Material Toolkit resources -->
<MaterialToolkitResources xmlns="using:Uno.Toolkit.UI.Material" />
I am trying to develop a photo app using the PictureChooser plugin. I see that the sample uses Xamarin.iOS. I've googled for examples where the plugin uses Xamarin.Forms but can't find any. I understand how binding works for labels, text editors, and buttons; however, the binding btw the page's image control and the viewmodel's byte[] has got me stomped.
DAA.UI project:
In CameraPage.XAML:
<Image x:Name="MyImage"
Source="{Binding Bytes, Converter={StaticResource InMemoryImage}}"
Aspect="Fill"
HeightRequest="{OnPlatform iOS=300, Android=250}"
WidthRequest="{OnPlatform iOS=300, Android=250}"
HorizontalOptions="Center" />
In App.XAML:
<?xml version="1.0" encoding="utf-8" ?>
<Application
x:Class="DamageAssessmentApp.UI.App"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="clr-namespace:MvvmCross.Forms;assembly=MvvmCross.Forms"
xmlns:resources="clr-namespace:DAA.UI.Resources"
xmlns:local="using:DAA.UI"
xmlns:nativeValueConverters="using:DAA.UI.NativeValueConverters">
<Application.Resources>
<!-- Application resource dictionary -->
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<resources:Colors />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
<nativeValueConverters:NativeInMemoryImageValueConverter x:Key="InMemoryImage"/>
</Application.Resources>
</Application>
Value Converter file:
using MvvmCross.Forms.Converters;
namespace DAA.UI.NativeValueConverters
{
public class NativeInMemoryImageValueConverter : MvxNativeValueConverter<MvxInMemoryImageValueConverter>
{
}
}
The compiler can't find MvxInMemoryImageValueConverter in the value converter file.
If you are using MVVMCross you should find an example that works with Xamarin.Forms, in which case a good place to start it's their Github.
Or you have to implement it in each platform and use a DependencyService to get the implementation
Other Alternatives
Xamarin Community Toolkit
Another alternative for a camera App is Xamarin Community Toolkit Camera View. In that same link there is an example. But there are more examples in their Github. This is fully compatible with Xamarin.Forms and brings a little more control over the CameraView
Xamarin.Essentials
Xamarin.Essentials offers the MediaPicker that let's the user upload a photo from the gallery or take a new one. But the action of the photo in handled by the OS, so for you it's like a black box. You call the function, and get the photo.
I have a Xamarin Forms Shell Application with a flyout. My entries are defined like this:
<FlyoutItem Title="{x:Static resources:Strings.DashboardTitle}" FlyoutIcon="ic_dashboard_black">
<Tab>
<ShellContent>
<dashboard:DashboardPage />
</ShellContent>
</Tab>
</FlyoutItem>
This works so far as the icons is shown. But to support light and dark theme I would like for example to be able to bind that with an AppThemeBinding. Is that possible? Or how would I theme the icons in the flyout?
You can use AppThemeBinding markup extension to define image source under light/dark mode:
<FlyoutItem Title="{x:Static resources:Strings.DashboardTitle}" FlyoutIcon="{AppThemeBinding Light=lightlogo.png, Dark=darklogo.png}">
<Tab>
<ShellContent>
</ShellContent>
</Tab>
</FlyoutItem>
The following requirements must be met for Xamarin.Forms to respond to a system theme change:
Xamarin.Forms 4.6.0.967 or greater.
iOS 13 or greater.
Android 10 (API 29) or greater.
UWP build 14393 or greater.
Responding to a system theme change is currently experimental, and can only be used by setting the AppTheme_Experimental flag.
Refer: Enable flags in platform projects
Recently I upgraded my Xamarin project to all the latest DLLs. Now on the navigation bar an icon has appeared on Android (haven't looked at iOS yet). See generic icon:
After spending hours searching and prototyping code I still can't figure out how to change or get rid of the icon! Doing a recursive search for png files in my project finds no such image.
There is a method SetTitleIcon but that method doesn't do anything. Some people talk about a toolbar xaml file in the layout folder, but I have no such file.
I followed this tutorial: https://xamarinhelp.com/xamarin-forms-toolbar/ but can only add icons, it doesn't remove the default icon.
I found this demo project: https://developer.xamarin.com/samples/monodroid/Supportv7/AppCompat/Toolbar but that code is quite different from mine. Do I need to go that route?
Anyway, my main xaml file:
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SharedMobile"
NavigationPage.HasNavigationBar="true"
x:Class="SharedMobile.MainPage">
<MasterDetailPage.Master>
<local:MainPageMaster x:Name="MasterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage BarBackgroundColor="#DCDCDC">
<x:Arguments>
<local:ActionProcessesPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
There is little to no mention anywhere else in the project of a navigation bar. I did try to add a NavigationPage.Icon under the Navigation Page. Nothing happened.
I only do Xamarin part-time is my excuse.
One of the main reasons I post on Stack Overflow is often (for some reason) shortly after posting I will figure out or find the answer.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SharedMobile;assembly=MyApp.Mobile"
NavigationPage.TitleIcon="transparent.png"
x:Class="SharedMobile.ActionProcessesPage">
In MainActivity.cs (in the Android project),
protected override void OnCreate(Bundle bundle)
{
...
ActionBar.SetIcon(null);
LoadApplication(new Forms.App());
}
Source
I made a color resource in Xamarin Forms App like this:
<Application ...>
<Application.Resources>
<Color x:Name="ColorLineSeparator">#cccccc</Color>
</Application.Resources>
</Application>
I want to use it in MainPage.xaml like this:
<BoxView
HeightRequest=".5"
HorizontalOptions="FillAndExpand"
BackgroundColor="[HOW TO USE IT HERE?]"/>
Original WPF handle this issue something like this:
<Button Background="{DynamicResource ResourceKey=ColorLineSeparator}" />
However it seems not working in Xamarin Forms Page.
It showing this error:
No property, bindable property, or event found for 'ResourceKey', or
mismatching type between value and property.
First of all you have to declare Application.Resources the right way:
<Application ...>
<Application.Resources>
<ResourceDictionary>
<Color x:Key="ColorLineSeparator">#cccccc</Color>
</ResourceDictionary>
</Application.Resources>
</Application>
All the resources declared this way are actually static:
<BoxView BackgroundColor="{StaticResource ColorLineSeparator}"/>
There is a great official article about this stuff.
P.S.: Enabling XAMLC may help you to identify such mistakes in the future.
Add x:Key in your resource:
<Color x:Key="MyColor">#cccccc</Color>
and use it:
<BoxView
HeightRequest=".5"
HorizontalOptions="FillAndExpand"
BackgroundColor="{StaticResource MyColor}"/>