c# - How to add custom property to user control for binding purposes? -

c# - How to add custom property to user control for binding purposes? -

i making user command named musicalnotationbox store only 1 musicalnotation (it's obligatory musicalnotationbox have non-null musicalnotation object binded). , need bind musicalnotation property xaml (mvvm) 1 in musicalnotationboxmodelview.

musicalnotationbox usercontrol used visualize particular musicalnotation in given collection.

so, able way (with modelview datacontext, ofc)

<itemscontrol itemssource={binding listofmusicalnotations}> <itemscontrol.itemspanel> <itemspaneltemplate> <stackpanel orientation="horizontal" isitemshost="true"/> </itemspaneltemplate> </itemscontrol.itemspanel> <itemscontrol.itemstemplate> <datatemplate> <c:musicalnotationbox musicalnotation={binding musicalnotation}/> </datatemplate> </itemscontrol.itemtemplate> </itemscontrol>

(added itemscontrol tag clarify way how <musicalnotationbox>, think, should used.)

how accomplish this?

extra :

this musicalnotationbox.xaml (just in case it's needed)

<usercontrol x:class="numberedmusicalscoresusercontrol.musicalnotationbox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:numberedmusicalscoresusercontrol.musicalnotationboxproperties" mc:ignorable="d"> <usercontrol.resources> <local:dotconverter x:key="dotconverter"/> <local:noteconverter x:key="noteconverter"/> <local:accidentalconverter x:key="accidentalconverter"/> <local:backgroundconverter x:key="backgroundconverter"/> </usercontrol.resources> <usercontrol.inputbindings> <keybinding key="oemperiod" command="{binding keyboardhotkeycommand}" commandparameter="blank"/> <keybinding key="d0" command="{binding keyboardhotkeycommand}" commandparameter="rest"/> <keybinding key="d1" command="{binding keyboardhotkeycommand}" commandparameter="n1"/> <keybinding key="d2" command="{binding keyboardhotkeycommand}" commandparameter="n2"/> <keybinding key="d3" command="{binding keyboardhotkeycommand}" commandparameter="n3"/> <keybinding key="d4" command="{binding keyboardhotkeycommand}" commandparameter="n4"/> <keybinding key="d5" command="{binding keyboardhotkeycommand}" commandparameter="n5"/> <keybinding key="d6" command="{binding keyboardhotkeycommand}" commandparameter="n6"/> <keybinding key="d7" command="{binding keyboardhotkeycommand}" commandparameter="n7"/> <keybinding modifiers="control" key="p" command="{binding keyboardhotkeycommand}" commandparameter="sharp"/> <keybinding modifiers="control" key="t" command="{binding keyboardhotkeycommand}" commandparameter="flat"/> <keybinding modifiers="control" key="oemplus" command="{binding keyboardhotkeycommand}" commandparameter="octave+"/> <keybinding modifiers="control" key="oemminus" command="{binding keyboardhotkeycommand}" commandparameter="octave-"/> <keybinding modifiers="control" key="oemperiod" command="{binding keyboardhotkeycommand}" commandparameter="dot+"/> <keybinding modifiers="control" key="oemcomma" command="{binding keyboardhotkeycommand}" commandparameter="dot-"/> </usercontrol.inputbindings> <grid x:name="grid" margin="10,5,10,5" horizontalalignment="center" verticalalignment="center" background="{binding isselectedorfocused, converter={staticresource backgroundconverter}, mode=oneway}"> <grid.columndefinitions> <columndefinition width="auto"/> <columndefinition width="auto"/> <columndefinition width="auto"/> </grid.columndefinitions> <grid.rowdefinitions> <rowdefinition height="auto"/> <rowdefinition height="auto"/> <rowdefinition height="auto"/> </grid.rowdefinitions> <textblock grid.column="0" grid.row="1" text="b" visibility="{binding path=musicalnotation.accidental, converter={staticresource accidentalconverter}, converterparameter=fl, mode=oneway}" fontsize="15" fontfamily="couriernew" horizontalalignment="center" verticalalignment="center"/> <path grid.column="1" grid.row="1" stroke="black" strokethickness="1" stretch="fill" visibility="{binding path=musicalnotation.accidental, converter={staticresource accidentalconverter}, converterparameter=sp, mode=oneway}" > <path.data> <linegeometry startpoint="1,0" endpoint="0,1"> <linegeometry.transform> <rotatetransform centerx="0" centery="0" angle="30"/> </linegeometry.transform> </linegeometry> </path.data> </path> <textblock grid.column="1" grid.row="1" text="{binding path=musicalnotation.note, converter={staticresource noteconverter}, mode=oneway}" fontsize="15" fontfamily="couriernew" horizontalalignment="center" verticalalignment="center" margin="2.5,0,2.5,0"/> <itemscontrol grid.column="1" grid.row="0" itemssource="{binding path=musicalnotation.octave, converter={staticresource dotconverter}, converterparameter=top, mode=oneway}"> <itemscontrol.itemspanel> <itemspaneltemplate> <stackpanel isitemshost="true"/> </itemspaneltemplate> </itemscontrol.itemspanel> <itemscontrol.itemtemplate> <datatemplate> <ellipse horizontalalignment="center" verticalalignment="top" margin="{binding margin}" fill="{binding fill}" width="{binding diameter}" height="{binding diameter}"/> </datatemplate> </itemscontrol.itemtemplate> </itemscontrol> <itemscontrol grid.column="1" grid.row="2" itemssource="{binding path=musicalnotation.octave, converter={staticresource dotconverter}, converterparameter=bot, mode=oneway}"> <itemscontrol.itemspanel> <itemspaneltemplate> <stackpanel isitemshost="true"/> </itemspaneltemplate> </itemscontrol.itemspanel> <itemscontrol.itemtemplate> <datatemplate> <ellipse horizontalalignment="center" verticalalignment="bottom" margin="{binding margin}" fill="{binding fill}" width="{binding diameter}" height="{binding diameter}"/> </datatemplate> </itemscontrol.itemtemplate> </itemscontrol> <itemscontrol grid.column="2" grid.row="1" itemssource="{binding path=musicalnotation.dot, converter={staticresource dotconverter}, converterparameter=right, mode=oneway}"> <itemscontrol.itemspanel> <itemspaneltemplate> <stackpanel orientation="horizontal" isitemshost="true"/> </itemspaneltemplate> </itemscontrol.itemspanel> <itemscontrol.itemtemplate> <datatemplate> <ellipse horizontalalignment="left" verticalalignment="center" margin="{binding margin}" fill="{binding fill}" width="{binding diameter}" height="{binding diameter}"/> </datatemplate> </itemscontrol.itemtemplate> </itemscontrol> </grid>

there no need create additional properties. command defined 1 viewmodel - utilize datacontextproperty(docs, example). in case automatically set each of items - that's behaviour of wpf. bind properties need within usercontrol(it's datacontext initialized automatically wpf engine)

<itemscontrol itemssource="{binding listofmusicalnotations}"> <itemscontrol.itemspanel> <itemspaneltemplate> <stackpanel orientation="horizontal" isitemshost="true"/> </itemspaneltemplate> </itemscontrol.itemspanel> <itemscontrol.itemstemplate> <datatemplate> <c:musicalnotationbox/> </datatemplate> </itemscontrol.itemtemplate> </itemscontrol>

if want larn adding properties read add dependency property control.

p.s.: can define musicalnotationbox not user command template in resources:

<resources> <datatemplate x:key="musicalnotationbox"> <textbox text="{binding name}"/> </datatemplate> </resources>

and utilize like

<itemscontrol.itemstemplate> <staticresource x:key="musicalnotationbox"/> </itemscontrol.itemtemplate>

c# wpf data-binding mvvm user-controls