c# - How to bind text to my custom XAML control? -

i want bind dependencyproperty textbox, need create control allows me write text in property "letter" , sets text of textblock defined in template. i've never done before i'm not sure of how it.

here's .xaml:

<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:my_app">  <style targettype="local:gameletter" >     <setter property="template">         <setter.value>             <controltemplate targettype="local:gameletter">                 <grid>                     <image source="assets/imgs/letter_key.png"/>                     <viewbox margin="10,0">                         <textblock x:name="textblock" fontfamily="assets/fonts/avenirnext.ttf#avenir next" text="{binding letter}" foreground="black" horizontalalignment="center" verticalalignment="center"/>                     </viewbox>                 </grid>             </controltemplate>         </setter.value>     </setter> </style> 

and here's .cs:

 public sealed class gameletter : control {     public gameletter()     {         this.defaultstylekey = typeof(gameletter);     }      public static readonly dependencyproperty letterproperty =         dependencyproperty.register("letter", typeof(string), typeof(gameletter), new propertymetadata(null));      public string letter     {         { return (string)getvalue(letterproperty); }         set { setvalue(letterproperty, value); }     } } 

you're close. problem binding it'll search letter property on datacontext, not on control. can fix using templatebinding:

<style targettype="local:gameletter" >     <setter property="template">         <setter.value>             <controltemplate targettype="local:gameletter">                 <grid>                     <image source="assets/imgs/letter_key.png"/>                     <viewbox margin="10,0">                         <textblock x:name="textblock" fontfamily="assets/fonts/avenirnext.ttf#avenir next" text="{templatebinding letter}" foreground="black" horizontalalignment="center" verticalalignment="center"/>                     </viewbox>                 </grid>             </controltemplate>         </setter.value>     </setter> </style>