创建可伸缩 WPF 用户控件的提示 [英] Tips for creating scalable WPF user control

查看：32
本文介绍了创建可伸缩 WPF 用户控件的提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 WPF 的新手.我正在创建一个应用程序，它将允许我控制我的 MIDI 设备.为此，我创建了一个键盘用户控件.我认为它看起来很棒，但我不知道如何设计它以便在绘制到窗口时可以缩放.任何人都可以提供有关修改以下 xaml 的任何提示吗?

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.

推荐答案

您可以使用 ViewBox 作为父容器.它将缩放 StackPanel 中的内容以适应窗口的大小.

You can use a ViewBox as a parent container. It will scale the contents in your StackPanel to fit the size of the Window.

这篇关于创建可伸缩 WPF 用户控件的提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆