ListPicker in windows phone with localization strings

Question

I'm using Toolkit ListPicker in my Windows Phone 8 project and have begun localising it. I've run into a problem because i can't figure out how to do this with a ListPicker.

<toolkit:ListPicker x:Name="lstClubsPick" 
                    FontSize="30" 
                    Grid.Column="1"  
                    VerticalAlignment="Center" 
                    SelectionMode="Single"
                    HorizontalAlignment="Center"  
                    SelectedIndex="{Binding KolleSelectedIndex, Mode=TwoWay}"
                    CacheMode="BitmapCache" 
                    ExpansionMode="FullScreenOnly" >

<toolkit:ListPickerItem Content="{Binding Path=LocalizedResources.chooseClub, Source={StaticResource LocalizedStrings}}"/>
<sys:String>Choose</sys:String>
<sys:String>D1</sys:String>
<sys:String>D2</sys:String>
<sys:String>D3</sys:String>
<sys:String>D4</sys:String>
<i:Interaction.Triggers>
    <i:EventTrigger EventName="Tap">
        <cal:ActionMessage MethodName="ClubClicked">
            <cal:Parameter Value="{Binding ElementName=lstPivot,Path=SelectedItem, Mode=TwoWay}"></cal:Parameter>
            <cal:Parameter Value="{Binding ElementName=lstClubsPick,Path=SelectedItem, Mode=TwoWay}"></cal:Parameter>
        </cal:ActionMessage>
    </i:EventTrigger>
</i:Interaction.Triggers>

So the problem I'm facing is that i don't know how to get <sys:String>Choose</sys:String> to look for a string in my AppResources.resx. I've tried this:

<toolkit:ListPickerItem Content="{Binding Path=LocalizedResources.chooseClub, Source={StaticResource LocalizedStrings}}"/>

instead of the <sys:string> but that makes my app crash. I've searched google and that was the only possible solution i could find. Anyone able to help me? Would be much appreciated.

EDIT 1: So I've updated my code with the solution from andreask but my ListPicker is not responding to the string i add in my viewModel.

private ObservableCollection<string> _data;

public ObservableCollection<string> Data
{
    get
    {
        return _data;
    }
    set { 
        _data = value; 
        NotifyOfPropertyChange(() => Data); 
    }
}

Data = new ObservableCollection<string>();
Data.Add("Test");

<toolkit:ListPicker x:Name="lstClubsPick" FontSize="30" Grid.Column="1"  VerticalAlignment="Center" SelectionMode="Single" HorizontalAlignment="Center" ItemsSource="{Binding Data}" SelectedIndex="{Binding KolleSelectedIndex, Mode=TwoWay}" CacheMode="BitmapCache" ExpansionMode="FullScreenOnly">

Anything I'm doing wrong?

EDIT 2: Thanks a lot for your answers you definitely pointed me in the right direction. I found a solution to my problem i binded my Pivot view's ItemsSource and from that i could in me view model add an ObservableCollection<string> then i could run this code again from my view model LstItems[PivotSelectedIndex].Data = new ObservableCollection<string>(items); where items is an string array. So in my String array i could make a string using the app resource with AppResources.YourResourceName.

Answer 1

You can set the items in code, In XAML have your normal ListPicker like this.

<toolkit:ListPicker x:Name="lstClubsPick" 
                    FontSize="30" 
                    Grid.Column="1"  
                    VerticalAlignment="Center" 
                    SelectionMode="Single"
                    HorizontalAlignment="Center"                                   
                    CacheMode="BitmapCache" 
                    SelectedIndex="{Binding KolleSelectedIndex, Mode=TwoWay}"
                    ExpansionMode="FullScreenOnly" />

Then in the C# code create a List and add the localized strings to it like this. And set the list as the ItemsSource of the ListPicker.

public MainPage()
{
    InitializeComponent();

    List<string> items = new List<string>();
    items.Add(AppResources.OptionOne);
    items.Add(AppResources.OptionTwo);
    items.Add(AppResources.OptionThree);
    items.Add(AppResources.OptionFour);
    items.Add(AppResources.OptionFive);

    lstClubsPick.ItemsSource = items;
}

you should be good to go. Hope it helps

Answer 2

I don't think it's a localization issue, but a problem with the ListPicker itself. I know by experience that setting ExpansionMode to FullScreen doesn't work when specifying the list items in XAML. Try removing the ExpansionMode property from the ListPicker declaration, does it work now?

If yes, I'm afraid the only option you've got is to declare the list of items in your viewmodel, e.g. as ObservableCollection<string>, and bind it like:

    <toolkit:ListPicker ItemsSource="{Binding Items}" ...

In this case, ExpansionMode="FullScreen" works like a charm, don't ask me why...

If you really want to stick with the list of items declared in XAML code, you'll have to get rid of the ExpansionMode property somehow. In the past you could have used the ItemCountThreshold property: This one controls whether the picker opens in full screen mode (if it contains more items than specified as ItemCountThreshold) or not - set it to 0 to force full screen mode. Unfortunately, this property is not supported any more in current Toolkit versions, and the workarounds discussed in this similar question don't work for me either.

Answer 3

try this..there are two ways..u can do it only using xaml like following code..

<toolkit:ListPicker x:Name="listStatic" Grid.Row="1"  VerticalAlignment="Top"                          HorizontalAlignment="Stretch" FullModeHeader="Choose the Mode">
                    <system:String>abc</system:String>
                    <system:String>abc</system:String>
                    <system:String>abc</system:String>
                    <system:String>abc</system:String>
                    <system:String>abc</system:String>
                    <system:String>abc</system:String>
  </toolkit:ListPicker>

or you can use both xaml and c# like the following.. add this to your .cs file..

 private List<string> SetData()
        {
            List<string> data = new List<string>();
            data.Add("abc");
            data.Add("abc");
            data.Add("abc");
            data.Add("abc");
            data.Add("abc");
            data.Add("abc");
            data.Add("abc");


            return data;            
        }

Add this to main method..

public MainPage()
        {
            InitializeComponent();

            listDynamic.ItemsSource = SetData();

        }

then add the following to the xaml file..

 <toolkit:ListPicker x:Name="listDynamic" Grid.Row="1"  VerticalAlignment="Top" HorizontalAlignment="Stretch" FullModeHeader="Choose the Mode">
                    <toolkit:ListPicker.FullModeItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="6,12,6,12">
                                <Rectangle Fill="Green" Height="24" Width="24" />
                                <TextBlock Text="{Binding}" Margin="12,0,0,0" FontSize="{StaticResource PhoneFontSizeLarge}" />
                            </StackPanel>
                        </DataTemplate>
                    </toolkit:ListPicker.FullModeItemTemplate>
                </toolkit:ListPicker>

this works great..hope this will help you..