Question

I have a page called AllPageView which has a GridView. The datatemplate for the GridView is as follows

<GridView.ItemTemplate>
     <DataTemplate>
          <Canvas Width="{Binding TemplateWidth}" Height="{Binding TemplateHeight}">
              <Canvas.Background>
                  <ImageBrush ImageSource="{Binding PageBackground}"/>
               </Canvas.Background>
                <Image Height="{Binding TemplateHeight}" Width="{Binding TemplateWidth}" Source="{Binding Page}" Stretch="Uniform" Opacity="1" CacheMode="BitmapCache" />

                   <StackPanel x:Name="EditDeleteStackPanel" Width="{Binding TemplateWidth}" Height="{Binding TemplateHeight}" Opacity="0.95">
                       <Button x:Name="NoteDelete"  HorizontalAlignment="Right"   VerticalAlignment="Top" Foreground="{x:Null}" Tapped="NoteDelete_Tapped" MinWidth="50" MinHeight="50" Margin="0,0,10,0" BorderBrush="{x:Null}" >
                           <Button.Background>
                               <ImageBrush ImageSource="{Binding Delete}"/>
                           </Button.Background>
                       </Button>
                       <Button x:Name="NoteEdit"  HorizontalAlignment="Right"   VerticalAlignment="Top"   FontFamily="Segoe Script" FontSize="24" BorderBrush="{x:Null}" Tapped="NoteEdit_Tapped" Foreground="{x:Null}" MinWidth="50" MinHeight="50" Margin="0,0,10,0">
                           <Button.Background>
                               <ImageBrush ImageSource="{Binding Edit}"/>
                           </Button.Background>
                       </Button>
                  </StackPanel>
           </Canvas>
       </DataTemplate>
</GridView.ItemTemplate>

The Image has its height and width bound to TemplateHeight and TemplateWidth of the Page_Collection class respectively. I have a better and setter for TemplateHeight and TemplateWidth.

public static int TemplateWidth
{
    get { return m_templateWidth; }
    set 
    { 
        m_templateWidth = value;                
    }
}

The problem is, I have now a need to resize the image sizes from a page called General.
When a toggle switch is toggled, I need to change the size of the image. Like this

private void OnCompactCategoryToggled(object sender, RoutedEventArgs e)
{
    if (compactCateg.IsOn == true)
    {
        Page_Collection.TemplateHeight = 100;
        Page_Collection.TemplateWidth = 350;
    }
    else
    {
        Page_Collection.TemplateHeight = 200;
        Page_Collection.TemplateWidth = 700;
    }
}

Though the AllPageView page is bound to Page_Collection, the values does not get updated and hence the image size is the same. General is a Flyout in the SettingsPane.

I’m very new to Windows 8 and this is my first time DataBinding. Could someone please tell me where I’m going wrong or if I’m missing something?

EDIT

This is the code behind for AllPageView. I call Load_PageCollection in the constructor of the class

public async void Load_PageCollection()
{
    m_pageConfig = new PageConfig();
    Page_Collection[] tmppage = await m_pageConfig.Read_FromJSONFile(App.PAGECONFIG);
    List<Page_Collection> tmp;
    if (tmppage != null)
    {
        for (int i = 0; i < tmppage.Length; i++)
        {
            tmppage[i].UpdateCompletionStatus();
        }
        tmp = tmppage.ToList();
        ObservableCollection<Page_Collection> NoteCol = new ObservableCollection<Page_Collection>(tmp.ToList<Page_Collection>());
        PageCollection = NoteCol;
        PageLV.DataContext = PageCollection;
        m_pageManager.InitilizeWithFileLoc(PageCollection.ToArray());
    }
    else
    {
        PageCollection = new ObservableCollection<Page_Collection>();
        PageLV.DataContext = PageCollection;// PageLV is the grid view. The gridview, the image and a stackpanel.
    }
}

Answer 1

Edited after updated code.

You will need to move your template properties into a separate class that supports INotifyPropertyChanged and then refer to this class from each of your PageCollection instances….

public class PageCollectionTemplate : INotifyPropertyChanged {

   private static readonly void m_Instance=new PageCollectionTemplate();

   private int m_templateWidth;

   public static PageCollectionTemplate Instance {
     get { return m_Instance; }
   }

   public  int TemplateWidth {
        get { return m_templateWidth; }

        set 
        { 
            if (m_templateWidth == value) return;
            m_templateWidth = value;                
            OnPropertyChanged("TemplateWidth");
        }
    }
    // Do same for template height...

   protected void OnPropertyChanged(string propertyName) {
     var handler=PropertyChanged;
     if (handler!=null) handler(this,new PropertyChangedEventArgs(propertyName));
  }

  public event PropertyChangedEventHandler PropertyChanged;

}

UPDATE, I missed out this bit before,iIn your page collection class

public PageCollectionTemplate Tempate { 
    get { return PageCollectionTemplate.Instance; }
}

Then update your bindings to be {Binding Template.TemplateWidth}.

There are alternative implementations you could by setting the source of the binding to the singleton instance eg:

{Binding TemplateWidth,Source={x:Static w:PageCollectionTemplate.Instance}

But you will need to define the namespace for w

Do not be tempted to implement the following because the notify property changed events will not fire!

public int TemplateWidth {
   get { return PageCollectionTemplate.Instance.TemplateWidth; }
   set { PageCollectionTemplate.Instance.TemplateWidth=value; }
}