Combining .net Maui WebView and other controlls on same Content Page - webview

Trying to build a content Page with a WebView, DatePicker and button on the same content page. Any time I make the WebView Visible all the other controls become invisible. Have tried many variations but found this layout while googling. Worked for the author but not for me!
Not a lot of info out there on this. Would prefer to use a httpClient but the server I'm hitting requires JavaScript to be enabled. That causes a few issues!
Have tried numerous variations with no luck!
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors"
xmlns:dxco="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls"
xmlns:dxcv="clr-namespace:DevExpress.Maui.CollectionView; assembly=DevExpress.Maui.CollectionView"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:models="clr-namespace:Pcal.Models"
x:Class="Pcal.Views.GetCal"
Title="GetCal">
<VerticalStackLayout Spacing="40" Padding="10" Background="white">
<VerticalStackLayout Spacing="10" >
<dxe:DateEdit x:Name="CalMonth"
PickerActiveViewType="Month"
BackgroundColor="white"
LabelText="Select Month"
LabelFontSize="18"
IsLabelFloating="False"
IsDateIconVisible="True"
ClearIconVisibility="Auto"
Margin="10"
DisplayFormat="MMMyy" UseNativePicker="true"/>
<HorizontalStackLayout HorizontalOptions="Center">
<Button Text="Get Calendar" WidthRequest="380"
HorizontalOptions="Fill"
Clicked="OnClicked"
BackgroundColor="Purple"
TextColor="White"/>
</HorizontalStackLayout>
</VerticalStackLayout>
<WebView Source="https://pilot.fedex.com"
IsVisible="true"
x:Name="PFCWV1"
HorizontalOptions="EndAndExpand"
HeightRequest="320"
WidthRequest="380"
Navigating="WebViewNavigating"/>
</VerticalStackLayout>
</ContentPage>

Related

Xamarin iOS Shell FlyoutMenu not rendering correctly

I am using Shell in my App to handle navigation between views and its FlyoutMenu works perfectly on Android as can be seen here:
Screenshot of FlyoutMenu on Android
However, when I open the Flyout on iOS it looks completely different (and wrong):
Screenshot of FlyoutMenu on iOS
This is the code I have in my AppShell.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CMApp.AppShell"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="Cargomando"
xmlns:pages="clr-namespace:CMApp"
xmlns:resources="clr-namespace:CMApp.Resources"
FlyoutBackgroundColor="LightGray">
<Shell.Resources>
<ResourceDictionary>
</ResourceDictionary>
</Shell.Resources>
<Shell.FlyoutHeader>
<Image Source="cargomando.png"/>
</Shell.FlyoutHeader>
<FlyoutItem Title="{x:Static resources:Tour.TitleString}">
<Tab>
<ShellContent>
<pages:TourList/>
</ShellContent>
</Tab>
</FlyoutItem>
<FlyoutItem Title="{x:Static resources:Settings.TitleString}">
<Tab>
<ShellContent>
<pages:Settings/>
</ShellContent>
</Tab>
</FlyoutItem>
<MenuItem Text="{x:Static resources:Footer.PrivacyProtection}" Command="{Binding PrivacyProtectionCommand}"/>
<MenuItem Text="{x:Static resources:Footer.Imprint}" Command="{Binding ImprintCommand}"/>
<MenuItem Text="DEBUG: Tracking stoppen" Command="{Binding StopTrackingCommand}"/>
</Shell>
What am I doing wrong that it works fine on Android but not on iOS? Thanks!
During creation of a sample application for Lucas Zhang I noticed that the sample application works fine. After comparing my App and the sample after some digging I noticed that the problem is caused by defining a global style for Grid in my ResourceDictionary of my App.xaml. Xamarin apparently uses a Grid for the elements in the FlyoutMenu to which my style with a pretty large HeightRequest gets applied but this seemingly only happens on iOS.

Scrolling in Xamarin Forms SfListView causes NullReferenceException in iOS Main function

I just had a very weird issue in my app.
I was adding Syncfusion's SfListView to some pages in my app and for some reason, if the first thing I do when a page that uses the SfListView loads is scroll the ListView, I get a NullReferenceException...in the UIApplication.Main() function that gets called in the iOS project's Main class. There's nothing special in that class at all, though.
It gets better. If I do something else first, like dragging and dropping the items in the SfListView to reorder them and then I scroll it, it doesn't throw the exception.
What on Earth could be causing this?
Here is the XAML for one of the pages that uses the SfListView:
<?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"
xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
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-->
<syncfusion:SfListView x:Name="EventsListView"
SelectionMode="Single"
SelectionGesture="Tap"
SelectionChanged="OnItemSelected"
DragStartMode="OnHold">
<syncfusion:SfListView.DragDropController>
<syncfusion:DragDropController UpdateSource="True"/>
</syncfusion:SfListView.DragDropController>
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<SwipeView>
<!--Swipe from the right to make some options
appear-->
<SwipeView.RightItems>
<SwipeItems>
<SwipeItem Invoked="OnDelete"
CommandParameter="{Binding .}"
Text="Delete"
BackgroundColor="#ff418b"
IsDestructive="true"/>
<SwipeItem Invoked="OnRename"
CommandParameter="{Binding .}"
Text="Rename"
BackgroundColor="#FF7700"/>
</SwipeItems>
</SwipeView.RightItems>
<!--This is the content that actually appears-->
<StackLayout Padding="20,5">
<Label Text="{Binding EventFolder.Name}"
TextColor="#FF7700"
FontSize="Large"/>
</StackLayout>
</SwipeView>
</ViewCell>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
<!--"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"
HeightRequest="75">
<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="240"/>
<!--The button that opens up a screen
with the rest of the tip-->
<Button Clicked="OnMoreClicked"
Text="More"
TextColor="White"
FontAttributes="Bold"
FontSize="Medium"
BackgroundColor="#ff418b"
FlexLayout.Basis="100"/>
</FlexLayout>
</Frame>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Here is the iOS project's Main class:
using System;
using System.Collections.Generic;
using System.Linq;
using Foundation;
using UIKit;
namespace Partylist.iOS
{
public class Application
{
// This is the main entry point of the application.
static void Main(string[] args)
{
// if you want to use a different Application Delegate class from "AppDelegate"
// you can specify it here.
UIApplication.Main(args, null, "AppDelegate"); // This is the line that throws the exception.
}
}
}
UPDATE: I just applied the SfListView to a couple more pages in my project and I couldn't type into the entries in the items on those pages' lists or use their SwipeViews (the experimental ones in Xamarin, not the ones from the SfListView) without crashing the app in the same way as above.
I just got rid of the Synfcusion ListView and switched back to the one that Xamarin comes with. #BenReierson said it's a problems with Xamarin, so maybe I'll look into switching back when that bug gets fixed.
Glad to inform that the reported issue “NullReferenceException throws when scrolling the SfListView with DragDropController” has been included in Syncfusion's latest Weekly NuGet release update version 18.2.0.46 which is available for download (https://www.nuget.org/).

Hamburger icon not showing on iOS developed by Prism for Xamarin.Forms

Below is my XAML page for my MasterDetailPage:
<MasterDetailPage 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"
xmlns:b="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"
mc:Ignorable="d"
x:Class="JapaneseLearnPrism.Views.MenuPage">
<MasterDetailPage.Master>
<NavigationPage Title="Menu" Icon="ic_hamburger.png">
<x:Arguments>
<ContentPage Title="{Binding Title}">
<!--Content for my menus here.-->
</ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Master>
</MasterDetailPage>
And this is how I set up the Page Path for Prism:
protected override async void OnInitialized()
{
InitializeComponent();
Xamarin.Forms.PlatformConfiguration.AndroidSpecific.Application.SetWindowSoftInputModeAdjust(this, Xamarin.Forms.PlatformConfiguration.AndroidSpecific.WindowSoftInputModeAdjust.Resize);
// await NavigationService.NavigateAsync("NavigationPage/MainPage");
await NavigationService.NavigateAsync(nameof(MenuPage) + "/" + nameof(NavigationPage) + "/" + nameof(Views.MainPage));
}
This is works fine for the MD page function. And the hamburger icon is correctly showing in Android but not iOS. I am wondering why. I searched online everyone but actually nothing solved.
Hope be able to get the answer here.
Thanks.
Use IconImageSource inside MasterDetailPage to display HamburgerIcon as far as Android is concern it uses it's default hamburger Icon that's why it is showing in Android and not in iOS.
<MasterDetailPage 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"
xmlns:b="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"
mc:Ignorable="d"
IconImageSource="ic_hamburger.png"
x:Class="JapaneseLearnPrism.Views.MenuPage">

Banner not shown

I started to use advertising control, but I'm going crazy trying to let it work.
I copied PivotPage.xaml from Microsoft Ad Control Sample and made it the starting page in my app, but ad control is not shown (I'm not able to see banner); if I try to run Microsoft app, banner is shown.
So I registered my app on pubCenter and I got an appId and a unitId and tried to use them in my app, but the result is the same: no banner!!
If I try to use my ids in Microsoft app, test banner is shown.
Why using Microsoft example I'm able to see banner and using same page in my app I can't?
Why using my ids, Microsoft app does not show correct banner?
Here is XAML
<!--Pivot Control-->
<controls:Pivot Grid.Row="0" Title="Ad Control Sample">
<!--Pivot item one-->
<controls:PivotItem Header="piv 1">
</controls:PivotItem>
<!--Pivot item two-->
<controls:PivotItem Header="piv 2">
</controls:PivotItem>
<!--Pivot item three-->
<controls:PivotItem Header="piv 3">
</controls:PivotItem>
</controls:Pivot>
<StackPanel Grid.Row="1" VerticalAlignment="Bottom" >
<TextBlock Text="This is the same ad."
TextWrapping="Wrap"
HorizontalAlignment="Stretch"
TextAlignment="Center" />
<my:AdControl Name="adControl1"
ApplicationId="test_client"
AdUnitId="Image480_80"
HorizontalAlignment="Center"
Width="480" Height="80" />
</StackPanel>
I finally managed to solve my problem and I want to share solution.
I add an event handler for ErrorOccurred on ad control and reading Microsoft.Advertising.AdErrorEventArgs e I realized that my manifest (WMAppManifest.xml) was missing
<Capability Name="ID_CAP_IDENTITY_USER" />
<Capability Name="ID_CAP_MEDIALIB" />
<Capability Name="ID_CAP_WEBBROWSERCOMPONENT" />

Custom onsynctopreference for XUL textbox

I wanted to enable custom shortcuts in my Firefox extension. The idea is that the user just focuses on a textbox, presses key combination, and it's shown in the textbox and saved to a preference. However, I couldn't get it to work. With this XUL
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://mozapps/skin/pref/pref.css" type="text/css"?>
<!DOCTYPE window SYSTEM "chrome://nextplease/locale/nextplease.dtd">
<prefwindow id="nextpleaseprefs" title="&options.title;" buttons="accept, cancel"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<prefpane id="nextplease.general" label="&options.general.title;" image="chrome://nextplease/skin/Sound Mixer.png">
<preferences>
<preference id="nextkey" name="nextplease.nextkey" type="int"/>
</preferences>
<vbox flex="1">
<hbox align="center">
<label value="&options.general.nextKey;" />
<textbox id="nextkey" flex="1" editable="false"
onkeyup="return nextplease.handleKeySelection(this, event);"
preference-editable="true" preference="nextkey"
onsynctopreference="alert('syncing'); return nextplease.syncKeySelector(this);"/>
</hbox>
</vbox>
</prefpane>
<script type="application/x-javascript" src="chrome://nextplease/content/nextpleaseCommon.js" />
<script type="application/x-javascript" src="chrome://nextplease/content/nextpleaseOptions.js" />
</prefwindow>
the event in onkeyup works. But when I click the OK button, I don't see a "syncing" alert. Why isn't onsynctopreference working? Is it impossible to have custom onsynctopreference attribute for a textbox?
It seems the problem was simply that preferences are only synchronized on input event (and maybe some others), but not on keyup.

Resources