2

是否有某种“最佳实践”手册来为信息亭触摸屏创建适当的 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 触摸屏信息亭的开发，所以我想听听您在处理缩放问题时提出的一些想法和解决方案。

4

1 回答 1

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>

有没有达到预期的效果？

于 2012-07-12T19:38:31.163 回答