xaml - Tips for creating scalable WPF user control -

i'm new wpf. creating application allow me control midi devices. this, created keyboard user control. think looks great, can't figure out how design scales when drawn window. can tips on modifying below xaml?

<grid>     <stackpanel orientation="horizontal">         <grid>             <polygon name="a0" tag="21" points="0,130 0,200 36,200 36,130 31,130 31,0 0,0 0,130" stroke="black" strokethickness="1" horizontalalignment="left" margin="0,0,0,0" />             <polygon name="asharp0" tag="22" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="31,0,0,0" />             <polygon name="b0" tag="23" points="0,130 0,200 36,200 36,0 15,0 15,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="36,0,0,0" />         </grid>         <grid>             <polygon name="c1" tag="24" points="0,0 0,200 36,200 36,130 22,130 22,0" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="0,0,0,0" />             <polygon name="csharp1" tag="25" points="0,0 0,130 21,130 21,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="22,0,0,0" />             <polygon name="d1" tag="26" points="0,130 0,200 36,200 36,130 29,130 29,0 7,0 7,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="36,0,0,0" />             <polygon name="dsharp1" tag="27" points="0,0 0,130 21,130 21,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="65,0,0,0" />             <polygon name="e1" tag="28" points="0,130 0,200 36,200 36,0 14,0 14,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="72,0,0,0" />             <polygon name="f1" tag="29" points="0,0 0,200 36,200 36,130 21,130 21,0" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="108,0,0,0" />             <polygon name="fsharp1" tag="30" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="129,0,0,0" />             <polygon name="g1" tag="31" points="0,130 0,200 36,200 36,130 26,130 26,0 5,0 5,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="144,0,0,0" />             <polygon name="gsharp1" tag="32" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="170,0,0,0" />             <polygon name="a1" tag="33" points="0,130 0,200 36,200 36,130 31,130 31,0 10,0 10,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="180,0,0,0" />             <polygon name="asharp1" tag="34" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="211,0,0,0" />             <polygon name="b1" tag="35" points="0,130 0,200 36,200 36,0 15,0 15,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="216,0,0,0" />         </grid>         <grid>             <polygon name="c2" points="0,0 0,200 36,200 36,130 22,130 22,0" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="0,0,0,0" />             <polygon name="csharp2" points="0,0 0,130 21,130 21,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="22,0,0,0" />             <polygon name="d2" points="0,130 0,200 36,200 36,130 29,130 29,0 7,0 7,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="36,0,0,0" />             <polygon name="dsharp2" points="0,0 0,130 21,130 21,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="65,0,0,0" />             <polygon name="e2" points="0,130 0,200 36,200 36,0 14,0 14,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="72,0,0,0" />             <polygon name="f2" points="0,0 0,200 36,200 36,130 21,130 21,0" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="108,0,0,0" />             <polygon name="fsharp2" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="129,0,0,0" />             <polygon name="g2" points="0,130 0,200 36,200 36,130 26,130 26,0 5,0 5,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="144,0,0,0" />             <polygon name="gsharp2" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="170,0,0,0" />             <polygon name="a2" points="0,130 0,200 36,200 36,130 31,130 31,0 10,0 10,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="180,0,0,0" />             <polygon name="asharp2" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="211,0,0,0" />             <polygon name="b2" points="0,130 0,200 36,200 36,0 15,0 15,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="216,0,0,0" />         </grid>         <grid>             <polygon name="c3" points="0,0 0,200 36,200 36,130 22,130 22,0" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="0,0,0,0" />             <polygon name="csharp3" points="0,0 0,130 21,130 21,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="22,0,0,0" />             <polygon name="d3" points="0,130 0,200 36,200 36,130 29,130 29,0 7,0 7,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="36,0,0,0" />             <polygon name="dsharp3" points="0,0 0,130 21,130 21,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="65,0,0,0" />             <polygon name="e3" points="0,130 0,200 36,200 36,0 14,0 14,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="72,0,0,0" />             <polygon name="f3" points="0,0 0,200 36,200 36,130 21,130 21,0" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="108,0,0,0" />             <polygon name="fsharp3" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="129,0,0,0" />             <polygon name="g3" points="0,130 0,200 36,200 36,130 26,130 26,0 5,0 5,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="144,0,0,0" />             <polygon name="gsharp3" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="170,0,0,0" />             <polygon name="a3" points="0,130 0,200 36,200 36,130 31,130 31,0 10,0 10,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="180,0,0,0" />             <polygon name="asharp3" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="211,0,0,0" />             <polygon name="b3" points="0,130 0,200 36,200 36,0 15,0 15,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="216,0,0,0" />         </grid>         <grid>             <polygon name="c4" points="0,0 0,200 36,200 36,130 22,130 22,0" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="0,0,0,0" />             <polygon name="csharp4" points="0,0 0,130 21,130 21,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="22,0,0,0" />             <polygon name="d4" points="0,130 0,200 36,200 36,130 29,130 29,0 7,0 7,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="36,0,0,0" />             <polygon name="dsharp4" points="0,0 0,130 21,130 21,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="65,0,0,0" />             <polygon name="e4" points="0,130 0,200 36,200 36,0 14,0 14,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="72,0,0,0" />             <polygon name="f4" points="0,0 0,200 36,200 36,130 21,130 21,0" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="108,0,0,0" />             <polygon name="fsharp4" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="129,0,0,0" />             <polygon name="g4" points="0,130 0,200 36,200 36,130 26,130 26,0 5,0 5,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="144,0,0,0" />             <polygon name="gsharp4" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="170,0,0,0" />             <polygon name="a4" points="0,130 0,200 36,200 36,130 31,130 31,0 10,0 10,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="180,0,0,0" />             <polygon name="asharp4" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="211,0,0,0" />             <polygon name="b4" points="0,130 0,200 36,200 36,0 15,0 15,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="216,0,0,0" />         </grid>         <grid>             <polygon name="c5" points="0,0 0,200 36,200 36,130 22,130 22,0" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="0,0,0,0" />             <polygon name="csharp5" points="0,0 0,130 21,130 21,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="22,0,0,0" />             <polygon name="d5" points="0,130 0,200 36,200 36,130 29,130 29,0 7,0 7,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="36,0,0,0" />             <polygon name="dsharp5" points="0,0 0,130 21,130 21,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="65,0,0,0" />             <polygon name="e5" points="0,130 0,200 36,200 36,0 14,0 14,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="72,0,0,0" />             <polygon name="f5" points="0,0 0,200 36,200 36,130 21,130 21,0" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="108,0,0,0" />             <polygon name="fsharp5" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="129,0,0,0" />             <polygon name="g5" points="0,130 0,200 36,200 36,130 26,130 26,0 5,0 5,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="144,0,0,0" />             <polygon name="gsharp5" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="170,0,0,0" />             <polygon name="a5" points="0,130 0,200 36,200 36,130 31,130 31,0 10,0 10,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="180,0,0,0" />             <polygon name="asharp5" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="211,0,0,0" />             <polygon name="b5" points="0,130 0,200 36,200 36,0 15,0 15,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="216,0,0,0" />         </grid>         <grid>             <polygon name="c6" points="0,0 0,200 36,200 36,130 22,130 22,0" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="0,0,0,0" />             <polygon name="csharp6" points="0,0 0,130 21,130 21,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="22,0,0,0" />             <polygon name="d6" points="0,130 0,200 36,200 36,130 29,130 29,0 7,0 7,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="36,0,0,0" />             <polygon name="dsharp6" points="0,0 0,130 21,130 21,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="65,0,0,0" />             <polygon name="e6" points="0,130 0,200 36,200 36,0 14,0 14,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="72,0,0,0" />             <polygon name="f6" points="0,0 0,200 36,200 36,130 21,130 21,0" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="108,0,0,0" />             <polygon name="fsharp6" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="129,0,0,0" />             <polygon name="g6" points="0,130 0,200 36,200 36,130 26,130 26,0 5,0 5,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="144,0,0,0" />             <polygon name="gsharp6" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="170,0,0,0" />             <polygon name="a6" points="0,130 0,200 36,200 36,130 31,130 31,0 10,0 10,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="180,0,0,0" />             <polygon name="asharp6" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="211,0,0,0" />             <polygon name="b6" points="0,130 0,200 36,200 36,0 15,0 15,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="216,0,0,0" />         </grid>         <grid>             <polygon name="c7" points="0,0 0,200 36,200 36,130 22,130 22,0" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="0,0,0,0" />             <polygon name="csharp7" points="0,0 0,130 21,130 21,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="22,0,0,0" />             <polygon name="d7" points="0,130 0,200 36,200 36,130 29,130 29,0 7,0 7,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="36,0,0,0" />             <polygon name="dsharp7" points="0,0 0,130 21,130 21,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="65,0,0,0" />             <polygon name="e7" points="0,130 0,200 36,200 36,0 14,0 14,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="72,0,0,0" />             <polygon name="f7" points="0,0 0,200 36,200 36,130 21,130 21,0" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="108,0,0,0" />             <polygon name="fsharp7" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="129,0,0,0" />             <polygon name="g7" points="0,130 0,200 36,200 36,130 26,130 26,0 5,0 5,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="144,0,0,0" />             <polygon name="gsharp7" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="170,0,0,0" />             <polygon name="a7" points="0,130 0,200 36,200 36,130 31,130 31,0 10,0 10,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="180,0,0,0" />             <polygon name="asharp7" points="0,0 0,130 20,130 20,0" stroke="black" fill="black" strokethickness="1" width="21" height="130" verticalalignment="top" horizontalalignment="left" margin="211,0,0,0" />             <polygon name="b7" points="0,130 0,200 36,200 36,0 15,0 15,130" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="216,0,0,0" />         </grid>         <grid>             <polygon name="c8" points="0,0 0,200 36,200 36,0" stroke="black" strokethickness="1" width="36" horizontalalignment="left" margin="0,0,0,0" />         </grid>     </stackpanel> </grid> 

i used series of stacked panel grids because got lazy margin-left. don't mind restructuring if needed. easy create single octave , cut+paste way.

you can use viewbox parent container. scale contents in stackpanel fit size of window.