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 に設定していることにも注意してください。これは、最初のバージョンではマージンもスケーリングされることを意味します (私はそれが欲しいです!) が、2 番目のバージョンでは画面サイズに対して一定になります。したがって、非常に大きな画面の場合、ボタン間の空白は比較的小さくなりますが、サイズは完全に一定です (私が望むものではありません!)。

キーボード ボタンを生成するコードは次のとおりです。

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 に答える