locked
PivotViewer problem RRS feed

  • Question

  • I know this is a pivot Viewer newbie question, I've been trying to find an answer for couple days+.  Picture not showing. PivotV is running but no pictures.  Images Folder is in the Solution, "/Images".  Here we go:

    I'm adding dummy data to my PivotViewer on the MainPage constructor like this:

    public MainPage()
    {
    InitializeComponent();

    ObservableCollection<Item> items = new ObservableCollection<Item>(); 
    items.Add(new Item() { Name = "Fella", Description = "NJ Visits CT", CreationDate = DateTime.Now.AddDays(322)});
    items.Add(new Item() { Name = "John", Description = "Baby Shower", CreationDate = DateTime.Now.AddDays(122) });
    items.Add(new Item() { Name = "Fella", Description = "Ballon de Handball", CreationDate = DateTime.Now.AddDays(935) });

    (not pointing to img here, How?)

    ....

    pivot.ItemsSource = items;

    This is my class:

    public class Item
    {
    public string Name { get; set; }
    public string Description { get; set; }
    public DateTime CreationDate { get; set; }
    public Image img { get; set; }
    }

    and this is my pivot template,:

     <Grid x:Name="LayoutRoot" Background="White">
    <sdk:PivotViewer Name="pvt" BorderBrush="Azure" BorderThickness="25">

    <sdk:PivotViewer.PivotProperties>
    <sdk:PivotViewerStringProperty Id="Name"
    Options="CanFilter"
    DisplayName="Name"
    Binding="{Binding Name}" />
    <sdk:PivotViewerStringProperty Id="Description"
    Options="CanFilter"
    DisplayName="Description"
    Binding="{Binding Description}" />
    <sdk:PivotViewerDateTimeProperty Id="CreationDate"
    Options="CanFilter"
    DisplayName="Creation Date"
    Binding="{Binding CreationDate}" />


    </sdk:PivotViewer.PivotProperties>

    <sdk:PivotViewer.ItemTemplates>
    <sdk:PivotViewerItemTemplate>
    <Border Width="200" Height="200" BorderBrush="BlanchedAlmond">
    <StackPanel>
    <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
    <TextBlock Text="{Binding CreationDate}" />
    <TextBlock Text="{Binding Description}" Margin="0,10,0,0" />
    <Image Width="185"
    Height="125"
    Source="{Binding ImageUrl}"/>
    </StackPanel>
    </Border>
    </sdk:PivotViewerItemTemplate>
    </sdk:PivotViewer.ItemTemplates>

    </sdk:PivotViewer>
    </Grid>
    </UserControl>

    Pls don't laugh at my ignorance...


    Eduardo Landron

    Saturday, December 21, 2013 2:43 PM

Answers

  • Hello,

    As I inspect your markup, there are two issue.

    #1, in your Item class, there is a property called image, however, you did not set value for it in ObservableCollection

    #2, to bind ObservableCollection to your PivotViewer, you also have to use PagedCollectionView to represent a view PagedCollectionViewpcv = newPagedCollectionView(items);

    Here is a sample piece of markup to demonstrate which works well in my side. please take a look at

    in desinger
     <sdk:PivotViewer x:Name="pvt" BorderBrush="Azure" BorderThickness="25" >
    
                <sdk:PivotViewer.PivotProperties>
                    <sdk:PivotViewerStringProperty Id="Name"
    Options="CanFilter"
    DisplayName="Name"
    Binding="{Binding Name}" />
                    <sdk:PivotViewerStringProperty Id="Description"
    Options="CanFilter"
    DisplayName="Description"
    Binding="{Binding Description}" />
                    <sdk:PivotViewerDateTimeProperty Id="CreationDate"
    Options="CanFilter"
    DisplayName="Creation Date"
    Binding="{Binding CreationDate}" />
    
    
                </sdk:PivotViewer.PivotProperties>
    
                <sdk:PivotViewer.ItemTemplates>
                    <sdk:PivotViewerItemTemplate>
                        <Border Width="200" Height="200" BorderBrush="BlanchedAlmond">
                            <StackPanel>
                                <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                                <TextBlock Text="{Binding CreationDate}" />
                                <TextBlock Text="{Binding Description}" Margin="0,10,0,0" />
                                <!--<Image Width="185"
    Height="125"
    Source="{Binding ImageUrl}"/>-->
                            </StackPanel>
                        </Border>
                    </sdk:PivotViewerItemTemplate>
                </sdk:PivotViewer.ItemTemplates>
    
            </sdk:PivotViewer>
    
    in code behind
    public SilverlightControl4()
            {
                InitializeComponent();
    
                ObservableCollection<Item> items = new ObservableCollection<Item>();
                items.Add(new Item() { Name = "Fella", Description = "NJ Visits CT", CreationDate = DateTime.Now.AddDays(322) });
                items.Add(new Item() { Name = "John", Description = "Baby Shower", CreationDate = DateTime.Now.AddDays(122) });
                items.Add(new Item() { Name = "Fella", Description = "Ballon de Handball", CreationDate = DateTime.Now.AddDays(935) });
    
                PagedCollectionView pcv = new PagedCollectionView(items);
    
                pvt.ItemsSource = items;
            }
    
            protected class Item
            {
                public string Name { get; set; }
                public string Description { get; set; }
                public DateTime CreationDate { get; set; }
                //public Image img { get; set; }
            }
    As you may see, I have commented the Img filed, if you want to use it, you have also add it values in ObservableCollection, if you want to display a link in PrvotViewer, you need convert the URI converter. for details please refer: http://stackoverflow.com/questions/9144383/how-to-display-a-link-in-the-pivotviewer-detail-pane

    Hope this helps, thanks.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by Yanping Wang Friday, December 27, 2013 2:51 AM
    Monday, December 23, 2013 5:53 AM

All replies

  • Hello,

    As I inspect your markup, there are two issue.

    #1, in your Item class, there is a property called image, however, you did not set value for it in ObservableCollection

    #2, to bind ObservableCollection to your PivotViewer, you also have to use PagedCollectionView to represent a view PagedCollectionViewpcv = newPagedCollectionView(items);

    Here is a sample piece of markup to demonstrate which works well in my side. please take a look at

    in desinger
     <sdk:PivotViewer x:Name="pvt" BorderBrush="Azure" BorderThickness="25" >
    
                <sdk:PivotViewer.PivotProperties>
                    <sdk:PivotViewerStringProperty Id="Name"
    Options="CanFilter"
    DisplayName="Name"
    Binding="{Binding Name}" />
                    <sdk:PivotViewerStringProperty Id="Description"
    Options="CanFilter"
    DisplayName="Description"
    Binding="{Binding Description}" />
                    <sdk:PivotViewerDateTimeProperty Id="CreationDate"
    Options="CanFilter"
    DisplayName="Creation Date"
    Binding="{Binding CreationDate}" />
    
    
                </sdk:PivotViewer.PivotProperties>
    
                <sdk:PivotViewer.ItemTemplates>
                    <sdk:PivotViewerItemTemplate>
                        <Border Width="200" Height="200" BorderBrush="BlanchedAlmond">
                            <StackPanel>
                                <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                                <TextBlock Text="{Binding CreationDate}" />
                                <TextBlock Text="{Binding Description}" Margin="0,10,0,0" />
                                <!--<Image Width="185"
    Height="125"
    Source="{Binding ImageUrl}"/>-->
                            </StackPanel>
                        </Border>
                    </sdk:PivotViewerItemTemplate>
                </sdk:PivotViewer.ItemTemplates>
    
            </sdk:PivotViewer>
    
    in code behind
    public SilverlightControl4()
            {
                InitializeComponent();
    
                ObservableCollection<Item> items = new ObservableCollection<Item>();
                items.Add(new Item() { Name = "Fella", Description = "NJ Visits CT", CreationDate = DateTime.Now.AddDays(322) });
                items.Add(new Item() { Name = "John", Description = "Baby Shower", CreationDate = DateTime.Now.AddDays(122) });
                items.Add(new Item() { Name = "Fella", Description = "Ballon de Handball", CreationDate = DateTime.Now.AddDays(935) });
    
                PagedCollectionView pcv = new PagedCollectionView(items);
    
                pvt.ItemsSource = items;
            }
    
            protected class Item
            {
                public string Name { get; set; }
                public string Description { get; set; }
                public DateTime CreationDate { get; set; }
                //public Image img { get; set; }
            }
    As you may see, I have commented the Img filed, if you want to use it, you have also add it values in ObservableCollection, if you want to display a link in PrvotViewer, you need convert the URI converter. for details please refer: http://stackoverflow.com/questions/9144383/how-to-display-a-link-in-the-pivotviewer-detail-pane

    Hope this helps, thanks.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by Yanping Wang Friday, December 27, 2013 2:51 AM
    Monday, December 23, 2013 5:53 AM
  • thank you for answering, ok,... you added the pcv object, but never used it, where I have to use it?  Also I want to show an 185 px x 125 px image with the pivotview + Name, Description and CreationDate on the top.  As I said before I was able to run the PV, but never showed the image.  I went to the link you refered to me, but still don't see how.  If you can write me an example with my data, would be easier for me.  Here is my new code including the imageURL.

    this is code behind:-----------------------------------------

    ObservableCollection<Item> items = new ObservableCollection<Item>();
    items.Add(new Item() { Name = "Margarita", Description = "NJ Visits CT", CreationDate = DateTime.Now.AddDays(322), ImageURL = "Images/Margarita.jpg" });
    items.Add(new Item() { Name = "Migdalia", Description = "Baby Shower", CreationDate = DateTime.Now.AddDays(122), ImageURL = "Images/Margarita.jpg" });
    items.Add(new Item() { Name = "Margarita", Description = "Ballon de Handball", CreationDate = DateTime.Now.AddDays(935), ImageURL = "Images/Bella.jpg" });
    items.Add(new Item() { Name = "Margarita", Description = "Ballon de Waterpolo", CreationDate = DateTime.Now.AddDays(485), ImageURL = "Images/Bella.jpg" });
    items.Add(new Item() { Name = "Migdalia", Description = "Congrats - Engineering Degree", CreationDate = DateTime.Now.AddDays(235), ImageURL = "Images/Bella.jpg" });
    items.Add(new Item() { Name = "Birthday", Description = "Birthday Party", CreationDate = DateTime.Now.AddDays(845), ImageURL = "Images/PtoVallarta.jpg" });
    items.Add(new Item() { Name = "Margarita", Description = "Ballon de basket", CreationDate = DateTime.Now.AddDays(159) });
    items.Add(new Item() { Name = "Margarita", Description = "Ballon de rougby", CreationDate = DateTime.Now.AddDays(194), ImageURL = "Images/PtoVallarta.jpg" });
    items.Add(new Item() { Name = "Birthday", Description = "Birthday de rouge", CreationDate = DateTime.Now.AddDays(3499), ImageURL = "Images/Margarita.jpg" });
    items.Add(new Item() { Name = "Birthday", Description = "Birthday de casa", CreationDate = DateTime.Now.AddDays(9985), ImageURL = "Images/Margarita.jpg" });

    PagedCollectionView pcv = new PagedCollectionView(items);

    pvt.ItemsSource = items;
    }


    public class Item
    {

    public string Name { get; set; }
    public string Description { get; set; }
    public DateTime CreationDate { get; set; }
    public string ImageURL { get; set; }


    }

    xaml  --------------------------------------------------------------

    <Grid x:Name="LayoutRoot" Background="White">


    <sdk:PivotViewer Name="MainPivotViewer">

    <sdk:PivotViewer.PivotProperties>
    <sdk:PivotViewerStringProperty Id="Name"
    Options="CanFilter"
    DisplayName="Name"
    Binding="{Binding Name}" />
    <sdk:PivotViewerStringProperty Id="Description"
    Options="CanFilter"
    DisplayName="Description"
    Binding="{Binding Description}" />
    <sdk:PivotViewerDateTimeProperty Id="CreationDate"
    Options="CanFilter"
    DisplayName="Activity Date"
    Binding="{Binding CreationDate}" /> 

    <sdk:PivotViewerStringProperty Id="ImageURL"
    Options="CanFilter"
    DisplayName="Image URL"
    Binding="{Binding ImageURL}" />  
    </sdk:PivotViewer.PivotProperties>

    <sdk:PivotViewer.ItemTemplates>    

    <sdk:PivotViewerItemTemplate>
    <StackPanel Orientation="Vertical">

    <TextBlock Text="{Binding Name}" Name="txtName" 
    FontWeight="Bold"
    FontSize="12"
    Margin="5,10,0,0" />
    <TextBlock Text="{Binding Description}"
    FontSize="10"
    Margin="5,5,0,0" />

    <TextBlock Text="{Binding CreationDate}"
    Margin="5,5,0,0"
    FontSize="10" />
    <Image Source="{Binding  ImageURL (<----I need help here showing the image----<) }" />  
    </StackPanel> 

    </sdk:PivotViewerItemTemplate>
    </sdk:PivotViewer.ItemTemplates> 

    </sdk:PivotViewer>

    </Grid>

    These are my pictures (just in case u want to use 'em):   www.eduardosphotography.com/smallImages

    thanks in advance


    Eduardo Landron

    Saturday, December 28, 2013 5:09 AM