VB のたまご

作成日: 2017/10/01, 更新日: 2017/10/01


WPF アプリでボタンが反応しない

  •  ちょっとテスト動作を確認したくて、簡単な WPF アプリケーションを作成して動かそうとしたところ、 ボタンが反応しない現象に出くわしましたので共有します。


現象、ボタンが無反応になってしまう

  •  MainWindow.xaml
  • <Window x:Class="MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:WpfApplication4"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <Button Content="button1" Margin="100" Click="Button_Click" />
            <TextBlock Text="textblock1" Name="textblock1" />
        </Grid>
    </Window>
    

  •  MainWindow.xaml.vb
  • Class MainWindow
    
        Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
            Me.textblock1.Text = "change"
        End Sub
    
    End Class
    

  •  これを実行すると、ボタンをクリックしても反応が無くなります。それ以外にも、マウスオーバー時のアニメーションも無反応になります。

  •  ただし、Tab キーを押すとフォーカスがボタンに移ってきて、Space キーを押すことで、ボタンを押すことができます。 でも、突然なんで??と驚きました。


答え、Grid の機能を忘れていたから

  •  レイアウトコントロールの Grid は、コントロールを上に重ねて扱う機能です。 そのため、最初にボタンを配置して、続けてテキスト表示欄を配置すると、コントロール的には、ボタンの上にテキスト表示欄が重なっている状態になります。

  •  つまり、Zオーダー?的にユーザーと会話できるコントロールはテキスト表示欄のみとなってしまいます。 上記から、Grid 上で何とかするためには、ボタンを一番最後に書くことで現象が直るということになります。
  • <Window x:Class="MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:WpfApplication4"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <TextBlock Text="textblock1" Name="textblock1" />
            <Button Content="button1" Margin="100" Click="Button_Click" />
        </Grid>
    </Window>
    

  •  こう書き替えることで、ボタンの反応が復活しました!よかった~。


進まない調査、xaml デザインプレビューで見誤ってしまった

  •  今回のハマりポイントは、xaml デザインのプレビュー(または実行時に表示される画面上のコントロール)で判断してしまうと、 コントロールがかぶっていないことにあります。

  •  見た目的には、画面左上の隅っこにテキスト表示欄がちょこんと表示されてて、画面の中央に、ボタンがどーんと表示されています。 つまり、重なっているようには見えなかったんです。かすってすらいないです。


Grid は、分割して1セル1コントロール配置にしよう

  •  という使い方を通常はしますね、Grid を使う時は。今回は、もうこれ(デフォルト記載の Grid のまま)でいいやと思って、 やってしまったのが間違いでした。