Question

The EditCommandButton style defined below is showing odd behavior; it only shows for the last instance defined (next to the Avatar label below).

I tried making the style x:Shared=”true” and using DynamicResource but with the same result.

I do eventually want the button to invisible until request, which is why you see a trigger for that. But until I figure this out I just have the default visibility at visible.

Can someone explain this behavior and offer a fix?

Cheers,
Berryl

Design View

Runtime View

Button Style

<Style x:Key="EditCommandButtonStyle" TargetType="{x:Type Button}" >
    <Setter Property="Content">
        <Setter.Value>
            <TextBlock Text="a" Foreground="Navy" FontWeight="Bold" FontFamily="Wingdings 3" FontSize="24" Width="30"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="theBorder" Background="Transparent" CornerRadius="4">
                    <ContentPresenter x:Name="theContent" Visibility="Visible" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="theContent" Property="Visibility" Value="Visible"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="theContent" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="theBorder" Property="Background" Value="Orange"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Command" Value="{Binding SelectedSatelliteVm.EditCommand}"/>
</Style>

Usage

<DataTemplate x:Key="PersonInfoEditingControlTemplate">

    <Grid>

        ...

        <Label Grid.Column="0" Grid.Row="0" ... />
        <Button Style="{StaticResource EditCommandButtonStyle}" Grid.Column="1" Grid.Row="0"/>
        <TextBlock .../>

        <Label Grid.Column="0" Grid.Row="1" ... />
        <Button Style="{StaticResource EditCommandButtonStyle}" Grid.Column="1" Grid.Row="1"/>
        <TextBlock .../>

        <TextBlock  Grid.Column="0" Grid.Row="2"  .../>
        <Button Style="{StaticResource EditCommandButtonStyle}" Grid.Column="1" Grid.Row="2"/>
        <Image Grid.Column="2" Grid.Row="2" ... />

    </Grid>

</DataTemplate>

EDIT for Rachel

Look Ma, no triggers! Only the last button shows the arrow though…

<Style x:Key="TestCommandButtonStyle" TargetType="{x:Type Button}" >
    <Setter Property="Content">
        <Setter.Value>
            <TextBlock Text="a" Foreground="Navy" FontWeight="Bold" FontFamily="Wingdings 3" FontSize="24" Width="30"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Command" Value="{Binding SelectedSatelliteVm.EditCommand}"/>
</Style>

the FIX

<Style x:Key="EditCommandButtonStyle" TargetType="{x:Type Button}" >
    <Setter Property="Content" Value="a" />
    <Setter Property="Foreground" Value="Navy" />
    <Setter Property="FontFamily" Value="Wingdings 3" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="FontSize" Value="18" />
    <Setter Property="Width" Value="30" />
    <Setter Property="Height" Value="Auto" />
    <Setter Property="Command" Value="{Binding SelectedSatelliteVm.EditCommand}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="theBorder" CornerRadius="4">
                    <ContentPresenter x:Name="theContent" VerticalAlignment="Center" HorizontalAlignment="Center" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter TargetName="theContent" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="theBorder" Property="Background" Value="Transparent"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="theContent" Property="Visibility" Value="Visible"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="theContent" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="theBorder" Property="Background" Value="Orange"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The style as originally written actually had two problems, both fixed by the style above. (by fixed I mean it works as intended, not that it is the ‘right’ way to do it!):

1. DP Precedence – this is what Rachel’s answer is addressing although her answer. But the only effective fix I found is to set visibility using two triggers for IsMouseOver as shown.
2. Only the last item in the Grid was showing any content! – this one makes no sense to me, but moving the properties previously in the TextBlock content to Setters on the style fixes that.

Answer 1

Dependencey properties defined in the <Tag> have a higher precedence than items defined in triggers, so will always overwrite them.

For example, in this case the button’s Visibility will always be Collapsed regardless of what the trigger is, because the property is defined in the <Button> tag

<Button Visibility="Collapsed">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <DataTrigger Property="{Binding SomeValue}">
                    <Setter Property="Visibility" Value="Visible" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

To make this trigger work, move the Visibility property to a Style Setter, which has a lower precedence than a Style Trigger, so triggered values will overwrite it

<Button>
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Visibility" Value="Collapsed" />
            <Style.Triggers>
                <DataTrigger Property="{Binding SomeValue}">
                    <Setter Property="Visibility" Value="Visible" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

See MSDN’s Dependency Property Precedence List for more information

Edit

As for your second problem about the Content only showing up once, I suspect it is because you have the Content bound in your style, and not the ContentTemplate.

WPF is creating a single instance of the TextBlock arrow, and a control can only have one parent, so after the style is applied, so only one Button can contain the arrow TextBlock

The fix is to use the ContentTemplate property instead of the Content property.

<Setter Property="ContentTemplate">
    <Setter.Value>
        <DataTemplate>
            <TextBlock Text="a" Foreground="Navy" FontWeight="Bold" FontFamily="Wingdings 3" FontSize="24" Width="30"/>
        </DataTemplate>
    </Setter.Value>
</Setter>

Honestly, I’m surprised it didn’t give you an error about Specified element is already the logical child of another element. That is usually what happens in these kind of cases (see my post here for more details)