Dynamic Panorama

Aug 14, 2013 at 12:52 PM
Hi Allen,

First of all props to excellent implementation, this is really useful and I have used it many times, and I thank you for it =)

I have quick question:
  1. I am using a panorama control that is dynamically populated
            <phone:Panorama Title="{Binding ProgName}" ItemsSource="{Binding Pivots}">
                <i:Interaction.Triggers>
                    <abu:SelectedPanoItemChangedTrigger>
                        <!--Mappings-->
                        <abu:SelectedPanoItemChangedTrigger.SelectionMappings>
                            <abu:SelectionMapping SourceIndex="0" TargetIndex="0"/>
                            <abu:SelectionMapping SourceIndex="1" TargetIndex="0"/>
                            <abu:SelectionMapping SourceIndex="2" TargetIndex="0"/>
                            <abu:SelectionMapping SourceIndex="3" TargetIndex="0"/>
                            <abu:SelectionMapping SourceIndex="4" TargetIndex="1"/>
                            <abu:SelectionMapping SourceIndex="5" TargetIndex="0"/>     
                        </abu:SelectedPanoItemChangedTrigger.SelectionMappings>
                        <!--Define the app bars-->
                        <abu:SwitchAppBarAction>
                            <abu:AppBar Id="0">
                                <abu:AppBarButton Text="Search" IconUri="/Assets/AppBar/appbar.search.png"/>
                                <abu:AppBarButton Text="Share" IconUri="/Assets/AppBar/appbar.share.png"/>
                                <abu:AppBarButton Text="Favorite" IconUri="/Assets/AppBar/appbar.fav.png"/>
                            </abu:AppBar>
                            
                            <abu:AppBar Id="1">
                                <abu:AppBarButton Text="Search" IconUri="/Assets/AppBar/appbar.search.png"/>
                                <abu:AppBarButton Text="Comment" IconUri="/Assets/AppBar/appbar.comment.png"/>
                                <abu:AppBarButton Text="Share" IconUri="/Assets/AppBar/appbar.share.png"/>
                                <abu:AppBarButton Text="Favorite" IconUri="/Assets/AppBar/appbar.fav.png"/>
                            </abu:AppBar>
                        </abu:SwitchAppBarAction>
                    </abu:SelectedPanoItemChangedTrigger>
                </i:Interaction.Triggers>
                
                <phone:Panorama.HeaderTemplate>
                    <DataTemplate>
                        <Selector:ItemTemplateSelector Content="{Binding}">
                            <Selector:ItemTemplateSelector.Episodes>
                                <DataTemplate>
                                    <!--bind to the Localized Resc-->
                                    <TextBlock Text="Episodes"/>
                                </DataTemplate>
                            </Selector:ItemTemplateSelector.Episodes>
                            <Selector:ItemTemplateSelector.Related>
                                <DataTemplate>
                                    <!--bind to the Localized Resc-->
                                    <TextBlock Text="Related"/>
                                </DataTemplate>
                            </Selector:ItemTemplateSelector.Related>
                            <Selector:ItemTemplateSelector.Details>
                                <DataTemplate>
                                    <!--bind to the Localized Resc-->
                                    <TextBlock Text="Details"/>
                                </DataTemplate>
                            </Selector:ItemTemplateSelector.Details>
                            <Selector:ItemTemplateSelector.Comments>
                                <DataTemplate>
                                    <TextBlock Text="Comments"/>
                                </DataTemplate>
                            </Selector:ItemTemplateSelector.Comments>
                            <Selector:ItemTemplateSelector.Seasons>
                                <DataTemplate>
                                    <TextBlock Text="Seasons"/>
                                </DataTemplate>
                            </Selector:ItemTemplateSelector.Seasons>
                            <Selector:ItemTemplateSelector.Clips>
                                <DataTemplate>
                                    <TextBlock Text="Clips"/>
                                </DataTemplate>
                            </Selector:ItemTemplateSelector.Clips>
                        </Selector:ItemTemplateSelector>
                    </DataTemplate>
                </phone:Panorama.HeaderTemplate>

                <phone:Panorama.ItemTemplate>
                    <DataTemplate>
                        <Selector:ItemTemplateSelector Content="{Binding}">
                            <Selector:ItemTemplateSelector.Episodes>
                                <DataTemplate>
                                    <Grid>
                                        <ListBox ItemsSource="{Binding itemList,Converter={StaticResource sourceConv}}" Margin="0,0,24,0" Width="412" ItemTemplate="{StaticResource EpisodeItemTemplate}"/>
                                    </Grid>
                                </DataTemplate>
                            </Selector:ItemTemplateSelector.Episodes>
                            <Selector:ItemTemplateSelector.Clips>
                                <DataTemplate>
                                    <Grid>
                                        <ListBox ItemsSource="{Binding itemList,Converter={StaticResource sourceConv}}" Margin="0,0,24,0" Width="412" ItemTemplate="{StaticResource EpisodeItemTemplate}"/>
                                    </Grid>
                                </DataTemplate>
                            </Selector:ItemTemplateSelector.Clips>
                            <Selector:ItemTemplateSelector.Related>
                                <DataTemplate>
                                    <Grid>
                                        <ListBox ItemsSource="{Binding itemList,Converter={StaticResource sourceConv}}" Margin="0,0,24,0" Width="412" ItemTemplate="{StaticResource EpisodeItemTemplate}"/>
                                    </Grid>
                                </DataTemplate>
                            </Selector:ItemTemplateSelector.Related>
                            <Selector:ItemTemplateSelector.Details>
                                <DataTemplate>
                                    <TextBlock Text="{Binding ProgramDetails.Desc}"/>
                                </DataTemplate>
                            </Selector:ItemTemplateSelector.Details>
                            <Selector:ItemTemplateSelector.Comments>
                                <DataTemplate>
                                    <ListBox ItemsSource="{Binding itemsList,Converter={StaticResource sourceConv}}" ItemTemplate="{StaticResource CommentTemplate}"/>
                                </DataTemplate>
                            </Selector:ItemTemplateSelector.Comments>
                            <Selector:ItemTemplateSelector.Seasons>
                                <DataTemplate>
                                    <ListBox ItemsSource="{Binding itemList,Converter={StaticResource sourceConv}}" ItemTemplate="{StaticResource EpisodeItemTemplate}"/>
                                </DataTemplate>
                            </Selector:ItemTemplateSelector.Seasons>
                        </Selector:ItemTemplateSelector>
                    </DataTemplate>
                </phone:Panorama.ItemTemplate>
            </phone:Panorama>
Observation:
  1. The app bar takes some time to load - Which is ok not a problem
  2. When it does load it only applies one kind of appbar and does not switch between the two - this is a little bit of a cause for concern.
Any help would be greatly appreciated.

Thanks
Ronak