ZXing view with FreshMVVM not triggering OnScanResult - xamarin

Resoution TL;DR : https://gist.github.com/rupe120/78f8a57f0ed7ecacbdc13fa2da8d931a
I created my own scan page, converting the built-in ZXingScannerPage code (https://github.com/Redth/ZXing.Net.Mobile/blob/master/Source/ZXing.Net.Mobile.Forms/ZXingScannerPage.cs) to a Page + PageModel/View concept. The page code is below.
The problem is that OnScanResult is never triggered.
I was using ZXingScannerPage directly previously, and the OnScanResult event was successfully triggering but I wanted the page to follow the same format as the rest of the application. So the QR code I'm using should trigger it.
I must be missing a setup piece in the ZXingScannerView, but I can't see it.
Any thoughts?
SearchQrPage.xaml
<?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="MyApp.Pages.SearchQrPage"
xmlns:zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms">
<ContentPage.Content>
<Grid>
<zxing:ZXingScannerView x:Name="scannerView" />
<zxing:ZXingDefaultOverlay x:Name="scannerOverlay"
TopText="Hold your phone up to the QR code"
BottomText="Scanning will happen automatically"
ShowFlashButton="True"/>
</Grid>
</ContentPage.Content>
</ContentPage>
SearchQrPage.xaml.cs
using MyApp.PageModels;
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace MyApp.Pages
{
public partial class SearchQrPage : ContentPage
{
public SearchQrPage()
{
InitializeComponent();
scannerView.Options = new ZXing.Mobile.MobileBarcodeScanningOptions
{
PossibleFormats =
new List<ZXing.BarcodeFormat>
{
ZXing.BarcodeFormat.QR_CODE
}
};
scannerView.OnScanResult += ScannerView_OnScanResult;
scannerOverlay.FlashButtonClicked += ScannerOverlay_FlashButtonClicked;
}
private void ScannerOverlay_FlashButtonClicked(Button sender, EventArgs e)
{
scannerView.ToggleTorch();
}
private void ScannerView_OnScanResult(ZXing.Result result)
{
var model = this.BindingContext as SearchQrPageModel;
if (model == null)
return;
scannerView.IsScanning = false;
if (model.ScanResultCommand.CanExecute(result))
model.ScanResultCommand.Execute(result);
}
}
}

Just set IsScanning = true at the constructor, for example. On the original ZXing's page, they do it on the OnAppearing event.
You've missed it up.

Related

Problem with xamarin forms image when removing and adding it from parent layout

Description
I have created simple Xamarin.Forms sample. In it, I have added an Image and loaded the image as a stream through ImageSource.FromSource() method, then removed and add it to the layout.
Xamarin.Forms UWP The image will be disappeared.
Xamarin.Forms Android Cannot access closed stream exception throwing.
Xamarin.Forms iOS Didn't check yet.
Please find the code snippet below
XAML:
<?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="ImageException.MainPage">
<ContentPage.Content>
<Grid x:Name="MainGrid">
<Image x:Name="image" />
<Button Text="Click_Me"
Clicked="Button_Clicked"
VerticalOptions="End" />
</Grid>
</ContentPage.Content>
</ContentPage>
C#:
namespace ImageException
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var assembly = typeof(MainPage).Assembly;
string path = "ImageException";
var stream = assembly.GetManifestResourceStream($"{path}.Image.Image.png");
image.Source = ImageSource.FromStream(() => stream);
}
private void Button_Clicked(object sender, EventArgs e)
{
MainGrid.Children.Remove(image);
MainGrid.Children.Add(image);
}
}
}
Please get the complete sample from below link https://github.com/VigneshRameshh/XamarinFormsImageException
Can anyone suggest how to retain the image after removed and added from the layout?
Thanks in advance,
Vignesh Ramesh.
I checked your code and could reproduce your exception.
If you want to fix this, you could use the code like below.
Stream stream;
Assembly assembly;
string path;
public Page18()
{
InitializeComponent();
assembly = typeof(MainPage).Assembly;
path = "App14";
stream = assembly.GetManifestResourceStream($"{path}.Image.beach.jpg");
image.Source = ImageSource.FromStream(() => stream);
}
private void Button_Clicked(object sender, EventArgs e)
{
stream = assembly.GetManifestResourceStream($"{path}.Image.beach.jpg");
MainGrid.Children.Remove(image);
MainGrid.Children.Add(image);
}

I tried to update a label in Xamarin.Forms, and it broke the entire app

I have a label on my app's main page that is supposed to update every fifteen seconds, but it only updates once and after that, a lot of things stop working. For example, if I try to open a new page after the label updates, the page's title is drawn in the same place as the back button (both of which are generated in the toolbar by Xamarin), and the page's content doesn't load at all. Also, I have a ListView on the page and if I try to select an item (which is supposed to open a new page) it only works the first time, after which point the ListView disappears, but the orange box that appears behind a selected item stays there.
How the label works at the moment is I have a timer in the App class that chooses a random piece of text from a list that I load in the app's OnStart() function (that part works properly) and then fires an event that is supposed to update the label.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Timers;
using System.Reflection;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Partylist.Views;
using Partylist.Models;
namespace Partylist
{
public partial class App : Application, INotifyPropertyChanged
{
// Variable to store the currently selected event.
public static Event selectedEvent;
// Variable to store the currently selected list.
public static PartylistList selectedList;
// Struct to store information about tips.
public struct Tip
{
// A short version of the tip for the banner at the bottom of the screen.
public string Summary { get; set; }
// The full tip, which you can read by clicking the "More" button in the banner.
public string Full { get; set; }
}
// Array of tips.
public List<Tip> tips = new List<Tip>();
// Current tip.
public Tip CurrentTip { get; set; }
// Timer that gets the tip to update.
public Timer tipTimer = new Timer(15000);
// Random number generator for choosing the tip.
public Random rand = new Random();
// Event that tells the tip banners on the pages to update.
public static event EventHandler TipUpdate;
// Constructor.
public App()
{
// Do whatever initialization stuff this does.
InitializeComponent();
// Subscribes the timer's event handling function to its event.
tipTimer.Elapsed += OnTimerElapsed;
// Open the first page: the list of events.
MainPage = new NavigationPage(new EventsPage()) {
BarTextColor = Color.FromHex("FF4081")
};
}
// Loads tips data.
private void LoadTips()
{
// Variable for the assembly.
var assembly = IntrospectionExtensions.GetTypeInfo(typeof(App)).Assembly;
// Variable for the stream I use to read the text file.
Stream tipsStream = assembly.GetManifestResourceStream("Partylist.Resources.tips.txt");
// And a variable for the StreamReader.
StreamReader tipsReader = new StreamReader(tipsStream);
// Read the whole file into the list of tips.
while (!tipsReader.EndOfStream)
{
// Read a line into a "sumamry" variable.
string sum = tipsReader.ReadLine();
// Read another line into a "full" variable.
string full = tipsReader.ReadLine();
// Add an item to the list of tips that uses "summary" as the summary
// and "full" as the full tip.
tips.Add(new Tip()
{
Summary = sum,
Full = full
});
}
// Random index of the chosen tip.
int index = rand.Next(tips.Count);
// Set the current tip as the tip at that index.
CurrentTip = tips.ElementAt(index);
// Start timer (if it needs it).
tipTimer.Start();
}
// Event handling function for when the timer goes off.
private void OnTimerElapsed(object source, ElapsedEventArgs e)
{
// Random index of the chosen tip.
int index = rand.Next(tips.Count);
// Set the current tip as the tip at that index.
CurrentTip = tips.ElementAt(index);
// Fire the event to update the pages' tip banners.
TipUpdate?.Invoke(this, e);
}
// Standard lifecycle events.
protected override void OnStart()
{
// Call a function that loads the tips.
LoadTips();
}
protected override void OnSleep()
{
}
protected override void OnResume()
{
}
}
}
In the page's OnAppearing() method, I have the label's text set to the current tip (which at this point is null) and I subscribe the function that updates it to the event that the timer fires.
using Partylist.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace Partylist.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class EventsPage : ContentPage
{
// Text of the tip banner.
public string BannerText { get; set; }
// List of events, used to populate
// the page's ListView (see the XAML).
public ObservableCollection<Event> EventList { get; set; }
// Constructor.
public EventsPage()
{
// Does all the stuff to make the page
// exist that doesn't involve anything
// specific to this particular page in
// this particular app.
InitializeComponent();
// Set the label's BindingContext to the
// App class so it can update its text.
tipLabel.BindingContext = (App)App.Current;
}
// Runs when the page appears.
protected override void OnAppearing()
{
// Call the regular OnAppearing method.
base.OnAppearing();
// Set the BindingContext of the page to itself.
BindingContext = this;
// Update the ListView.
UpdateListView();
// Set the banner's text to the current tip's sumamry.
tipLabel.Text = ((App)App.Current).CurrentTip.Summary;
OnPropertyChanged("CurrentTip");
// Subscribe the OnTipUpdate function to the tipUpdate event in the app
// class.
App.TipUpdate += OnTipUpdate;
}
// Function to update the ListView whent he page loads or when something changes.
private void UpdateListView()
{
// Set the EventList to a new ObservableCollection
// which will be populated.
EventList = new ObservableCollection<Event>();
// Loop to populate the ObservableCollection.
for (int i = 0; i < Directory.GetDirectories(
Environment.GetFolderPath(
Environment.SpecialFolder
.LocalApplicationData))
.Length; i++)
{
// Add a new event.
EventList.Add(new Event()
{
// Set the folder name to the name of the folder
// that the even corresponds to.
FolderName = new DirectoryInfo(Directory.GetDirectories(
Environment.GetFolderPath(
Environment.SpecialFolder
.LocalApplicationData))[i]).Name,
// Sets the date/time created to the folder's
// creation date.
DateCreated = Directory
.GetCreationTime(Directory.GetDirectories(
Environment.GetFolderPath(
Environment.SpecialFolder
.LocalApplicationData))[i]),
// Sets the date/time last edited to the
// folder's write date.
DateEdited = Directory
.GetLastWriteTime(Directory.GetDirectories(
Environment.GetFolderPath(
Environment.SpecialFolder
.LocalApplicationData))[i])
});
// Set the ItemsSource of the ListView in the
// XAML to the ObservableCollection.
EventsListView.ItemsSource = EventList;
// Calls OnPropertyChanged() which makes the ListView update.
OnPropertyChanged("EventList");
}
}
// Function to go to the "New Event" page.
async void OnNewEventClicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new NewEventPage());
}
// Function for when a ListView item is selected.
async void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
App.selectedEvent = (Event)e.SelectedItem;
await Navigation.PushAsync(new ListsPage());
}
// Function to delete an event if the "Delete" context action is selected.
async void OnDelete(object sender, EventArgs e)
{
// Represents the thing to be deleted.
var del = (MenuItem)sender;
// Displays a confirmnation popup and stores the user's answer in a variable.
var answer = await DisplayAlert("Delete this event?",
"Are you sure you want to delete the event: \"" +
((Event)del.CommandParameter).FolderName + "\"?", "Delete", "Cancel");
// If the user accepted, delete the event with the MenuItem that ran this function.
if (answer)
{
Directory.Delete(Path.Combine(Environment.GetFolderPath(
Environment.SpecialFolder.LocalApplicationData),
((Event)del.CommandParameter).FolderName), true);
// Set the ItemsSource to null and back to make the ListView update.
EventsListView.ItemsSource = null;
UpdateListView();
}
}
// Function for when the current tip updates.
public void OnTipUpdate(object sender, EventArgs e)
{
// Make the label's text update.
tipLabel.Text = ((App)App.Current).CurrentTip.Summary;
OnPropertyChanged("CurrentTip");
}
}
}
Also, here is the page's XAML in case something is wrong with that.
<?xml version="1.0" encoding="utf-8" ?>
<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="Partylist.Views.EventsPage"
Title="Events"
BackgroundColor="White">
<ContentPage.ToolbarItems>
<ToolbarItem IconImageSource="settings_gear.png"
Priority="0"/>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<!--Main layout of the page-->
<StackLayout>
<!--ListView of the events-->
<ListView x:Name="EventsListView"
ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!--These contewxt actions are buttons that appear
when you long press the item (Android) or swipe
left (iOS).-->
<ViewCell.ContextActions>
<MenuItem Clicked="OnDelete"
CommandParameter="{Binding .}"
Text="Delete"
IsDestructive="true"/>
</ViewCell.ContextActions>
<!--This is the content that actually appears-->
<StackLayout Padding="20,5">
<Label Text="{Binding FolderName}"
TextColor="#FF7700"
FontSize="Large"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!--"New Event" button-->
<Button Text="+ Add New Event"
TextColor="#ff418b"
FontSize="Large"
BackgroundColor="#00ffffff"
Clicked="OnNewEventClicked"/>
<!--The banner at the bottom of the screen that gives tips-->
<Frame BorderColor="#ff418b"
Padding="0">
<FlexLayout Direction="Row"
AlignItems="Stretch"
JustifyContent="SpaceBetween">
<!--The "Tip" icon-->
<Image Source="tip_icon.png"
Margin="10"
FlexLayout.Basis="50"/>
<!--The short version of the tip-->
<Label x:Name="tipLabel"
VerticalTextAlignment="Center"
TextColor="#bb0099"
FontSize="Medium"
FontAttributes="Bold"
FlexLayout.Basis="250"/>
<!--The button that opens up a screen
with tyhe rest of the tip-->
<Button Text="More"
TextColor="White"
FontAttributes="Bold"
FontSize="Medium"
BackgroundColor="#ff418b"
FlexLayout.Basis="100"/>
</FlexLayout>
</Frame>
</StackLayout>
</ContentPage.Content>
</ContentPage>
What am I doing wrong and how do I keep my app from breaking when the label updates?
You need to update the text in Main thread:
Device.BeginInvokeOnMainThread (() => {
label.Text = "Async operation completed";
});
Refer: xamarin.forms.device.begininvokeonmainthread

How can I change the color of a Label in a template in the C# back end?

I have this template that's simplified for the question:
<?xml version="1.0" encoding="UTF-8"?>
<Frame xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:t="clr-namespace:Japanese.Templates"
xmlns:local="clr-namespace:Japanese;assembly=Japanese"
x:Class="Japanese.Templates.RoundButtonText" x:Name="this">
<Label Text="ABC" />
</Frame>
and this C#
using Xamarin.Forms;
namespace Japanese.Templates
{
public partial class RoundButtonText : BaseFrameButtonTemplate
{
public RoundButtonText()
{
InitializeComponent();
?? = Color.Red;
}
}
}
Can someone help me by telling me how I can change the TextColor of the label in the XAML inside the constructor of the back-end C#. Note that there's much more to this but I'm simplifying what I need for the question as if I know this then I can do the rest.
Specify x:Name="MyLabel" on the Label you want to access.
Then you can access that Label in your back-end C# file like so:
public RoundButtonText()
{
InitializeComponent();
MyLabel.TextColor = Color.Red; //OR
MyLabel.BackgroundColor = Color.Red;
}
That allows you to be able access any public property on the Label

CustomRenderer not applying

The BackgroundColor property on Xamarin.Forms.Buttons started coloring the entire area assigned to the button instead of just the button, so I started delving into the Custom Renderers in Android to see if I could fix it. The following is the class I created, the .xaml where I use a custom button, and the renderer (it's just supposed to color the button green as a test):
using Xamarin.Forms;
namespace wcsmobile
{
public class wcsButton : Button
{
}
}
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:wcsmobile;assembly=wcsmobile"
x:Class="wcsmobile.Transfer"
Title="Transfer">
<ContentPage.Content>
<StackLayout HorizontalOptions="FillAndExpand">
<local:wcsButton Text="OK" HorizontalOptions="Center"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
[assembly: ExportRenderer(typeof(wcsButton), typeof(ButtonRenderer))]
namespace wcsmobile.Droid
{
class wcsButtonRenderer : ButtonRenderer
{
public wcsButtonRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.SetBackgroundColor(global::Android.Graphics.Color.LightGreen);
}
}
}
}
There is no error, but the button stays gray, not green. Putting a breakpoint at the "base.OnElementChanged(e)" doesn't do anything; the breakpoint never gets hit. Both projects are using Xamarin.Forms version 3.1.0.583944.
Anyone with a clue as to why the Custom Renderer doesn't seem to be applying would be very helpful. (Or even an idea as to why BackgroundColor seemed to stop working in the first place).
As you mentioned "both projects" the answer seems obvious: the renderer from project A isn't applied to project B. You have the choice to move it to appropriate project OR move it to a shared project https://learn.microsoft.com/en-us/xamarin/cross-platform/app-fundamentals/shared-projects?tabs=vswin

MasterDetailPage: Different behaviour on UWP / Android

When using MasterDetailPage in Xamarin.Forms it behaves as aspected in Android. Just like a normal Navigation Drawer. Please notice the correct behaviour of the slide-in mechanism and the correct placement of the hamburger-button. The Buttons in the menu work great as well.
The UWP App looks like this. Notice, there is no hamburger-button:
After klicking on a menu-button, the menu is gone without a possibility to get it back:
Here are some code excerpts:
App.xaml.cs
public partial class App : Application
{
public App()
{
MainPage = new NavigationPage(new MenuPage());
}
...
MenuPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="WordDeck.MenuPage"
xmlns:local="clr-namespace:WordDeck;assembly=WordDeck"
Title="WordDeck."
MasterBehavior="Default">
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<StackLayout Orientation="Vertical">
<Button Text="Neues Spiel"
Clicked="MainPage_Clicked"></Button>
<Button Text="Deck Verwaltung"
Clicked="DeckManager_Clicked"></Button>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<local:MainPage></local:MainPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
MenuPage.xaml.cs
public partial class MenuPage : MasterDetailPage
{
public MenuPage()
{
InitializeComponent();
}
private void MainPage_Clicked(object sender, EventArgs e)
{
Detail = new MainPage();
Title = "WordDeck.";
IsPresented = false;
}
private void DeckManager_Clicked(object sender, EventArgs e)
{
Detail = new DeckManagerPage();
Title = "Deck Verwaltung";
IsPresented = false;
}
}
MainPage and DeckManagerPage are nearly empty and of type ContentPage.
Why is there no menu Button on UWP?
It's because you're running the UWP app as a desktop app and not on the phone. If you run the app on a mobile phone or emulator you should see the menu as on Android.
If you want to use the hamburger behaviour when running as a desktop app set MasterBehavior = MasterBehavior.Popover on your MasterDetailPage
The main problem is the IsPresented on the desktop hides the drawer.
One way to handle this is not to hide on desktop or tablet.
For example...
// Called from each Clicked Event
private void SetPresentedVisability()
{
switch (Device.Idiom)
{
case TargetIdiom.Phone:
IsPresented = false;
break;
case TargetIdiom.Desktop:
case TargetIdiom.Tablet:
case TargetIdiom.Unsupported:
IsPresented = true;
break;
}
}
Alternately you could ignore any non phone IsPresented setting.
IsPresented = (Device.Idiom == TargetIdiom.Phone) ? false : true;

Resources