locked
Localizing App bar button text RRS feed

  • Question

  • Hi All

    I have a custom app bar button with following style defined :

    <Style x:Key="ChangePinAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
            <Setter Property="AutomationProperties.AutomationId" Value="ChangePinAppBarButton"/>
            <Setter Property="AutomationProperties.Name" Value="Change Pin"/>
            <Setter Property="Content" Value="&#xE0A8;"/>
     </Style>

    My Requirement is to localize the button name property value "Change Pin".

    Any help would be appreciated. Buttons are defined in the XAML file currently. Wont mind changing to code to generate them in code (c# code behind file). But do let me know if its possible to do it in XAML itself.

    Thanks in Advance!

    Friday, October 11, 2013 7:30 PM

All replies

  • You would not localize in the style, but rather in the use of the button.  The easiest way is to use the x:Uid approach.  Look at the application resources SDK sample. http://code.msdn.microsoft.com/windowsapps/Application-resources-and-cd0c6eaa


    Tim Heuer | Program Manager, UI Platforms (XAML, WinJS) | http://timheuer.com/blog | @timheuer | Callisto - XAML UI Toolkit

    (if my post has answered your question, please consider using the *mark as answer* feature in the forums to help others)

    Friday, October 11, 2013 9:46 PM
  • Thanks Tim.

    Someone also suggested me to use something like :

    In resource file use below key:

    FavoriteButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name

    FavoriteButton is the x:uid of the button

    But since i'm creating these buttons from code I cannot set the x:Uid in the .cs file. (Creating them is XAML and binding them to commands presented a few issues with hiding them completely when not required - a P1 requirement for us :) )

    Also since im using a glyph as content of the button, I cannot use the content property to display text.  I'll have to set the AutomationProperties.Name somehow form the code behind.

    I'm stuck completely at this point.


    Vinayak Bhosale

    Monday, October 14, 2013 6:34 PM
  • No problem. If you have your localized string in the RESW file you can assign a key to it "ChangePinText" (for example) then when you create the button, use SetValue:

    ResourceLoader rl = new ResourceLoader();
                string localizedLabel = rl.GetString("ChangePinText");
                AppBarButton b = new AppBarButton();
                b.SetValue(AppBarButton.LabelProperty, localizedLabel);
                foo.Children.Add(b);

    Keep in mind that you should set the Label property and that is what gets set as the AutomationProperties.Name value via template binding so you could remove that from your style.  In fact if you are creating these in code, then setting a style actually isn't going to add much value, just use SetValue to set the label, Icon and AutomationId (which should be unique btw and using it this way you aren't having a unique one)


    Tim Heuer | Program Manager, UI Platforms (XAML, WinJS) | http://timheuer.com/blog | @timheuer | Callisto - XAML UI Toolkit

    (if my post has answered your question, please consider using the *mark as answer* feature in the forums to help others)

    Monday, October 14, 2013 11:01 PM
  • I tried your suggestion as below removing <Setter Property="AutomationProperties.Name" Value="Change Pin"/> from my style without luck :

    _btnRenew.SetValue(AppBarButton.LabelProperty, "Renew From Code");

    AND

    _btnRenew.SetValue(AppBarButton.NameProperty, "Renew From Code");

    button just showed up without any text. Is this an unsolved problem? I referred the localization sample available for 8.1 but even that app does not cover scenario of app bar button text localization.


    Vinayak Bhosale

    Tuesday, October 15, 2013 9:34 PM
  • Here is a sample project where I did this and is working for me.

    http://sdrv.ms/H2gAtf


    Tim Heuer | Program Manager, UI Platforms (XAML, WinJS) | http://timheuer.com/blog | @timheuer | Callisto - XAML UI Toolkit

    (if my post has answered your question, please consider using the *mark as answer* feature in the forums to help others)

    Tuesday, October 15, 2013 10:16 PM
  • Thanks Tim, I finally got this working.

    There was one thing missing from the sample you shared. The button which was created in the code didn't had any glyphs/icons associated. In my app I was using style to do so. Style which I used was :

    <Style x:Key="ChangePinAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
            <Setter Property="AutomationProperties.AutomationId" Value="ChangePinAppBarButton"/>
            <Setter Property="AutomationProperties.Name" Value="Change Pin"/>
            <Setter Property="Content" Value="&#xE0A8;"/>
     </Style>

    Despite of removing the AutomationProperties.Name from style and setting it in code, things didn't work.

    FIX: Had to get rid of the style completly. I replaced the style and set the icon property in code as below :

    _btnRenew.Icon = new SymbolIcon(Symbol.Rotate);
    _btnRenew.SetValue(AppBarButton.LabelProperty, "Localized text");

    Conclusion : Looks like we cannot uses styles to partially initialize a UI element. Its all or none ?

    Thanks!


    Vinayak Bhosale

    Thursday, October 17, 2013 4:47 AM