locked
Flipview DataTemplate access Parent Page Data Context RRS feed

  • Question

  • Hi

    My flipView has BingMap (which itself has couple of child controls: Pushpin and a grid for showing info box) and few other controls

    The Flip view binding is done to a collection, which has all required fields except the Bing map credentials Key. The Bing Map Key is defined in my ViewModel base class.

    My scenario code is as following:

    <FlipView ItemsSource="{Binding Alerts}" SelectedItem="{Binding Alert, mode=TwoWay}">
      <FlipView.ItemTemplate>
        <DataTemplate>
          <Grid>
            <bm:Map Name="Maps" Credentials="{Binding BingMapKey}">
              <bm:Map.Children>
                <bm:Pushpin IsTapEnabled="True">
                  <bm:MapLayer.Position>
                    <bm:Location Latitude="{Binding Location.Latitude}" Longitude="{Binding Location.Longitude}" />
                  </bm:MapLayer.Position>
                </bm:Pushpin>
                <bm:MapLayer>
                  <Grid x:Name="Infobox" Margin="-15,-95,0,0">
    <Border Width="250" Height="90" Background="Black" Opacity="0.7" />
                    <StackPanel Height="80" Margin="5">
                      <TextBlock Text="{Binding AlertCategory}" FontSize="16" TextWrapping="Wrap" HorizontalAlignment="Left" />
                      <TextBlock Text="{Binding Location.Address}" FontSize="14" TextWrapping="Wrap" Height="Auto"/>
                    </StackPanel>
                  </Grid>
                </bm:MapLayer>
              </bm:Map.Children>
            </bm:Map>
            <TextBlock Text="{Binding AlertCategory}"/>
            <TextBlock Text="{Binding AlertType}"/>
            <TextBlock Text="{Binding Location.Address}"/>
            <TextBlock Text="{Binding AlertDateTime}"/>
          </Grid>
        </DataTemplate>
      </FlipView.ItemTemplate>
    </FlipView>

    The Only binding I require from Parent Page is BingMapKey.

    Any solutions for the problem?

    Tuesday, July 9, 2013 2:13 PM

Answers

  • Try this, basically binding to property inside DataContext of FlipView which in return set to parent grid DataContext (if not set here, it can be this.DataContext which will be page DataContext)

    xaml

     <Grid Name="grid">
            <FlipView Name="flipView" ItemsSource="{Binding ModelItems}">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="{Binding ElementName=flipView, Path=DataContext.Key}" FontSize="60" />
                            <TextBlock Text="{Binding Name}" FontSize="60" />
                        </StackPanel>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>
        </Grid>

    cs

    public class BaseViewModelItem
        {
            public string Name { get; set; }
        }
    
        public class BaseViewModel
        {
            public ObservableCollection<BaseViewModelItem> ModelItems { get; set; }
            public string Key { get; set; }
            public BaseViewModel()
            {
                Key = "BingMapKeyFromCode";
                ModelItems = new ObservableCollection<BaseViewModelItem>();
                ModelItems.Add(new BaseViewModelItem() { Name = "Name 1" });
                ModelItems.Add(new BaseViewModelItem() { Name = "Name 2" });
                ModelItems.Add(new BaseViewModelItem() { Name = "Name 3" });
            }
        }
    
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
            }
    
           
    
            protected async override void OnNavigatedTo(NavigationEventArgs e)
            {
                grid.DataContext = new BaseViewModel();
    
            }
        }


    Thanks,
    Sachin
    My Samples



    • Edited by Sachin S Tuesday, July 9, 2013 4:10 PM page
    • Marked as answer by Sharma.Manish Tuesday, July 9, 2013 8:48 PM
    Tuesday, July 9, 2013 4:08 PM

All replies

  • Try this, basically binding to property inside DataContext of FlipView which in return set to parent grid DataContext (if not set here, it can be this.DataContext which will be page DataContext)

    xaml

     <Grid Name="grid">
            <FlipView Name="flipView" ItemsSource="{Binding ModelItems}">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="{Binding ElementName=flipView, Path=DataContext.Key}" FontSize="60" />
                            <TextBlock Text="{Binding Name}" FontSize="60" />
                        </StackPanel>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>
        </Grid>

    cs

    public class BaseViewModelItem
        {
            public string Name { get; set; }
        }
    
        public class BaseViewModel
        {
            public ObservableCollection<BaseViewModelItem> ModelItems { get; set; }
            public string Key { get; set; }
            public BaseViewModel()
            {
                Key = "BingMapKeyFromCode";
                ModelItems = new ObservableCollection<BaseViewModelItem>();
                ModelItems.Add(new BaseViewModelItem() { Name = "Name 1" });
                ModelItems.Add(new BaseViewModelItem() { Name = "Name 2" });
                ModelItems.Add(new BaseViewModelItem() { Name = "Name 3" });
            }
        }
    
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
            }
    
           
    
            protected async override void OnNavigatedTo(NavigationEventArgs e)
            {
                grid.DataContext = new BaseViewModel();
    
            }
        }


    Thanks,
    Sachin
    My Samples



    • Edited by Sachin S Tuesday, July 9, 2013 4:10 PM page
    • Marked as answer by Sharma.Manish Tuesday, July 9, 2013 8:48 PM
    Tuesday, July 9, 2013 4:08 PM
  • Thanks, that worked as I wanted :)
    Tuesday, July 9, 2013 8:49 PM
  • Hi there,

    I tried this without any success. I still get a binding exception in the output window.

    My ItemsControl look like this:

    <ItemsControl x:Name="StoreCategories" ItemsSource="{Binding Categories}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Button Margin="12,12,0,0" 
                                        Content="{Binding Description}"
                                        Style="{StaticResource BasicTileStyle}"
                                        Command="{Binding Path=DataContext.CategoryBrowseCommand, ElementName=StoreCategories, Mode=OneWay}"
                                        CommandParameter="{Binding Id}"
                                        toolkit:TiltEffect.IsTiltEnabled="True"/>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>

    The cut down version of the ViewModel:

    public class StoreViewModel : ViewModelBase
        {        
            public StoreViewModel(INavigationService navigationService,
                IApplicationManifestService applicationManifestService)
                : base(navigationService, applicationManifestService)
            {
                StoreRecipes = new ObservableCollection<Recipe>();
                Categories = new ObservableCollection<Category>();
                ViewRecipeCommand = new RelayCommand<Recipe>((o) => this.ViewRecipe(o));
            }
    
            public ICommand ViewRecipeCommand { get; private set; }
    
            public ObservableCollection<Recipe> StoreRecipes { get; private set; }
    
            public ObservableCollection<Category> Categories { get; private set; }
    
            /// <summary>
            /// Displays the recipe page.
            /// </summary>
            private void ViewRecipe(Recipe recipe)
            {
            }
        }

    Obviously the items load and I can see all the buttons, but the command doesn't execute on click.

    App using this in a Windows Phone app though...

    Wednesday, October 9, 2013 8:59 PM