mvvmcross xamarin.forms PictureChooser - xamarin.forms

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.

Related

Create custom toolbar for ios in xamarin visual studio 17

I want to create a custom toolbar with app name and his icon this toolbar should be included in all Page of the applications. This toolbar should be for ios because in all others examples which i haave seen they are using Main.storyboard which iss not in visual studio 17. Thanks
I want to create a custom toolbar with app name and his icon this toolbar
You can refer to this official document to know more about ToolBarItem in Xamarin Forms.
Code as follow in Xaml:
<ContentPage.ToolbarItems>
<ToolbarItem Name="MenuItem1" Icon="icon.png" Priority="0" Order="Primary" />
</ContentPage.ToolbarItems>
Or in ContentPage :
new ToolbarItem () { Icon = "icon.png" }
And this app name can be setted in ContentPage with Title property as follow:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App3"
xmlns:autocomplete="clr-namespace:Syncfusion.SfAutoComplete.XForms;assembly=Syncfusion.SfAutoComplete.XForms"
x:Class="App3.MainPage"
Title="AppNameTitle">
Here is a good article for reference.

Xamarin navigation bar has unwanted default icon, impossible to alter or remove

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

ViewModel is not getting called first time in master details page in Xamarin forms with prism

I am using Master details page in my application. I have used Prism in my application.
First time my details page view model is not getting called and due to this page is showing as empty.
<?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:InforConcierge.Views"
x:Class="InforConcierge.Views.MainPage">
<MasterDetailPage.Master>
<local:LeftMenuPage x:Name="masterPage" Icon="home.png"/>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage x:Name="NavPage" BarBackgroundColor="{DynamicResource appColor}" >
<x:Arguments>
<local:HomePage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
In master page i have "Home","Contacts" options.
Note: If I switch to another menu item("Contacts") and the select "Home" in menu page, then my view model of Home page is getting called.
You are directly creating an HomePage object from XAML. As far as I know, Prism is not able to intercept this and hence no viewmodel is created. You'll have to navigate to the page in order to enable Prism to auto-resolve the VM. We are loading our main view by calling
NavigationService.NavigateAsync("/MenuViewWrapper/NavigationRootPage/HomePage");
from App.OnInitialized. Please note that MenuViewWrapper (which would be your MainPage) and NavigationRootPage (which can be replaced by NavigationPage in your example) have to be registered for navigation (see here).

FFImageLoading CachedImage is not showing gif image

I am using xamarin forms for my app development. I am using FFimageloading for view gif file. I am using the following code in xaml file:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="myproject.View.MasterDetailPage1Detail"
Icon="UEmlogotiny.png"
xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:ffSvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
xmlns:ffTransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
>
....
<ff:CachedImage x:Name="Gif" Source="resource://UETrack.Beats.App.loader.gif" VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
WidthRequest="75" HeightRequest="75"
DownsampleToViewSize="True" IsVisible="True"/>
Change the Image Build Action to "Embedded Resource"
The gif image has showed on Orio. But not show in below Oreo.
Can anyone help me to resolve this issue.
Where did you add your image? To the Drawable folders? xxhdpi, etc?
If so,you can simple do:
Source="loader.gif"

Implementing UWP flyout splitview using masterdetailview in prism?

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.

Resources