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
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 brand new Xamarin Shell application. I just want to disable one of the buttons in the TabBar section. I see there is an IsEnabled property but even if I set it to False, the button is still clickable and the view becomes visible.
<TabBar>
<ShellContent Title="Home" Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}"/>
<ShellContent Title="Settings" Route="SettingsPage" ContentTemplate="{DataTemplate local:SettingsPage}" IsEnabled="False" />
</TabBar>
Is it not possible to disable the buttons that appear in the lower navigation of a Xamarin.Forms application? I was hoping to disable certain buttons when conditions weren't met and enable them using event listeners.
I believe #ToolmakerSteve's comments would work, what I ended up doing was putting each ShellContent in its own Tab:
<TabBar>
<Tab>
<ShellContent Title="Home" Route="HomePage" ConentTemplate="{DataTemplate local:HomePage}"/>
</Tab>
<Tab>
<ShellContent Title="Settings" Route="SettingsPage" ContentTemplate="{Data Template local:SettingsPage}" IsEnabled="False" />
</Tab>
</TabBar>
Then I subscribed to events in the ShellContent class and enabled / disabled the Settings button at will.
How to define the following navigation hierarchy in a Xamarin.Forms Shell application?
Navigation Tab (route "main")
Page with Orders List (route "orders")
Detail Page for one order (route "order", parameter "orderId")
Sub-Detail Page 1 for that particular order (route "details1", parameter "orderId")
Sub-Detail Page 2 for that particular order (route "details2", parameter "orderId")
It works well as long as there is only the order page without having the sub-detail pages defined. I can navigate then to that page via Shell.Current.GoToAsync("//main/orders/order?orderId=5") route.
But when I add the sub-detail pages (doesn't matter if I do this via XAML or Routing.RegisterRoute), the same GoToAsync call fails with System.ArgumentException: 'unable to figure out route for: //main/orders/order?orderId=5'
Hierarchy definition via XAML:
<Tab Title="My Orders" Route="main">
<ShellContent ContentTemplate="{DataTemplate pages:OrdersListPage}" Route="orders">
<ShellContent ContentTemplate="{DataTemplate pages:OrderPage}" Route="order">
<ShellContent ContentTemplate="{DataTemplate pages:OrderDetailPage1}" Route="details1" />
<ShellContent ContentTemplate="{DataTemplate pages:OrderDetailPage2}" Route="details2" />
</ShellContent>
</ShellContent>
</Tab>
Same exception when I define it via custom routes:
Routing.RegisterRoute("main/orders/order", typeof(pages:OrderPage));
Routing.RegisterRoute("main/orders/order/details1", typeof(pages:OrderDetailPage1));
Routing.RegisterRoute("main/orders/order/details1", typeof(pages:OrderDetailPage1));
I have a workaround for this, you could RegisterRoute for the third and fourth level Route again in the AppShell.xaml.cs.
As follows:
Routing.RegisterRoute("Order", typeof(OrderPage));
Routing.RegisterRoute("Details1", typeof(OrderDetailPage1));
Then can use the follow route path to navigate:
Shell.Current.GoToAsync("//main/orders/Order/Details1?orderId=5")
If you Register the Route for each Page in .cs code, it will work. Generally, the first and second level if defined in Xaml, it seems not need to re-register in code again. Therefore, I only re-register the third and fourth Route with a name-key, not a path-key.
I am a complete noob to xamarin :)
So was wondering if someone could point me to right resources.
To be short, I want to implement something like this in prism using Xamarin MasterDetailPage.
Using the master detail sample here, the hamburger menu doesn't act as a fly out.
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="HelloWorld.Views.MyMasterDetail">
<MasterDetailPage.Master>
<ContentPage Title="Default">
<StackLayout>
<Button Text="ViewA" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewA?id=A" />
<Button Text="ViewB" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewB?id=B" />
<Button Text="ViewC" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewC?id=C" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
</MasterDetailPage>
Right now, though there is enough space, it shows something like
(just as a sample, I am not using SplitViewMenu at all)
I need icons/some small text to show initially and on clicking hamburger, it should expand (you know just like the first link/ groove music app behavior).
Tips?
Right now, though there is enough space, it shows something like
In my experience, if you have assigned the Symbol property for SimpleNavMenuItem, the possible reason is you haven't imported the Themes file Generic.xaml under Themes folder
This file includes templates, styles for custom controls. For example, for NavMenuItem's template, FontIcon's Glyph property needs to be assigned correctly here:
<DataTemplate x:Key="NavMenuItemTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<FontIcon FontSize="16" Glyph="{Binding Path=SymbolAsChar}" VerticalAlignment="Center"
HorizontalAlignment="Center" ToolTipService.ToolTip="{Binding Path=Label}" />
<TextBlock Grid.Column="1" Text="{Binding Path=Label}" VerticalAlignment="Center" />
</Grid>
</DataTemplate>
While SimpleNavMenuItem class's SymbolAsChar property is based on Symbol's value:
public sealed class SimpleNavMenuItem : INavigationMenuItem
{
......
public Symbol Symbol { get; set; }
public char SymbolAsChar => (char) Symbol;
......
}
And if you still can make it work, please share a demo:)
I've sort of been looking for something like this myself since I can't hide the NavigationBar shown in the Master page of the MasterDetailPage when i run it on a Windows 10 Mobile device (I can hide for PC though). So basically, I'm looking into eventually building my own version of the MasterDetailPage.
Since I have not built it yet, I can't tell you exactly how to achieve what you're asking, but I do know that it will require you to either:
Write your own custom renderer for MasterDetailView or,
Write a new control and its renderer
In both cases, your renderer will involve creating and manipulating a new SplitView (which is the native UWP control that your SplitViewMenu example is extending). There's a tutorial for creating the actual UWP control here. If you havent learned about Xamarin's renderers yet, they are the "Translator" and "Interpreter" between a Xamarin.Forms control and a given platform's native control. I suspect Xamarin will eventually rewrite their MastDetailPage renderer for UWP to use a SplitView as a base, but who knows when that will be. Xamarin also has an open source SDK for Xamarin.Forms (as well as the others) on GitHub so you can study the MasterDetailPageRenderer for UWP.