c# - Trying to Understand UWP Data Binding -

so, made simple attempt try out data binding property of class have, but, whatever reason, code anything. it's not throwing errors, must not working right. i'm testing if it'll behave want to, which, in case, set opacity of rectangle zero. here's xaml data template doesn't seem want respond correctly:

        <hubsection x:name="china" width="440" height="460" background="#ff343434" header="china" isheaderinteractive="true" tapped="{x:bind hubsectiontapped}" horizontalalignment="left" verticalalignment="center" margin="50,0,0,0">             <datatemplate x:datatype="data:mainpageview">                 <grid height="460" width="410" verticalalignment="bottom" x:name="chinabackground">                     <image source="assets/chinaflag.bmp" x:name="chinaflag"/>                     <rectangle x:name="chinaselected_rect" width="410" height="30" verticalalignment="bottom" fill="blueviolet" opacity="{x:bind opacity1}"/>                 </grid>             </datatemplate>         </hubsection> 

and here's code behind:

    public mainpageview themainpageview;      public mainpage()     {          this.initializecomponent();         timer = new dispatchertimer();         timer.tick += timer_dyanmicresize;         timer.tick += timer_selectionindicator;         timer.start();          themainpageview = new mainpageview ();     } 

and finally, here's class mainpageview that's referenced:

public class mainpageview {     public int opacity1 {get; set;}     public int opacity2 {get;set;}     public int opacity3 { get; set; }      public mainpageview()     {         this.opacity1 = 0;         this.opacity2 = 0;         this.opacity3 = 0;     } } 

in xaml included xmlns:data="using:testapp.models" (models folder in class mainpageview housed). said, it's not throwing errors, it's not doing either, i'm bit @ loss of start addressing because there aren't errors trace back. in advance guys can provide

hubsection uses datatemplate define content section, content can defined inline, or bound data source. when using binding in datatemplate, need set datacontext property of hubsection provide data source datatemplate.

{x:bind} not use datacontext default source—instead, uses page or user control itself. in code-behind of page or user control properties, fields, , methods.

this right when use {x:bind} directly in page or user control. while inside datatemplate, there little difference.

inside datatemplate (whether used item template, content template, or header template), value of path not interpreted in context of page, in context of data object being templated. bindings can validated (and efficient code generated them) @ compile-time, datatemplate needs declare type of data object using x:datatype.

for more information data binding in uwp, please check data binding in depth.

to fix issue, need set datacontext in hubsection following:

<hubsection x:name="china" width="440" height="460" background="#ff343434" header="china" isheaderinteractive="true" tapped="{x:bind hubsectiontapped}" horizontalalignment="left" verticalalignment="center" margin="50,0,0,0" datacontext="{x:bind themainpageview}">     <datatemplate x:datatype="data:mainpageview">         <grid height="460" width="410" verticalalignment="bottom" x:name="chinabackground">             <image source="assets/chinaflag.bmp" x:name="chinaflag"/>             <rectangle x:name="chinaselected_rect" width="410" height="30" verticalalignment="bottom" fill="blueviolet" opacity="{x:bind opacity1}"/>         </grid>     </datatemplate> </hubsection> 

here when using {x:bind} in hubsection, uses page data source hubsection in page directly. can themainpageview field in code-behind. {x:bind} in datatemplate, can't data source data object being templated not page. need provide data object setting datacontext property of hubsection.