Есть ли какое-то руководство по передовой практике для создания правильного графического интерфейса для сенсорных экранов киосков? Эти приложения должны иметь согласованный внешний вид при разных разрешениях экрана и, что более важно, соотношениях сторон экрана (поскольку все отображается в виде векторов, поэтому разрешение экрана и 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 масштабирует свое содержимое, и, конечно же, о таком графическом интерфейсе не может быть и речи. Это не та клавиатура, которую я хочу использовать в некоторых киоск-приложениях, поэтому следующая лучшая версия выглядит следующим образом:
<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 теперь оборачивает содержимое, а не всю кнопку. Обратите внимание, однако, что, поскольку мы теперь оборачиваем содержимое кнопки, а не всю кнопку, граница кнопки теперь не масштабируется. Я хочу, чтобы это тоже масштабировалось, а не только контент. В первом примере у нас было это, но общий вид графического интерфейса был ужасен.
Также обратите внимание, что в этой версии я установил Margin для кнопки, а в первой версии — для окна просмотра. Это означает, что в первой версии маржа тоже будет масштабироваться (хочу!), а во второй версии она будет постоянной для любого размера экрана. Таким образом, для действительно больших экранов белое пространство между кнопками станет относительно меньше, хотя они абсолютно постоянного размера (не то, что я хочу!).
Вот код для генерации кнопок клавиатуры:
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, поэтому я хотел бы услышать некоторые идеи и решения, которые вы придумали при решении проблем масштабирования.
