locked
LongListSelector JumpListStyle not displaying Images RRS feed

  • Question

  • I have a JumpListStyle template defined for my LongListSelector. I want the Jump List to show the Group Name, a string Progress of the current group, and the group's Image icon. However, the image doesn't get bound or displayed until I've scrolled through the longlistselector passing through each group.

    For example:

    1. Go into new screen, long list selector displays the list of data (in my case, the Vocab data) with group titles. On screen it shows Group A and B.

    2. Click on Group A title, and the jump list screen shows up. The list of groups are displayed but only Group A and B's image show up.

    3. Click on Group C, jump list exits, and it goes back to the long list selector.

    4. Click on Group C title, jump list appears and the image for Group C not appears. 

    But I want the images for ALL groups to show up on the Jump List screen on the initial view of this screen. It's not like the images aren't work, they work! Because they eventually all show up on the Jump List.

    <phone:LongListSelector.JumpListStyle>
                            <Style TargetType="phone:LongListSelector">
                                <Setter Property="ItemTemplate">
                                    <Setter.Value>
                                        <DataTemplate>
                                            <!--<Border  Background="Transparent" Margin="12,15,12,0" toolkit:TiltEffect.IsTiltEnabled="True">-->
                                            <StackPanel HorizontalAlignment="Left" VerticalAlignment="Center" Orientation="Horizontal">
                                                <Image Source="{Binding CategoryImage}" Width="30" Height="30" Stretch="Uniform"/>
                                                <TextBlock Text="{Binding Category}" Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Bottom" Style="{StaticResource PhoneTextTitle2Style}"/>
                                                <TextBlock Text="{Binding ProgressString}" Style="{StaticResource PhoneTextSmallStyle}" TextAlignment="Left" HorizontalAlignment="Right"/>
                                            </StackPanel>
                                            <!--</Border>-->
                                        </DataTemplate>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="LayoutMode" Value="List"/>                            
                                <!--<Setter Property="Margin" Value="12,15,12,0"/>-->
                            </Style>
                        </phone:LongListSelector.JumpListStyle>


    Binding the DataContext:

    public ObservableCollection<CategoryGroup> AllWords { get; private set; }
            
    private bool wordsDetailsDisplayed = false;
    public Words()
    {
    	InitializeComponent();
    	DataContext = this;
    	AllWords = CategoryGroup.CreateGroups(App.VocabData.Vocab, (p) => { return p.Category; });
    
    	AlphaVocabComparer comparer = new AlphaVocabComparer();
    
    	foreach (CategoryGroup g in AllWords)
    	{
    		g.ListWords.Sort(0, g.ListWords.Count, comparer);
    		
    		foreach (Vocab v in g.ListWords)
    		{
    			if (v.Unlocked)
    			{
    				g.Progress++;
    			}
    		}
    	}
    	words.ItemsSource = AllWords;	
    }

    Data Source:

    public class CategoryGroup : List<Vocab>
    {
    	public delegate int GetKeyDelegate(Vocab item);
    
    	public int CategoryId 
    	{ 
    		get; 
    		private set;
    	}
    
    	private string category = String.Empty;
    	public string Category
    	{
    		get
    		{
    			return this.category;
    		}
    		set
    		{
    			category = value;
    		}
    	}
    
    	public int Progress { get; set; }
    	public string ProgressString
    	{
    		get
    		{
    			return string.Format("{0}/{1}", this.Progress, this.Count);
    		}
    	}
    
    	private string categoryImage = String.Empty;
    	public string CategoryImage
    	{
    		get
    		{
    			return this.categoryImage;
    		}
    		set
    		{
    			this.categoryImage = value;
    		}
    	}
    
    	public List<Vocab> ListWords { get { return this; } }
    
    	public static ObservableCollection<CategoryGroup> CreateGroups(IEnumerable<Vocab> items, GetKeyDelegate getKey)
    	{
    		ObservableCollection<CategoryGroup> list = new ObservableCollection<CategoryGroup>();
    
    		for (int i = Common.VocabCategories.CATEGORY_START_ID; i < Common.VocabCategories.CATEGORY_MAX_NUM; ++i)
    		{
    			CategoryGroup group = new CategoryGroup();
    			group.CategoryId = i;
    			group.Category = Common.VocabCategories.CATEGORY_LOC_ID[i];
    			group.CategoryImage = "/Assets/Textures/Category/" + Common.VocabCategories.CATEGORY_LOC_ID[i] + ".png";
    			list.Add(group);
    		}
    
    		int numUnlockedItems = 0;
    
    		foreach (Vocab item in items)
    		{                
    			foreach (CategoryGroup group in list)
    			{
    				numUnlockedItems = 0; // reset to 0
    				if (getKey(item) == group.CategoryId)
    				{
    					if (item.Unlocked)
    					{
    						++numUnlockedItems;
    					}
    					group.Add(item);
    					break;
    				}
    				group.Progress = numUnlockedItems;
    			}
    		}
    
    		return list;
    	}
    
    }

    Thanks for any assistance.

    Tuesday, March 5, 2013 5:52 AM

All replies