Applying certain functions on all the photos in flipview on windows phone 8.1

Question

I have flipview containing photo, descbox, detailBtn, hideBtn. I want when the photo on the tap, then descbox and hideBtn appear. whereas detailBtn not appear. And if the pictures on the tap again, then descbox and hideBtn not appear. while detailBtn appear. Or if detailBtn in tap, then descbox and hideBtn appear. whereas detailBtn not appear. And if hideBtn on the tap, then the descbox and hideBtn not appear. while detailBtn appear. I want it applies to all photos (global) on the flipview. While the code below it applies one photo only.

XAML:

<FlipView x:Name="narrowFlipview" Grid.Row="1" ItemsSource="{Binding Group.Items}" SelectedItem="{Binding Item, Mode=TwoWay}"  Foreground="{x:Null}">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid x:Name="ContentRoot">
                        <Grid.ChildrenTransitions>
                            <TransitionCollection>
                                <EdgeUIThemeTransition Edge="Left"/>
                            </TransitionCollection>
                        </Grid.ChildrenTransitions>
                        <ScrollViewer x:Name="myScroll" VerticalScrollBarVisibility="Auto" Margin="0,0,0,0" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" ZoomMode="Enabled" MinZoomFactor="1" HorizontalScrollMode="Auto">
                            <StackPanel Height="325" Width="558">
                                <Image x:Name="photo" Source="{Binding ImagePath}" Stretch="Uniform" Height="320" Tapped="photo_Tapped" Margin="0,0,0.333,0" Tag="{Binding Tag, ElementName=narrowFlipview, Mode=TwoWay}"/>
                                <Border x:Name="descbox" Background="#A52C2C2C" Height="120" VerticalAlignment="Bottom" Visibility="{Binding IsDescriptionVisible, Converter={StaticResource boolToVisibilityConverter}}" Margin="0,-120,0,0">
                                    <ScrollViewer VerticalScrollMode="Auto" Height="auto" HorizontalScrollBarVisibility="Visible">
                                        <StackPanel Width="538">
                                            <TextBlock x:Name="desc" Text="{Binding Description}"  FontFamily="verdana" FontSize="17" Foreground="#CCFFFFFF" TextWrapping="Wrap" Padding="0,10" TextAlignment="Justify" Height="auto"/>
                                        </StackPanel>
                                    </ScrollViewer>
                                </Border>
                                <Image x:Name="detailBtn" Margin="0,-40,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToInverseVisibilityConverter}}" Source="images/media/arrow_up.png" Tapped="detailBtn_Tapped"/>
                                <Image x:Name="hideBtn" Margin="0,-285,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToVisibilityConverter}}" Source="images/media/arrow_down.png" Tapped="hideBtn_Tapped"/>
                            </StackPanel>
                        </ScrollViewer>
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

Converter Class:

public class boolToVisibilityConverter : IValueConverter
    {
        public bool isInverseReq { get; set; }
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            bool val = (bool)value;
            if (isInverseReq)
            {
                if (val)
                    return Visibility.Collapsed;
                else
                    return Visibility.Visible;
            }
            else
            {
                if (val)
                    return Visibility.Visible;
                else
                    return Visibility.Collapsed;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }
}

NatureDataSource class:

public class NatureDataItem : INotifyPropertyChanged
    {
        public NatureDataItem(String uniqueId, String title, String imagePath, String description, String content)
        {
            this.UniqueId = uniqueId;
            this.Title = title;
            this.Description = description;
            this.ImagePath = imagePath;
            this.Content = content;
        }

        public string UniqueId { get; private set; }
        public string Title { get; private set; }
        public string Description { get; private set; }
        public string ImagePath { get; private set; }
        public string Content { get; private set; }

        //for the image tap to show description functionality
        private bool isDataVisible;
        public bool IsDataVisible
        {
            get { return isDataVisible; }
            set
            {
                isDataVisible = value;
                if (value)
                    IsDescriptionVisible = true;
                else
                    IsDescriptionVisible = false;
                RaisePropertyChanged("IsDataVisible");
            }
        }

        //for hide and show the details pannel and hide and show content based on that
        private bool isDescriptionVisible;
        public bool IsDescriptionVisible
        {
            get { return isDescriptionVisible; }
            set { isDescriptionVisible = value; RaisePropertyChanged("IsDescriptionVisible"); }
        }

        //raises the event to the view if any of these properties change
        public event PropertyChangedEventHandler PropertyChanged;
        public void RaisePropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }

        public override string ToString()
        {
            return this.Title;
        }
    }

    /// <summary>
    /// Generic group data model.
    /// </summary>
    public class NatureDataGroup
    {
        public NatureDataGroup(String uniqueId, String title, String imagePath, String description)
        {
            this.UniqueId = uniqueId;
            this.Title = title;
            this.Description = description;
            this.ImagePath = imagePath;
            this.Items = new ObservableCollection<NatureDataItem>();
        }

        public string UniqueId { get; private set; }
        public string Title { get; private set; }
        public string Description { get; private set; }
        public string ImagePath { get; private set; }
        public ObservableCollection<NatureDataItem> Items { get; private set; }

        public override string ToString()
        {
            return this.Title;
        }
    }

    /// <summary>
    /// Creates a collection of groups and items with content read from a static json file.
    /// 
    /// NatureDataSource initializes with data read from a static json file included in the 
    /// project.  This provides Nature data at both design-time and run-time.
    /// </summary>
    public sealed class NatureDataSource
    {
        private static NatureDataSource _NatureDataSource = new NatureDataSource();

        private ObservableCollection<NatureDataGroup> _groups = new ObservableCollection<NatureDataGroup>();
        public ObservableCollection<NatureDataGroup> Groups
        {
            get { return this._groups; }
        }

        public static async Task<IEnumerable<NatureDataGroup>> GetGroupsAsync()
        {
            await _NatureDataSource.GetNatureDataAsync();

            return _NatureDataSource.Groups;
        }

        public static async Task<NatureDataGroup> GetGroupAsync(string uniqueId)
        {
            await _NatureDataSource.GetNatureDataAsync();
            // Simple linear search is acceptable for small data sets
            var matches = _NatureDataSource.Groups.Where((group) => group.UniqueId.Equals(uniqueId));
            if (matches.Count() == 1) return matches.First();
            return null;
        }

        public static async Task<NatureDataItem> GetItemAsync(string uniqueId)
        {
            await _NatureDataSource.GetNatureDataAsync();
            // Simple linear search is acceptable for small data sets
            var matches = _NatureDataSource.Groups.SelectMany(group => group.Items).Where((item) => item.UniqueId.Equals(uniqueId));
            if (matches.Count() == 1) return matches.First();
            return null;
        }

        private async Task GetNatureDataAsync()
        {
            if (this._groups.Count != 0)
                return;

            Uri dataUri = new Uri("ms-appx:///DataModel/NatureData.json");

            StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(dataUri);
            string jsonText = await FileIO.ReadTextAsync(file);
            JsonObject jsonObject = JsonObject.Parse(jsonText);
            JsonArray jsonArray = jsonObject["Groups"].GetArray();

            foreach (JsonValue groupValue in jsonArray)
            {
                JsonObject groupObject = groupValue.GetObject();
                NatureDataGroup group = new NatureDataGroup(groupObject["UniqueId"].GetString(),
                                                            groupObject["Title"].GetString(),
                                                            groupObject["ImagePath"].GetString(),
                                                            groupObject["Description"].GetString());

                foreach (JsonValue itemValue in groupObject["Items"].GetArray())
                {
                    JsonObject itemObject = itemValue.GetObject();
                    group.Items.Add(new NatureDataItem(itemObject["UniqueId"].GetString(),
                                                       itemObject["Title"].GetString(),
                                                       itemObject["ImagePath"].GetString(),
                                                       itemObject["Description"].GetString(),
                                                       itemObject["Content"].GetString()));
                }
                this.Groups.Add(group);
            }
        }

        public static async Task<NatureDataGroup> GetGroupByItemAsync(NatureDataItem item)
        {
            await _NatureDataSource.GetNatureDataAsync();
            // Simple linear search is acceptable for small data sets
            var matches = _NatureDataSource.Groups.Where(group => group.Items.Contains(item));
            if (matches.Count() == 1) return matches.First();
            return null;
        }
    }
}

code:

private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
        {
            var item = await NatureDataSource.GetItemAsync((String)e.NavigationParameter);
            var group = await NatureDataSource.GetGroupByItemAsync(item);
            this.DefaultViewModel["Group"] = group;
            this.DefaultViewModel["Item"] = item;
        }
private void photo_Tapped(object sender, TappedRoutedEventArgs e)
        {
            var currentItem = narrowFlipview.SelectedItem as NatureDataItem;
            currentItem.IsDataVisible = !currentItem.IsDataVisible;
        }

        private void detailBtn_Tapped(object sender, TappedRoutedEventArgs e)
        {
            var currentItem = narrowFlipview.SelectedItem as NatureDataItem;
            currentItem.IsDescriptionVisible = true;
        }

        private void hideBtn_Tapped(object sender, TappedRoutedEventArgs e)
        {
            var currentItem = narrowFlipview.SelectedItem as NatureDataItem;
            currentItem.IsDescriptionVisible = false;
        }

How do I apply it to all photos on the flipview? Note: photos and descriptions of the data binding of NatureData.JSON

Answer 1

A Couple of things I've come across,

1. Try to avoid use of Global Parameters to hold value and transfer values, rather use Local Parameters and send them as while calling the method as Method Parameters.
2. Declare a single observable collection globally that is holding your entire data (your Groups in this case).
3. Use a Current Item property to bind your FlipView.SelectedItemin a Two Way fashion, this ways you'll have access to your CurrentSelectedItem and your data at all times which are the only two things that are necessary for any operation in your case.
4. Use a ViewModelclass to hold all your properties and use DataContext of the Page to that ViewModel so that you won't need to do so from c# using ObservableDirectory. For More information on the MVVM pattern and ViewModels refer this.
5. While Using LINQ, use the FirstOrDefault method to search for the element when you want/expect only a single element from a collection
6. In your case, you should use two observable collections
   1. for the Groups (as they can be many)
   2. for the group items (as they are many)

---

The Changes is the code:

I've taken the liberty to change quite a bit of your code, removed the Global Objects, created Local Objects. Changed return Type of the methods to pass the local properties around. Below is my code based on the test project you had given during the last question:

The XAML

Note: Set the DataContext of the WaterfallDetail page like this DataContext="{Binding RelativeSource={RelativeSource Self}}"

<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Title Panel -->
    <StackPanel Grid.Row="0" DataContext="{Binding CurrentItem">
        <StackPanel.ChildrenTransitions>
            <TransitionCollection>
                <EdgeUIThemeTransition Edge="Right"/>
            </TransitionCollection>
        </StackPanel.ChildrenTransitions>
        <!--<TextBlock x:Uid="Header" Text="application name" Style="{ThemeResource TitleTextBlockStyle}" Margin="0,12,0,0"/>-->
        <ScrollViewer Margin="0,15,50,0" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" HorizontalScrollMode="Enabled" HorizontalAlignment="Left">
            <TextBlock Text="{Binding Title}" Style="{ThemeResource HeaderTextBlockStyle}" TextWrapping="NoWrap" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}" FontSize="35" FontFamily="Myriad Pro Cond" FontWeight="Normal" Width="auto" HorizontalAlignment="Left"/>
        </ScrollViewer>
    </StackPanel>

    <!-- 
        TODO: Content should be placed within the following grid 
              to show details for the current item
    -->
    <FlipView x:Name="narrowFlipview" Grid.Row="1" ItemsSource="{Binding Group.Items}" SelectedItem="{Binding CurrentItem, Mode=TwoWay}"  Foreground="{x:Null}">
        <FlipView.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="ContentRoot">
                    <Grid.ChildrenTransitions>
                        <TransitionCollection>
                            <EdgeUIThemeTransition Edge="Left"/>
                        </TransitionCollection>
                    </Grid.ChildrenTransitions>
                    <ScrollViewer x:Name="myScroll" VerticalScrollBarVisibility="Auto" Margin="0,0,0,0" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" ZoomMode="Enabled" MinZoomFactor="1" HorizontalScrollMode="Auto">
                        <StackPanel Height="325" Width="558">
                            <Image x:Name="photo" Source="{Binding ImagePath}" Stretch="Uniform" Height="320" Tapped="photo_Tapped" Margin="0,0,0.333,0" />
                            <Border x:Name="descbox" Background="#A52C2C2C" Height="120" VerticalAlignment="Bottom" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToVisibilityConverter}}" Margin="0,-120,0,0">
                                <ScrollViewer VerticalScrollMode="Auto" Height="auto" HorizontalScrollBarVisibility="Visible">
                                    <StackPanel Width="538">
                                        <TextBlock x:Name="desc" Text="{Binding Description}"  FontFamily="verdana" FontSize="17" Foreground="#CCFFFFFF" TextWrapping="Wrap" Padding="0,10" TextAlignment="Justify" Height="auto"/>
                                    </StackPanel>
                                </ScrollViewer>
                            </Border>
                            <AppBarButton x:Name="detailBtn" Icon="Upload" Margin="0,-40,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToInverseVisibilityConverter}}" Click="DetailsBtn_Click"/>
                            <AppBarButton x:Name="hideBtn" Icon="Download"  Margin="0,-285,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToVisibilityConverter}}" Click="HideBtn_Click"/>
                        </StackPanel>
                    </ScrollViewer>
                </Grid>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>
</Grid>

WaterfallDetail Page Code Behind

Implement the INotifyPropertyChanged interface as discussed on your previous question. The changes are as below:

    public event PropertyChangedEventHandler PropertyChanged;
    public void RaisePropertyChanged(string propertyName)
    {
        //for c# versions below 6.0

        if(PropertyChanged!=null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
        //if Using c# 6.0 with Visual Studio 2015
        //Comment the above and uncomment the below

        //PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private WaterfallDataGroup group;
    public WaterfallDataGroup Group
    {
        get { return group; }
        set { group = value; RaisePropertyChanged("Group"); }
    }


    private WaterfallDataItem currentItem;
    public WaterfallDataItem CurrentItem
    {
        get
        {
            return currentItem;
        }
        set
        {
            currentItem = value;
            RaisePropertyChanged("CurrentItem");
        }
    }


    private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
    {
        CurrentItem = await WaterfallDataSource.GetItemAsync((String)e.NavigationParameter);
        Group = await WaterfallDataSource.GetGroupByItemAsync(CurrentItem);
    }

    private void NavigationHelper_SaveState(object sender, SaveStateEventArgs e)
    {
        // TODO: Save the unique state of the page here.
    }

    private void photo_Tapped(object sender, TappedRoutedEventArgs e)
    {
        CurrentItem.IsDataVisible = !currentItem.IsDataVisible;
        Group.Items = Group.Items.Select(x =>
        {
            x.IsDataVisible = CurrentItem.IsDataVisible;
            return x;
        }).ToObservableCollection();
    }

    private void backBtn_Click(object sender, RoutedEventArgs e)
    {
        this.Frame.GoBack();
    }

    private void DetailsBtn_Click(object sender, RoutedEventArgs e)
    {
        CurrentItem.IsDescriptionVisible = true;
        Group.Items = Group.Items.Select(x =>
        {
            x.IsDescriptionVisible = CurrentItem.IsDescriptionVisible;
            return x;
        }).ToObservableCollection();
    }

    private void HideBtn_Click(object sender, RoutedEventArgs e)
    {
        CurrentItem.IsDescriptionVisible = false;
        Group.Items = Group.Items.Select(x =>
        {
            x.IsDescriptionVisible = CurrentItem.IsDescriptionVisible;
            return x;
        }).ToObservableCollection();
    }

Please Note: The .ToObservableCollection() is an extention method used to convert the IEnumerable to and ObservableCollection add the method in a different static class name CollectionExtensions in this case. You can read more about Extention Methods here.

ExtentionMethod (.ToObservable())

public static class CollectionExtensions
{
    public static ObservableCollection<T> ToObservableCollection<T>(this IEnumerable<T> coll)
    {
        var c = new ObservableCollection<T>();
        foreach (var e in coll)
            c.Add(e);
        return c;
    }
}

The WaterfallDataGroup class

I've changed the Items property to have a public setter instead of a private one to be able to edit the properties of the Items on Button Tap event.

public class WaterfallDataGroup
{
    public WaterfallDataGroup(String uniqueId, String title, String imagePath, String description)
    {
        this.UniqueId = uniqueId;
        this.Title = title;
        this.Description = description;
        this.ImagePath = imagePath;
        this.Items = new ObservableCollection<WaterfallDataItem>();
    }

    public string UniqueId { get; private set; }
    public string Title { get; private set; }
    public string Description { get; private set; }
    public string ImagePath { get; private set; }
    public ObservableCollection<WaterfallDataItem> Items { get; set; }

    public override string ToString()
    {
        return this.Title;
    }
}

The Waterfall DataSource Class

 public sealed class WaterfallDataSource
{
    private static WaterfallDataSource _WaterfallDataSource = new WaterfallDataSource();

    public static async Task<IEnumerable<WaterfallDataGroup>> GetGroupsAsync()
    {
        var groups = await _WaterfallDataSource.GetWaterfallDataAsync();

        return groups;
    }

    public static async Task<WaterfallDataGroup> GetGroupAsync(string uniqueId)
    {
        var groups = await _WaterfallDataSource.GetWaterfallDataAsync();
        var matches = groups.Where((group) => group.UniqueId.Equals(uniqueId));
        if (matches.Count() == 1) return matches.First();
        return null;
    }

    public static async Task<WaterfallDataItem> GetItemAsync(string uniqueId)
    {
        var groups = await _WaterfallDataSource.GetWaterfallDataAsync();
        var matches = groups.SelectMany(group => group.Items).Where((item) => item.UniqueId.Equals(uniqueId));
        if (matches.Count() == 1) return matches.First();
        return null;
    }

    private async Task<ObservableCollection<WaterfallDataGroup>> GetWaterfallDataAsync()
    {
        ObservableCollection<WaterfallDataGroup> Groups = new ObservableCollection<WaterfallDataGroup>();
        Uri dataUri = new Uri("ms-appx:///DataModel/WaterfallData.json");

        StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(dataUri);
        string jsonText = await FileIO.ReadTextAsync(file);
        JsonObject jsonObject = JsonObject.Parse(jsonText);
        JsonArray jsonArray = jsonObject["Groups"].GetArray();

        foreach (JsonValue groupValue in jsonArray)
        {
            JsonObject groupObject = groupValue.GetObject();
            WaterfallDataGroup group = new WaterfallDataGroup(groupObject["UniqueId"].GetString(),
                                                        groupObject["Title"].GetString(),
                                                        groupObject["ImagePath"].GetString(),
                                                        groupObject["Description"].GetString());

            foreach (JsonValue itemValue in groupObject["Items"].GetArray())
            {
                JsonObject itemObject = itemValue.GetObject();
                group.Items.Add(new WaterfallDataItem(itemObject["UniqueId"].GetString(),
                                                   itemObject["Title"].GetString(),
                                                   itemObject["ImagePath"].GetString(),
                                                   itemObject["Description"].GetString(),
                                                   itemObject["Content"].GetString()));
            }
            Groups.Add(group);
        }
        return Groups;
    }

    public static async Task<WaterfallDataGroup> GetGroupByItemAsync(WaterfallDataItem item)
    {
        var groups = await _WaterfallDataSource.GetWaterfallDataAsync();
        foreach (var group in groups)
        {
            var match = group.Items.FirstOrDefault(x => x.UniqueId == item.UniqueId);
            if (match != null)
                return group;
        }
        return null;
    }
}