CODEWITHSUNDEEP
wpfxamlstyles
Vandana Chandola
Vandana Chandola

Reputation: 87

While overriding a button's default style using a resource, click event is not triggered

I'm trying to create a Tic Tac Toe game in WPF and using buttons in a 3X3 grid for the same. I want to override the default button style, for example, while hovering over the button, the background color shouldn't change. But after creating a static resource, the button click event isn't getting triggered anymore. Here's my code :

Button (this button doesn't trigger the click event): 

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

Button (this button triggers the click event):

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

Resource:

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

Also, the border thickness property set in Button1X1 is not reflected.

Upvotes: 1

Views: 1136

Answers (1)

15ee8f99-57ff-4f92-890c-b56153
15ee8f99-57ff-4f92-890c-b56153

Reputation: 37059

The visual elements of the Button control are created by its template. You replaced the template with a template which doesn't create anything, so there's nothing to click on.

If you want the button always to be transparent, you don't need the trigger to set it that way on mouse over. The style below will create a clickable button which by default has no visible UI -- but it's still there, so you can still click on it. 

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

Here's a quick example of a Tic-Tac-Toe board. I used UniformGrid instead of regular Grid to simplify the XAML. You may want to change the height and width of the grid. Note I just altered the style above so it has a BorderBrush that isn't transparent.

I didn't add click handlers. You already know how to add those.

A much more sophisticated approach to this would be an ItemsControl with an ItemTemplate, but this will get you going for now. 

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

Upvotes: 1

Related Questions