正确使用 WPF kiosk 触摸屏应用程序的 Viewbox

Question

是否有某种“最佳实践”手册可以为信息亭触摸屏创建适当的 GUI？这些应用程序需要在不同的屏幕分辨率和更重要的屏幕比例下具有一致的外观和感觉（因为所有内容都被渲染为矢量，因此屏幕分辨率和 DPI 不应该成为 WPF 的问题）。

以这个截图为例，我尝试为触摸屏创建简单的键盘。我使用了 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>

有没有达到预期的效果？