Xamarin Forms - Html2Xaml converter issue with span TapGestureRecognizer command - xaml

I'm trying to convert custom html text in FormattedString xaml for any label. There, I have an <a/> tag where it will convert to an span with TapGestureRecognizer:
<xsl:template match="A | a" priority="9">
<Span TextDecorations="Underline">
<xsl:attribute name="Text">
<xsl:apply-templates />
</xsl:attribute>
<Span.GestureRecognizers>
<TapGestureRecognizer Command="{{Binding PopupContentCommand}}">
<xsl:attribute name="CommandParameter">
<xsl:value-of select="#href" />
</xsl:attribute>
</TapGestureRecognizer>
</Span.GestureRecognizers>
</Span>
</xsl:template>
The converter is working well, the issue is that this command binding is not raising. When we load new FormattedString().LoadFromXaml(xaml) the converted html to xaml, the command appears to have binding:
But this binding is not raising. After that I try to Clear the GestureRecognizers and create an new TapGestureRecognizer adding it again. But this didn't work neither. The BindingContext appears to be the correct one too.
This is done by binding an attached property:
<Label attachedProperties:Properties.Html="{Binding HtmlText}" />

Finally it was a simulator issue. Because in the real devices this raise without problem.

Related

How can I navigate the blazor pages with the press of a xaml button?

So here is my generally idea:
I have a flyout page in which i want to press different buttons to load different blazor pages in the flyout.details. The goal is to replace the default navbar of the blazor example with native elements of the different frameworks in the .NET MAUI XAML. (Image) My first thought was accessing the navigationManager of the blazor pages but no idea how. Does that even makes sense? I feel like I am missing sth very crucial because it seems to be a very natural thing to do with .net Maui Blazor.
Important to understand is that i want to stay on the same xaml page. I just want to change the loaded Blazor page without the need to define the nav at in the Blazor page.
I tried to access it via injection,
which kinda confused me but tried it any ways (got it from a forum). I feel like I am not understanding something fundamental.
XAML:
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiTest"
x:Class="MauiTest.MainPage"
BackgroundColor="{DynamicResource PageBackgroundColor}">
<FlyoutPage.Flyout>
<ContentPage Title="FlyoutMenu">
<VerticalStackLayout>
<Label x:Name="TestLabel"
Text="Welcome to .NET MAUI!"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Button Text="Counter" Clicked="OnCounterClicked" x:Name="Counter" />
<Button Text="Test" Clicked="OnTestButtonClicked" x:Name="TestButton"/>
<WebView BackgroundColor="red" Source="http://0.0.0.0/app/counter" />
</VerticalStackLayout>
</ContentPage>
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<ContentPage>
<BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
</BlazorWebView.RootComponents>
</BlazorWebView>
</ContentPage>
</FlyoutPage.Detail>
For the methode behind it I don't really have any idea...
C#:
private void OnTestButtonClicked(object sender, EventArgs e)
{
//Navigating to a site
}
Don't let yourself irritate from the other buttons: I am playing around.
To replace the nav bar
Maui Blazor have designed the structure for us. The easiest way i think is to modify it.
The NavMenu.razor (default blazor template) define the appearance and structure of the navigation bar. You could modify it.
<div class="sidebar">
<NavMenu />
</div>
Another way is that you do it like .net maui FlyoutPage. In MainPage
<FlyoutPage.Flyout>
<MauiPages:FlyoutMenuPage x:Name="flyoutPage" />
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<local:ContactsPage />
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
I have tested it and it worked well just like the official docs.
For more info, you could refer to FlyoutPage and for sample code Xamarin flyout doc could be help
2.I don't think we could navigate from a maui page to razor component as their route ways are much different. For a walkaround, you could wrap razor component in a maui contentpage.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiBlazor"
>
<BlazorWebView HostPage="wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
</BlazorWebView.RootComponents>
</BlazorWebView>
</ContentPage>
And then use maui navigation:
App.Current.MainPage.Navigation.PushAsync(new MauiPages.MyPage());
========origin answer============
Seems you want to close the sidebar created by Blazor. That's MainLayout.razor in Shared folder. You could simply remove the following line:
<div class="sidebar">
<NavMenu />
</div>
Then the default sidebar would disappear.
if you want navigate, you could try the following:
App.Current.MainPage.Navigation.PushAsync(new MauiPages.MyPage());
Hope it works for you.

XSL - Check if select has no text nodes then show "Not Results"

How can I check if my block/select has no text nodes then show "Not Results"
<xsl:choose>
<xsl:when test="#pass='0' or #pass='1'">
<fo:block padding-top="1cm" font-weight="bold" margin-bottom="0.2cm">Header</fo:block> <fo:block margin-top="0.2cm" margin-bottom="0.2cm" border-bottom="1px solid #e1e1e1">
</fo:block>
<fo:block margin-top="0.2cm" margin-bottom="0.2cm" padding-left="5px" padding-right="5px" padding-top="1px">
<xsl:apply-templates select="detail/katalog/frage[#ko='1' and #passed='0']" />
<xsl:apply-templates select="detail/katalog/frage/options" />
<xsl:apply-templates select="detail/katalog/matrix/frage/options" />
<xsl:apply-templates select="detail/katalog/clusterArea/clusterFrage[#ko='1' and #passed='0']" />
</fo:block>
I tried this, but it doesn't work.
<xsl:if test="(not(detail/katalog/frage[#ko='1' and #passed='0']) and not(detail/katalog/clusterArea/clusterFrage[#ko='1' and #passed='0']) and not(detail/katalog/frage/options) and not(detail/katalog/matrix/frage/options))">
<fo:block>
Not Results
</fo:block>
</xsl:if>
Thanks a lot!
PR
If the elements you are checking exist, but your current check detail/katalog/frage[#ko='1' and #passed='0'] for example will return true, as that is just checking for the existence of the element itself, regardless of whether it has child nodes or not
So, you want to do something like this....
not(detail/katalog/frage[#ko='1' and #passed='0']/text())
However, you also need to watch out for whitespace only nodes, so you might want to augment the check like so...
not(detail/katalog/frage[#ko='1' and #passed='0']/text()[normalize-space()])
Alternatively, you could strip out whitespace only nodes by using xsl:strip-space
<xsl:strip-space elements="*" />

Specify a RGB color in XAML with Xamarin

I'm creating some application styles in my app and want to define some explicit colors to use by key. In WPF XAML, I would create a SolidColorBrush to define the RGB/ARGB values. In Xamarin XAML, do I need to convert this to hex to define the same color in XAML? The snippet below is from WPF XAML.
<SolidColorBrush
x:Key="blueColor">
<SolidColorBrush.Color>
<Color
A="255"
R="50"
G="150"
B="225" />
</SolidColorBrush.Color>
</SolidColorBrush>
Xamarin.Forms provides a cross-platform Color class.
Using from Xaml:
Colors can also be easily referenced in Xaml using the defined color names or the Hex representations shown here:
<Label Text="Sea color" BackgroundColor="Aqua" />
<Label Text="RGB" BackgroundColor="#00FF00" />
<Label Text="Alpha plus RGB" BackgroundColor="#CC00FF00" />
<Label Text="Tiny RGB" BackgroundColor="#0F0" />
<Label Text="Tiny Alpha plus RGB" BackgroundColor="#C0F0" />
The Color class provides a number of methods to build a color instance
Named Colors - a collection of common named-colors, including Red , Green , and Blue .
FromHex - string value similar to the syntax used in HTML, eg "00FF00".
Alpha is can optionally be specified as the first pair of characters ("CC00FF00").
FromHsla - Hue, saturation and luminosity double values, with optional alpha value (0.0-1.0).
FromRgb - Red, green, and blue int values (0-255).
FromRgba - Red, green, blue, and alpha int values (0-255).
FromUint - set a single double value representing argb .
Ref: Using Colors in Xamarin.Forms
According to Xamarin's WorkingWithColors sample, you can do something like this:
<Color
x:Key="BlueColor">
<x:Arguments>
<x:Double>.4</x:Double> <!-- R/255 -->
<x:Double>.62</x:Double> <!-- G/255 -->
<x:Double>.95</x:Double> <!-- B/255 -->
<x:Double>.2</x:Double> <!-- A: 0.0-1.0 -->
</x:Arguments>
</Color>
Their example doesn't show the use of the alpha channel, but I just tested it and as of May 30th, 2017, it seems to work just fine.
However, be aware that this doesn't seem to be documented. The Xamarin.Forms "Colors" guide, which goes with the code above, doesn't mention it either, so this may change without notice.
In direct answer to the question, you cannot specify a x:FactoryMethod="FromRgb" in xaml for specifying colours in RGB from resources. In order to work around this you must specify colours using the 'FromHex' approach and converting as appropriate e.g.
<Color x:Key="somethingGreenish" x:FactoryMethod="FromHex">
<x:Arguments>
<x:String>#97cd75</x:String>
</x:Arguments>
</Color>
<?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="ListViewDemo.MainPage"
Title="BoxView using Color in XAML">
<StackLayout>
<Label Text="My Box View" FontSize="Large" BackgroundColor="LightBlue" />
<BoxView HeightRequest="50" WidthRequest="50" HorizontalOptions="Center">
<BoxView.Color>
<Color x:FactoryMethod="FromRgb">
<x:Arguments>
<x:Int32>192</x:Int32>
<x:Int32>75</x:Int32>
<x:Int32>150</x:Int32>
</x:Arguments>
</Color>
</BoxView.Color>
</BoxView>
</StackLayout>

show pdf file in a icefaces modalpopup

Is it possible to show a pdf file in modalpopup with icefaces. Tried this but does not seem to work. Am new to icefaces too.
<ice:panelPopup autoCentre="true" visible="#{popup.visible}" modal="true">
<f:facet name="header"/>
<f:facet name="body">
<OBJECT DATA="/ICEfacesDevelopersGuide.pdf" TYPE="application/pdf" WIDTH="100%" HEIGHT="100%" />
<ice:commandButton value="Close" action="#{popup.close}" />
</f:facet>
</ice:panelPopup>
I ended up doing it the old way opening it on a new window or tab using output link and target attribute.

Easier way to center a label in Xul

Is there an easier way to center a label in Xul then with the following?
<xul:hbox>
<xul:spacer flex="1" />
<xul:label id="myLabel" value="LABEL"/>
<xul:spacer flex="1" />
</xul:hbox>
Yes. Use box packing via the pack attribute.
<hbox pack="center"><label id="myLabel" value="LABEL"/></hbox.
Two alternative ways which also work with multiline labels:
Use <label style="text-align: center"/>
Use <vbox align="center"><label/></vbox>