Proper usage of Viewbox for WPF kiosk touch screen applications

Question

Is there some kind of "best practices" manual for creating proper GUI for kiosk touch screens? These applications need to have consistent look and feel across different screen resolutions and more importantly screen ratios (since everything is rendered as vectors so screen resolution and DPI shouldn't be an issue with WPF).

Take for example this screenshot where I tried to create simple keyboard for touch screens. I've used UniformGrid so that each button gets cell of equal size:

Here is the code for this:

    <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>

Notice that all buttons are sized to content which makes them non-stretchable so each button has its own size... This is how Viewbox scales its content and of course this kind of GUI is out of question. This is not the keyboard I want to use on some kiosk application, so the next better version is following:

    <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>

Now this is a bit better as Viewbox is now wrapping the content rather than the whole button. Notice however that because we are now wrapping the button's content rather the whole button the button's border is now not scaled. I want this to be scaled too, not just the content. In the first example we had this but the overall look of the GUI was horrible.

Also notice that in this version I've set Margin to the Button and in the first version on the Viewbox. This means that in the first version margin will scale too (I want that!) while in the second version it will be constant for any screen size. So for really big screens the white space between buttons will become relatively smaller though they are absolutely of constant size (not what I want!).

Here is the code for generating keyboard buttons:

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();
    }
}

Problems like this are all around development of WPF touch screen kiosks so I'd like to hear some ideas and solutions you came about while dealing with scaling issues.

Answer 1

You didn't show us Test 3, which I thought might be this:

<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>

Does that have the desired effect?