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
Related
im getting below error while i'm iterate CartItem.
Property or method "item" is
not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
why this error is showing and how can i solve this.
[Note : this is a nativescript vue project]
<ListView
v-for="(item, index) in cartItems"
:key="index"
height="1000"
class="listCard"
>
<v-template>
<GridLayout
rows="auto"
columns="auto,*3,auto"
backgroundColor="white"
class="innerList"
>
<StackLayout orientation="horizontal" col="0" row="0">
<Button>
<FormattedString>
<Label
class="fa fas"
:text="'fa-trash' | fonticon"
fontSize="30"
></Label>
</FormattedString>
</Button>
<Image :src="item.imageUrl" height="80" width="auto"></Image>
</StackLayout>
<StackLayout col="1" row="0">
<Label
:text="item.title"
textWrap="true"
class="font-weight-bold"
color="#333333"
></Label>
<Label :text="item.color" color="#999999"></Label>
<Label :text="'USD ' + item.price" color="red"></Label>
</StackLayout>
<StackLayout orientation="horizontal" col="2" row="0">
<Button
text="-"
#tap="onDecriment(index)"
class="operatorButton operatorBox"
marginRight="0"
/>
<Label
class="operatorLabel operatorBox"
:text="item.quantity">
</Label>
<Button
text="+"
#tap="onIncrement(index)"
class="operatorButton operatorBox"
marginLeft="0"
/>
</StackLayout>
</GridLayout>
</v-template>
</ListView>
I don't see any error in your code but can you try using for instead of v-for. I see in this example, Listview is being using with for.
As per docs: If a v-for is used on a <ListView> a warning will be printed to the console, and it will be converted to the **for** property. you can read more about Listview with for here
<ListView
for="(item, index) in cartItems"
:key="index"
height="1000"
class="listCard"
>
....
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>
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>
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 am using a bel which will have to display the string which is a combination of string and url.
For example:
Refer to this: https://www.google.com/ or https://www.google.com/ watch this.
I need to display entire string in the same label but the URL should be underlined.
How to do that.
use FormattedText
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="First " />
<Span TextDecorations="Underline" Text="http://www.google.com" />
<Span Text=" Third" />
</FormattedString>
</Label.FormattedText>
</Label>