リソースを使用してボタンのデフォルトスタイルをオーバーライドしているときに、クリックイベントが発生しない

Question

私はWPFでTic Tac Toeゲームを作成しようとしていて、3X3グリッドのボタンを使っています。たとえば、ボタンの上にマウスを置いて、背景色を変更しないで、デフォルトのボタンスタイルをオーバーライドしたいとします。しかし、静的リソースを作成した後、ボタンのクリックイベントはそれ以上トリガーされません。ここに私のコードは次のとおりです。

ボタン（このボタンは、クリックイベントをトリガしません）：

<Button Name="Button1X1" Style="{StaticResource TicTacToeButtonStyle}" Grid.Row="0" Grid.Column="0" Content="" BorderThickness="0, 0, 2.5, 2.5" Click="Button_Click"/> 

ボタン（このボタンは、クリックイベントをトリガー）：

<Button Name="Button1X2" Background="Transparent" Grid.Row="0" Grid.Column="1" Content="" Click="Button_Click"/> 

リソース：

<Window.Resources> 
    <Style x:Key="TicTacToeButtonStyle" TargetType="Button"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter Property="Background" Value="Transparent"></Setter> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 

また、Button1X1で設定された境界線の太さのプロパティは反映されません。

Answer 1

Buttonコントロールのビジュアル要素は、そのテンプレートによって作成されます。テンプレートを何も作成しないテンプレートに置き換えたので、何もクリックする必要はありません。

ボタンを常に透過的にしたい場合は、トリガーをマウスの上に置く必要はありません。以下のスタイルは、デフォルトで表示可能なUIを持たないクリック可能なボタンを作成しますが、まだそこにあるので、まだクリックすることができます。

<Style x:Key="TicTacToeButtonStyle" TargetType="Button"> 
    <Setter Property="BorderBrush" Value="Black" /> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="BorderThickness" Value="0" /> 

    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Border 
        BorderBrush="{TemplateBinding BorderBrush}" 
        BorderThickness="{TemplateBinding BorderThickness}" 
        Background="{TemplateBinding Background}" 
        > 
        <ContentPresenter 
         VerticalAlignment="Center" 
         HorizontalAlignment="Center" 
         /> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

ここでは、Tic-Tac-Toeボードの簡単な例を示します。私は、XAMLを単純化するために、通常のグリッドの代わりにUniformGridを使用しました。グリッドの高さと幅を変更することができます。注：私は上記のスタイルを変更したので、透明ではないBorderBrushがあります。

クリックハンドラーを追加しませんでした。あなたはすでにそれらを追加する方法を知っています。

もっと洗練されたアプローチは、ItemTemplateを使用したItemsControlですが、これは今すぐ行えます。

<UniformGrid 
    Width="300" 
    Height="300" 
    Rows="3" 
    Columns="3" 
    > 
    <!-- BorderThickness is comma-separated values for Left,Top,Right,Bottom --> 
    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button1X1" BorderThickness="0,0,1,1" /> 
    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button1X2" BorderThickness="1,0,1,1" /> 
    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button1X3" BorderThickness="1,0,0,1" /> 

    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button2X1" BorderThickness="0,1,1,1" /> 
    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button2X2" BorderThickness="1,1,1,1" /> 
    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button2X3" BorderThickness="1,1,0,1" /> 

    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button3X1" BorderThickness="0,1,1,0" /> 
    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button3X2" BorderThickness="1,1,1,0" /> 
    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button3X3" BorderThickness="1,1,0,0" /> 
</UniformGrid>