Xamarin Forms - Translating drawer menu items at runtime

JaserJsk

Member
Joined
Nov 9, 2021
Messages
6
Programming Experience
1-3
I'm following the exelent tutorial Link on Multilingual in Xamarin.Forms

Everything is working well but I have one issue.

In my application I'm using Navigation drawer by Syncfusion as I'm generating the menu Items in a ListView as seen below.

MainPage.xaml
XML:
<ListView x:Name="listView"
          SelectionMode="Single"
          RowHeight="70"
          ItemSelected="listView_ItemSelected"
          SeparatorColor="Transparent"
          BackgroundColor="{DynamicResource Gray-ListView-Bg}">
    <ListView.ItemTemplate>
        <DataTemplate x:Name="dataTemplate">
            <ViewCell x:Name="cellName">
                <StackLayout Margin="32,10,0,0"
                             VerticalOptions="Center">
                    <Grid RowDefinitions="1*, Auto">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50"/>
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Row="0"
                               Grid.Column="0"
                               HorizontalTextAlignment="Start"
                               HorizontalOptions="Start"
                               FontSize="25"
                               TextColor="{DynamicResource Gray-900}"
                               Text="{Binding ItemIcon}"
                               FontFamily="Material-Outlined"
                               Style="{StaticResource IconLabelStyle}"/>
                       
                        <Label Grid.Row="0"
                               Grid.Column="1"
                               Margin="10,0,0,0"
                               FontSize="16"
                               TextColor="{DynamicResource Gray-900}"
                               Text="{Binding ItemName}"
                               FontFamily="Material"
                               HorizontalTextAlignment="Start"
                               HorizontalOptions="Start"/>
                    </Grid>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

MainPage.cs
C#:
private void drawerNavItems()
{
    List<MenuItem> itemList = new List<MenuItem>();
    itemList.Add(new MenuItem { ItemIcon = IconFont.LocationOn, ItemName = Lang.Map });
    itemList.Add(new MenuItem { ItemIcon = IconFont.Report, ItemName = Lang.ErrorReport });
    itemList.Add(new MenuItem { ItemIcon = IconFont.Settings, ItemName = Lang.Settings });
    listView.ItemsSource = itemList;
}



The issue I'm having is that I don't understand how I'm supposed to use the helper class in the tutorial link above to translate the drawer menu items.

The line below is not working

XML:
Text="{helpers:Translate Binding ItemName}"


Look at the attached images and you can see that the language in Settings page is set to (English) but the drawer menu items are not being translated.
 

Attachments

  • 2021-11-09_02-43-55-.png
    2021-11-09_02-43-55-.png
    188.4 KB · Views: 20
  • 2021-11-09_02-44-04-.png
    2021-11-09_02-44-04-.png
    249 KB · Views: 18
Last edited:
<tongue-in-cheek>Must not be that excellent of a multilingual tutorial if it missed that key point of how to do the translations.</tongue-in-cheek>
 
Have you set breakpoint in the translation helper? Is it being called?
 
Have you set breakpoint in the translation helper? Is it being called?

The line below works just fine
XML:
Text="{Binding ItemName}"

Usually I can translate any string text I want in Xaml just by writing it like this
YAML:
Text="{helpers:Translate AppName}"

And it works just fine

But as you can imagine it will NOT translate at runtime
when I'm trying to translate the menu items when I try to call it like this
XML:
Text="{helpers:Translate Binding ItemName}"

It is not outputting anything

So I'm really lost on how to make this work
 
You still did not answer the question: if you set breakpoints on the translation helper, is it being called?

Anyway the tutorial shows
Text="{helpers:Translate SelectLanguage}", but you are trying to do
Text="{helpers:Translate Binding SelectLanguage}". Where did the Binding come from?
 
You still did not answer the question: if you set breakpoints on the translation helper, is it being called?

Anyway the tutorial shows
Text="{helpers:Translate SelectLanguage}", but you are trying to do
Text="{helpers:Translate Binding SelectLanguage}". Where did the Binding come from?
You asked where Binding came from...
If you take a look at the code I posted, then you would see that I'm using Binding to fetch the Item names from the list in the code behind. I'm doing the same to fetch the icons from the list, but I m not trying to translate the icons I can just leave that as

Text="{Binding ItemIcon}"

And it works fine.

On the second question, no I did not test with w breakpoint, I will do that and get back to you
 
What happens when you try: Text="{helpers:Translate ItemName}" or
Text="{helpers:Translate Text={Binding ItemName}}" ?
 
What happens when you try: Text="{helpers:Translate ItemName}" or
Text="{helpers:Translate Text={Binding ItemName}}" ?
When I try
XML:
Text="{helpers:Translate ItemName}"
There is no output
Nothing is displayed on the screen

And when I try
XML:
Text="{helpers:Translate Text={Binding ItemName}}"

I get the error - "
Severity Code Description Project File Line Suppression State
Error XFC0009 No property, BindableProperty, or event found for "Text", or mismatching type between value and property.
"
 
The breakpoint not being hit would suggest that the markup helper is not even being called.

I'm kind of surprised about the XFC0009 error. My reading of the markup helper code she presented was that it exposed a Text bindable property.
 
The breakpoint not being hit would suggest that the markup helper is not even being called.

I'm kind of surprised about the XFC0009 error. My reading of the markup helper code she presented was that it exposed a Text bindable property.
Is it even possible to put breakpoints in Xaml files or is breakpoints just for C# code
 
I vaguely recall that you can set breakpoints in the C# code generated when the XAML get compiled, but I forget how to get to that point of accessing the generated code. But yes, in general, you can only (easily) set breakpoints in the C# code.

As I recall there is also something like a XAML binding debugger. (I wouldn't be surprised if that same MVP who made that tutorial may have written about debugging bindings as well.) Basically you want to see how that [ICODE}{helpers:Translate Binding ItemName}[/ICODE] is being interpreted. Is there anything showing up in the debug or output panes of Visual Studio if you run your code in the emulator instead of on the device?
 
Back
Top Bottom