I hope you can help me to solve my problem.
I am working on a Nativescript-Vue Application and I want to render this conditionally:
<Label if="isRendering" text="This is a text"></Label>
But this does not work.
I already tried it with <v-template if="..."></v-template> but this also does not work.
If i am not mistaken, in Vue.js it is possible to render conditionally with v-if and i am searching for a possibility to make it in Nativescript-Vue.
Thank you
It's the same like in Vue.js.
Instead of using if you should be using v-if.
Playground example
Example:
<Label v-if="isRendering" text="This is a text"></Label>
But if you want to use an if in a ListView it's different.
Example:
<ListView for="item in listOfItems" #itemTap="onItemTap">
<v-template>
<Label :text="item.text" />
</v-template>
<v-template if="$odd">
<!-- For items with an odd index, shows the label in red. -->
<Label :text="item.text" color="red" />
</v-template>
</ListView>
But more info about that in the docs
Related
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.
I have a simple (Android) application in Xamarin.
Until now, it uses a single language, now I add a translation for a second language. I use resource .resx files and I use it in XAML like this:
<Span Text="{x:Static resource:AppResources.Text1}" />
where Text1 is loaded from a resource file (depend on language).
I don't know how to do a similar thing in the next line, where I use Binding and StringFormat:
<Label Text="{Binding Datum, StringFormat='Some text: {0}'}" />
I tried with:
<Label Text="{Binding Datum, StringFormat='{x:Static resource:AppResources.Text2} {0}'}" />
but it didn't work.
Any idea?
use Spans to combine data and text
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="{x:Static resource:AppResources.Text1}" />
<Span Text="{Binding Datum}" />
</FormattedString>
</Label.FormattedText>
</Label>
Default Emojis are working fine in my Xamarin.Forms app and it's colorful. When I add Twitter color fonts its become B/W (black-white). This Procedure I followed.
Initialization
[assembly: ExportFont( "TwitterColorEmoji.ttf", Alias = "TwitterColorEmoji" )]
Here is the example code in xaml
<!-- This is not working -->
<Label x:Name="emojilbl" Text="\U+1F1E9" Margin="20,0,0,0"></Label>
<Label
x:Name="emoji2lbl"
Text="🇦🇨"
Margin="20,0,0,0"
TextColor="#5EE514"
FontSize="40"
FontFamily="TwitterColorEmoji"></Label>
<!-- This is not working -->
<Image BackgroundColor="Black">
<Image.Source>
<FontImageSource
FontFamily="TwitterColorEmoji"
Glyph="🇦🇨"
Size="40"
>
</FontImageSource>
</Image.Source>
</Image>
<!-- This is working fine with default font -->
<Label Text="🇦🇨" Margin="20,0,0,0" FontSize="40"/>
Why emoji is not showing its own color.
Thank for the help in advanced.
Solved issue by changing "Embedded resource" to "Resource" option.
In a Xamarin.Forms project, I need to concatenate a Localized String value with a binding of a string property,
I want to achieve something like,
<Label Text="{Binding Name}",
StringFormat='Created By {0}' />
but Created By string should come from,
LocalizedStrings.CreatedBy
How can I achieve this?
in the xaml, add a name to reference the label,
<Label x:Name="myLabel" />
in the code-behind,
myLabel.SetBinding(
Label.TextProperty,
new Binding(nameof(MyModal.Name), stringFormat: $"{LocalizedStrings.CreatedBy} {{0}}"));
this way we can format the binding string properties with variable values.
Alternative Approach:
You can also use FormattedText property of the Label as follows, however this is not an optimized approach.
Import LocalizedStrings to xmlns:Resources, then,
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="{x:Static Resources:LocalizedStrings.CreatedBy}" />
<Span Text="{Binding Name, StringFormat=' {0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
It's achievable by using the ForamttedText Property of Label. MS Docs link
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="{x:Static Resources:LocalizedStrings.CreatedBy}" />
<Span Text="{Binding Name, StringFormat=' {0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
where Resources is an import for LocalizedStrings
I have a list of data and when it renders, it's rendering on top of each other. The data is a fairly long list of objects and I am using multiple fields. I made a playground example by reducing the data list size and only using field (display_name) and it's still happening.
It seems to happen in random spots of the list but I am unsure as to how to resolve or more importantly, why it's happening. I thought it may have had to do with my key not being unique but I made sure it was and it's still happening. I included a playground and added screenshots. Any ideas?
Playground
Screenshots
EDIT: (Adding Template)
<RadListView
for="(movie,index) in this.movies"
ref="listView"
#loaded="onListLoaded($event)"
#itemTap="onItemTap($event)"
itemHeight="50"
:key="index"
gridSpanCount=1
>
<v-template>
<FlexboxLayout class="item-row" :key='`flex` + index' flexDirection="row" width="100%" height="100%" justifyContent="space-between">
<Stacklayout orientation="horizontal">
<Image :key='`img-flag` + index' marginTop="-22" class="flag-image" marginBottom="-22" :src="movie.image" height="100%" />
<Label :key='`display-name` + index' :text="movie.display_name" />
</Stacklayout>
<Image :key='`heart-1` + index' #tap="handleToggleFavorite(movie)" width="20" :src="movie.favorite ? heartFilled : heartUnfilled" />
</FlexboxLayout>
</v-template>
</RadListView>
Looking at your mockup, I think you can achieve it with a simple GridLayout.
<v-template>
<GridLayout columns="auto,*,auto" class="list-group-item">
<Image col="0" :src="movie.image"
class="m-5 thumb img-circle">
</Image>
<Label col="1" :text="movie.display_name"></Label>
<Image col="2" src="path_to_icon" class="thumb">
</Image>
</GridLayout>
</v-template>