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>
Related
In my App.xaml file, I have the following static resources defined...
<x:String x:Key="StaticString1">static string 1</x:String>
<x:String x:Key="StaticString2">static string 2 using {StaticResource StaticString1}</x:String>
In the content view (on another page), I want to display StaticString2 and have it automatically pull in StaticString1 but it isn't working.
I want it to say "static string 2 using static string 1" but instead it just shows a literal with the curly braces ("static string 2 using {StaticResource StaticString1}").
Is it possible to do this in static resources or do I need to use a <Label.FormattedText> with <Span>s ?
No, I don't think you can combine two strings in the xaml.
You can use <Label.FormattedText> with <Span> as you mentiond to achieve this:
<ContentPage.Content>
<StackLayout>
<Label >
<Label.FormattedText>
<FormattedString>
<Span TextColor="Black" FontSize="18" Text="{StaticResource StaticString2}"/>
<Span TextColor="Black" FontSize="18" Text=" "/>
<Span TextColor="Black" FontSize="18" Text="{StaticResource StaticString1}"/>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</ContentPage.Content>
And in App.xaml:
<x:String x:Key="StaticString1">static string 1</x:String>
<x:String x:Key="StaticString2">static string 2 using </x:String>
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 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
I'm trying to create a tabView on one of the pages in my application which is reachable by sidebar. I think that I have misunderstood the concept of TabView since I get this message:
Property binding tabItem not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("<Label text="scanner"></Label>
<TabView class="tab">
[ERROR ->]<StackLayout *tabItem="{title: 'Profile'}">
<Label text="first tab item"></Label>
The html code for creating the TabView is working if I paste it in my root html file (app.component.html).
This is how my sidedrawer html code looks like, where the ng-content is where the page is included when selected:
<RadSideDrawer [transition]="sideDrawerTransition" tkExampleTitle tkToggleNavButton>
<StackLayout tkDrawerContent class="sidedrawer-left">
<StackLayout class="extended-sidedrawer-header">
<Label text="Navigation Menu"></Label>
</StackLayout>
<StackLayout class="sidedrawer-content">
<Label text="Map" class="sidedrawer-list-item" [nsRouterLink]="['/map']" (tap)="closeDrawer()"></Label>
<Label text="Beacon" class="sidedrawer-list-item" [nsRouterLink]="['/beacon']" (tap)="closeDrawer()"></Label>
<Label text="Scanner" class="sidedrawer-list-item" [nsRouterLink]="['/scanner']" (tap)="closeDrawer()"></Label>
<Label text="Camera" class="sidedrawer-list-item" [nsRouterLink]="['/camera']" (tap)="closeDrawer()"></Label>
</StackLayout>
</StackLayout>
<ScrollView tkMainContent>
<StackLayout class="page">
<StackLayout (tap)="openDrawer()" horizontalAlignment="left">
<Label class="menu-icon" ></Label>
<Label class="menu-icon" ></Label>
<Label class="menu-icon" ></Label>
</StackLayout>
<ng-content></ng-content>
</StackLayout>
</ScrollView>
</RadSideDrawer>