Question

是否有某种“最佳实践”手册可用于为自助服务终端触摸屏创建适当的GUI？这些应用程序需要在不同的屏幕分辨率和更重要的屏幕比例上具有一致的外观和感觉（因为所有内容都呈现为矢量，因此屏幕分辨率和DPI不应该是WPF的问题）。

以此截图为例，我尝试为触摸屏创建简单的键盘。我使用了UniformGrid，因此每个按钮都会获得相同大小的单元格：

enter image description here

以下是此代码：

    <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是不可能的。这不是我想在某些自助服务终端应用程序上使用的键盘，所以下一个更好的版本如下：

enter image description here

    <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的整体外观是可怕的。

另请注意，在此版本中，我将边距设置为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>

这会产生预期的效果吗？

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

1 个答案: