SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

WPFの各種コントロールのタッチパネルでの動作

WPF C#

WPFで作成するデスクトップアプリは、タッチ操作で使うシチュエーションは少ないかもしれませんが、、、
タブレットでタッチ操作した時、WPFの標準コントロールがどんな風に動くかを試してみました。

テスト環境

W700D&Windows8.1で試しています。
ディスプレイは11.6型(1920×1080px)で、dpiの設定は150%にしています。

テスト用プログラム

WPFの標準のコントロールを色々と並べてみました。
ButtonやComboBoxなどのサイズは、ツールボックスからデザイナ上にドロップして作られるデフォルトのサイズにしています。

結果

拡大率150%にしていても、やっぱどのコントロールもタッチで操作するには少々小さいと感じます。

ボタン系

Button/ToggleButtonは少し小さいけど、まぁ普通に押せるかな、という感じ。
デザインする時に、少し大きめにしておけば特に問題なさそう。
CheckBoxやRadioButtonは、そのままではタップでの選択は難しいです。
文字を大きくするか、Bullet部分を大きくするなどの対処をしないと、タップ操作は難しそう。
見た目をあまり変えずにタップしやすくしたいのであれば、以下のようにTransparentの背景部分を付けて、タップを受け付けるようにすることもできます。

<RadioButton Height="50"
             Margin="10"
             VerticalContentAlignment="Center"
             Background="Transparent"
             Content="RadioButton1" />
入力系

TextBoxは、このサイズならまぁ何とか押せる。
ただ、ストアアプリと違って、テキストエリアにフォーカスしても、ソフトウェアキーボードが出てきません。
(この辺の動作は、他の各種デスクトップアプリも同じだけど。。)


ListBox/ComboBoxは、デフォルトの状態だと項目同士の間隔が少し近すぎるかな。
そんなにタップミスはしなかったけど、指で隠れて選びたい項目が見えにくい。
ListBox内をフリック/スワイプしてスクロールもできます。
ただ、端までスクロールすると、ウィンドウ全体がスワイプで引っ張ってる方向に少し動き、指を離すと元の場所に戻る、という動作をします。
最近のタッチ操作でのスクロール動作と似てるけど、ウィンドウ全体が動くのは少し変な感じ。。。
このスクロール時の動作は、ScrollViewerも同じでした。


DateTimePickerのカレンダー部分は、指での操作はかなり難しい。
日付を選択しようとすると、かなりイライラする。


Sliderもデフォルトのままでは、タッチ操作は少し難しい。
Thumb部分をつまんでドラッグしようとしても、なかなか掴めない。この辺はControlTemplateでThumbを少し大きめにすれば掴みやすくなりそう。

その他

ToolTipが出る部分をタッチして抑えっぱなしにすると、ToolTipも一応表示されました。
ただし、表示されるのは、ToolTipを設定したコントロールにフォーカスがない場合のみ。
タッチパネルでの操作はカーソルって概念もないし、↑の通りわかりにくい動作なので、タップ操作時にはセオリー通りToolTip表示は使わない方がいいよいかと。。

ScrollViewerはPanningModeプロパティを設定することで、タッチ操作でのスクロールができるようになります。


InkCanvasも普通にタッチで描画できました。
このコントロールは、タッチ操作で使うと楽しい!!


WPFでも、デザインに少し気を使えば、タッチ操作を意識したアプリも十分作れそうな感じです。

テスト用コード
<Window x:Class="ControlTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Width="700"
        Height="500">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <GroupBox Margin="5" Header="ボタン系">
            <StackPanel>
                <Button Width="75"
                        Margin="10"
                        Content="Button" />
                <CheckBox Margin="10" Content="CheckBox" />
                <ToggleButton Width="75"
                              Margin="10"
                              Content="Toggle" />
                <RadioButton Margin="10" Content="RadioButton1" />
                <RadioButton Margin="10" Content="RadioButton2" />
                <RadioButton Margin="10" Content="RadioButton3" />
            </StackPanel>
        </GroupBox>
        <GroupBox Grid.Column="1"
                  Margin="5"
                  Header="入力系">
            <StackPanel>
                <TextBox Width="120"
                         Height="23"
                         Margin="10"
                         Text="TextBox"
                         TextWrapping="Wrap" />
                <ComboBox Grid.Column="2"
                          Width="120"
                          Margin="10"
                          HorizontalAlignment="Left"
                          VerticalAlignment="Top">
                    <ComboBoxItem Content="ComboBoxItem1" />
                    <ComboBoxItem Content="ComboBoxItem2" />
                    <ComboBoxItem Content="ComboBoxItem3" />
                    <ComboBoxItem Content="ComboBoxItem4" />
                    <ComboBoxItem Content="ComboBoxItem5" />
                </ComboBox>
                <ListBox Width="100"
                         Height="100"
                         Margin="10"
                         HorizontalAlignment="Left"
                         VerticalAlignment="Top"
                         ItemsSource="{Binding ListData}" />
                <DatePicker Margin="10"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top" />
                <Slider Grid.Column="2"
                        Margin="10"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Top" />
            </StackPanel>
        </GroupBox>
        <GroupBox Grid.Column="2"
                  Margin="5"
                  Header="その他">
            <StackPanel>
                <TextBlock Margin="10,0,0,30"
                           Text="このテキストにはToolTipを設定しています。"
                           ToolTip="ToolTipの表示テスト" />
                <TextBlock Text="ScrollViewer" />
                <ScrollViewer Height="200"
                              Margin="5"
                              HorizontalScrollBarVisibility="Auto"
                              VerticalScrollBarVisibility="Auto"
                              PanningMode="Both">
                    <Image Source="Images/Koala.jpg" Stretch="None" />
                </ScrollViewer>
                <TextBlock Text="InkCanvas" />
                <InkCanvas Width="150" Height="150" Background="LightGray"/>
            </StackPanel>
        </GroupBox>
    </Grid>
</Window>

    public partial class MainWindow : Window
    {
        public ObservableCollection<string> ListData { get; set; }

        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;

            ListData = new ObservableCollection<string>();
            for(int i = 0; i<100; i++)
            {
                ListData.Add(i.ToString("0000"));
            }
        }
    }