locked
picture array flipview RRS feed

  • Question

  • hello people, i am trying to modify this code from a Microsoft Sample.

    i have a flip view and it holds only one picture for each object. and i have a flip view that scrolls through these images.

    my question is. how can i add many pictures to one object. now i know i need to use an array but i can't figure out how to do it.

    here is the code. in the SampleDataSource in my Windows 8 App

    using System;
    using System.Linq;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using System.Runtime.CompilerServices;
    using Windows.ApplicationModel.Resources.Core;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Media.Imaging;
    
    // The data model defined by this file serves as a representative example of a strongly-typed
    // model that supports notification when members are added, removed, or modified.  The property
    // names chosen coincide with data bindings in the standard item templates.
    //
    // Applications may use this model as a starting point and build on it, or discard it entirely and
    // replace it with something appropriate to their needs.
    
    namespace Controls_FlipView.Data
    {
        /// <summary>
        /// Base class for <see cref="SampleDataItem"/> and <see cref="SampleDataGroup"/> that
        /// defines properties common to both.
        /// </summary>
        [Windows.Foundation.Metadata.WebHostHidden]
        public abstract class SampleDataCommon : SDKTemplate.Common.BindableBase
        {
            private static Uri _baseUri = new Uri("ms-appx:///");
    
            public SampleDataCommon(String title, String type, String picture)
            {
                this._title = title;
                this._type = type;
                this._picture = picture;
            }
    
            private string _title = string.Empty;
            public string Title
            {
                get { return this._title; }
                set { this.SetProperty(ref this._title, value); }
            }
    
            private string _type = string.Empty;
            public string Type
            {
                get { return this._type; }
                set { this.SetProperty(ref this._type, value); }
            }
    
            private Uri _image=null;
            private String _picture = null;
            public Uri Image
            {
                get
                {
                    return new Uri(SampleDataCommon._baseUri, this._picture);
                }
    
                set
                {
                    this._picture = null;
                    this.SetProperty(ref this._image, value);
                }
            }
        }
    
        /// <summary>
        /// Generic item data model.
        /// </summary>
        public class SampleDataItem : SampleDataCommon
        {
            public SampleDataItem(String title, String type, String picture)
                : base(title, type, picture)
            {
            }
    
        }
    
        /// <summary>
        /// Creates a collection of groups and items with hard-coded content.
        /// </summary>
        public sealed class SampleDataSource
        {
            private ObservableCollection<object> _items = new ObservableCollection<object>();
            public ObservableCollection<object> Items
            {
                get { return this._items; }
            }
    
            public SampleDataSource()
            {
                Items.Add(new SampleDataItem("Cliff",
                        "item",
                        "Assets/Cliff.jpg"
                        ));
                Items.Add(new SampleDataItem("Grapes",
                        "item",
                        "Assets/Grapes.jpg"
                        ));
                Items.Add(new SampleDataItem("Rainier",
                        "item",
                        "Assets/Rainier.jpg"
                        ));
                Items.Add(new SampleDataItem("Sunset",
                        "item",
                        "Assets/Sunset.jpg"
                        ));
                Items.Add(new SampleDataItem("Valley",
                        "item",
                        "Assets/Valley.jpg"
                        ));
            }
        }
    }
    

    any idea what can i change to an array and how to be able to attach more than one picture to one object.

    help appreciated :)

    • Moved by Caillen Thursday, August 8, 2013 1:44 AM
    Wednesday, August 7, 2013 12:50 PM

Answers

  • Hi Anton,

    From my understanding, your aim is to put more images into one flip view page, am I right?

    To Achieve this, you can use a ItemTemplate in the FlipView, I made one looks like this.

    What you should modify is

    the XAML code, we remove the text and add two image spaces by using the datatemplate:

                <FlipView x:Name="FlipView1" Width="300" BorderBrush="Black" BorderThickness="1">
                    <FlipView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <Image Source="{Binding Image1}" Width="300"/>
                                <Image Source="{Binding Image2}" Width="300"/>
                                <Image Source="{Binding Image3}" Width="300"/>
                            </StackPanel>
                        </DataTemplate>
                    </FlipView.ItemTemplate>
                </FlipView>

    In the Data Model which is SampleDataSource.cs, I made some changes. Don't forget to change you .cs file for binding to a new object 

    // var sampleData = new Controls_FlipView.Data.SampleDataSource();

    var sampleData = new Controls_FlipView.Data.SampleDataSource1();

    [Windows.Foundation.Metadata.WebHostHidden]
        public abstract class SampleDataCommon1 : SDKTemplate.Common.BindableBase
        {
            private static Uri _baseUri = new Uri("ms-appx:///");
    
            public SampleDataCommon1(String picture1, String picture2, String picture3)
            {
                this._picture1 = picture1;
                this._picture2 = picture2;
                this._picture3 = picture3;
            }
    
    
            private Uri _image1 = null;
            private Uri _image2 = null;
            private Uri _image3 = null;
            private String _picture1 = null;
            private String _picture2 = null;
            private String _picture3 = null;
    
            public Uri Image1
            {
                get
                {
                    return new Uri(SampleDataCommon1._baseUri, this._picture1);
                }
    
                set
                {
                    this._picture1 = null;
                    this.SetProperty(ref this._image1, value);
                }
            }
            public Uri Image2
            {
                get
                {
                    return new Uri(SampleDataCommon1._baseUri, this._picture2);
                }
    
                set
                {
                    this._picture2 = null;
                    this.SetProperty(ref this._image2, value);
                }
            }
            public Uri Image3
            {
                get
                {
                    return new Uri(SampleDataCommon1._baseUri, this._picture3);
                }
    
                set
                {
                    this._picture3 = null;
                    this.SetProperty(ref this._image3, value);
                }
            }
        }

    Furthermore, some changes here:

    public class SampleDataItem1 : SampleDataCommon1
        {
            public SampleDataItem1(String picture1, String picture2, String picture3)
                : base(picture1, picture2, picture3)
            {
            }
    
        }
    
        public sealed class SampleDataSource1
        {
            private ObservableCollection<object> _items = new ObservableCollection<object>();
            public ObservableCollection<object> Items
            {
                get { return this._items; }
            }
    
            public SampleDataSource1()
            {
                Items.Add(new SampleDataItem1("Assets/Sunset.jpg",
                        "Assets/Grapes.jpg",
                        "Assets/Cliff.jpg"
                        ));
                Items.Add(new SampleDataItem1("Assets/Grapes.jpg",
                        "Assets/Grapes.jpg",
                        "Assets/Grapes.jpg"
                        ));
                Items.Add(new SampleDataItem1("Assets/Cliff.jpg",
                        "Assets/Cliff.jpg",
                        "Assets/Rainier.jpg"
                        ));
                Items.Add(new SampleDataItem1("Assets/Cliff.jpg",
                        "Assets/Cliff.jpg",
                        "Assets/Sunset.jpg"
                        ));
                Items.Add(new SampleDataItem1("Assets/Cliff.jpg",
                        "Assets/Cliff.jpg",
                        "Assets/Valley.jpg"
                        ));
            }
        }



    James He
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, August 8, 2013 3:33 AM
    Moderator

All replies

  • Hi Anton,

    I have moved this thread to Building Windows Store App With C# or VB forum for better responses.

    Thanks for your understanding.


    Caillen
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, August 8, 2013 1:50 AM
  • Hi Anton,

    From my understanding, your aim is to put more images into one flip view page, am I right?

    To Achieve this, you can use a ItemTemplate in the FlipView, I made one looks like this.

    What you should modify is

    the XAML code, we remove the text and add two image spaces by using the datatemplate:

                <FlipView x:Name="FlipView1" Width="300" BorderBrush="Black" BorderThickness="1">
                    <FlipView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <Image Source="{Binding Image1}" Width="300"/>
                                <Image Source="{Binding Image2}" Width="300"/>
                                <Image Source="{Binding Image3}" Width="300"/>
                            </StackPanel>
                        </DataTemplate>
                    </FlipView.ItemTemplate>
                </FlipView>

    In the Data Model which is SampleDataSource.cs, I made some changes. Don't forget to change you .cs file for binding to a new object 

    // var sampleData = new Controls_FlipView.Data.SampleDataSource();

    var sampleData = new Controls_FlipView.Data.SampleDataSource1();

    [Windows.Foundation.Metadata.WebHostHidden]
        public abstract class SampleDataCommon1 : SDKTemplate.Common.BindableBase
        {
            private static Uri _baseUri = new Uri("ms-appx:///");
    
            public SampleDataCommon1(String picture1, String picture2, String picture3)
            {
                this._picture1 = picture1;
                this._picture2 = picture2;
                this._picture3 = picture3;
            }
    
    
            private Uri _image1 = null;
            private Uri _image2 = null;
            private Uri _image3 = null;
            private String _picture1 = null;
            private String _picture2 = null;
            private String _picture3 = null;
    
            public Uri Image1
            {
                get
                {
                    return new Uri(SampleDataCommon1._baseUri, this._picture1);
                }
    
                set
                {
                    this._picture1 = null;
                    this.SetProperty(ref this._image1, value);
                }
            }
            public Uri Image2
            {
                get
                {
                    return new Uri(SampleDataCommon1._baseUri, this._picture2);
                }
    
                set
                {
                    this._picture2 = null;
                    this.SetProperty(ref this._image2, value);
                }
            }
            public Uri Image3
            {
                get
                {
                    return new Uri(SampleDataCommon1._baseUri, this._picture3);
                }
    
                set
                {
                    this._picture3 = null;
                    this.SetProperty(ref this._image3, value);
                }
            }
        }

    Furthermore, some changes here:

    public class SampleDataItem1 : SampleDataCommon1
        {
            public SampleDataItem1(String picture1, String picture2, String picture3)
                : base(picture1, picture2, picture3)
            {
            }
    
        }
    
        public sealed class SampleDataSource1
        {
            private ObservableCollection<object> _items = new ObservableCollection<object>();
            public ObservableCollection<object> Items
            {
                get { return this._items; }
            }
    
            public SampleDataSource1()
            {
                Items.Add(new SampleDataItem1("Assets/Sunset.jpg",
                        "Assets/Grapes.jpg",
                        "Assets/Cliff.jpg"
                        ));
                Items.Add(new SampleDataItem1("Assets/Grapes.jpg",
                        "Assets/Grapes.jpg",
                        "Assets/Grapes.jpg"
                        ));
                Items.Add(new SampleDataItem1("Assets/Cliff.jpg",
                        "Assets/Cliff.jpg",
                        "Assets/Rainier.jpg"
                        ));
                Items.Add(new SampleDataItem1("Assets/Cliff.jpg",
                        "Assets/Cliff.jpg",
                        "Assets/Sunset.jpg"
                        ));
                Items.Add(new SampleDataItem1("Assets/Cliff.jpg",
                        "Assets/Cliff.jpg",
                        "Assets/Valley.jpg"
                        ));
            }
        }



    James He
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, August 8, 2013 3:33 AM
    Moderator