I’m new to WPF. I am creating an application that will allow me to control my MIDI devices. For this, I created a keyboard user control. I think it looks great, but I can’t figure out how to design it so that it scales when drawn to a window. Can anybody help with any tips on modifying the 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 a series of stacked panel grids because I got lazy with the margin-left. I don’t mind restructuring that if needed. It was just easy to create a single octave and cut+paste that way.
You can use a
ViewBoxas a parent container. It will scale the contents in yourStackPanelto fit the size of the Window.