正确使用Viewbox用于WPF信息亭触摸屏应用程序

Question

是否有某种“最佳做法”手册，可用于为信息亭触摸屏创建正确的GUI？ 这些应用程序必须在不同的屏幕分辨率（更重要的是屏幕比例）上具有一致的外观（因为所有内容都呈现为矢量，因此WPF不应将屏幕分辨率和DPI视为问题）。

以这个屏幕快照为例，我尝试为触摸屏创建简单的键盘。 我使用了UniformGrid，以便每个按钮都具有相等大小的单元格：

这是此代码：

    <TabItem Header="Test 1">
        <ItemsControl ItemsSource="{Binding KeyboardItems}" SnapsToDevicePixels="True">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Viewbox Margin="5">
                        <Button Content="{Binding}"></Button>
                    </Viewbox>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="8" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </TabItem>

请注意，所有按钮的大小都适合其内容，使其无法拉伸，因此每个按钮都有其自己的大小...这是Viewbox缩放其内容的方式，当然，这种GUI也毫无疑问。 这不是我要在某些信息亭应用程序上使用的键盘，因此以下是更好的版本：

    <TabItem Header="Test 2">
        <ItemsControl ItemsSource="{Binding KeyboardItems}" SnapsToDevicePixels="True">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                        <Button Margin="5">
                            <Viewbox>
                                <TextBlock Text="{Binding}" />
                            </Viewbox>
                        </Button>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="8" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </TabItem>

现在，这有了一些改善，因为Viewbox现在包装内容而不是整个按钮。 但是请注意，因为我们现在包装按钮的内容而不是整个按钮，所以按钮的边框现在没有缩放。 我希望这也可以扩展，而不仅仅是内容。 在第一个示例中，我们遇到了这个问题，但是GUI的整体外观很糟糕。

还要注意，在此版本中，我已将Margin设置为Button，在Viewbox的第一个版本中。 这意味着在第一个版本中，边距也将缩放（我想要！），而在第二个版本中，对于任何屏幕尺寸，它将保持不变。 因此，对于真正的大屏幕，按钮之间的空白空间将变得相对较小，尽管它们的大小绝对是固定的（不是我想要的大小！）。

这是生成键盘按钮的代码：

public partial class MainWindow : Window
{
    public List<string> KeyboardItems { get; set; }

    public MainWindow()
    {
        KeyboardItems = new List<string>();
        for (char c = 'A'; c <= 'Z'; c++)
        {
            KeyboardItems.Add(c.ToString());
        }
        KeyboardItems.Add("Space");

        DataContext = this;
        InitializeComponent();
    }
}

诸如此类的问题都是围绕WPF触摸屏信息亭的开发而来的，所以我想听听您在处理扩展问题时遇到的一些想法和解决方案。

Answer 1

您没有向我们展示测试3，我认为可能是这样的：

<TabItem Header="Test 3">
    <Viewbox>
        <ItemsControl ItemsSource="{Binding KeyboardItems}" SnapsToDevicePixels="True">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                        <Button Margin="5">
                            <TextBlock Text="{Binding}" />
                        </Button>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="8" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Viewbox>
</TabItem>

有效果吗？