Create a simple wpf trigger on one object that affects another

Question

This is the closest that I have come to creating a simple trigger on this. I just want the datagrid's IsMouseOver == true to show the button. The problem is that the Setter's TargetName says: The property 'TargetName' does not represent a valid target for the 'Setter' because an element named 'ButtonExpand' was not found. Make sure that the target is declared before any Setters, Triggers or Conditions that use it. What am I doing wrong?

<UserControl.Resources>
    <Style TargetType="DataGrid">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="ButtonExpand" Property="Visibility" Value="Visible" />
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>
<Grid>



    <DataGrid Name="MainDataGrid" ItemsSource="{Binding Programs}" IsReadOnly="True" AutoGenerateColumns="false" >
        <DataGrid.Columns>
            <DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
            <DataGridTextColumn Header="Version" Binding="{Binding Version}"/>
            <DataGridTextColumn Header="Publisher" Binding="{Binding Publisher}"/>
        </DataGrid.Columns>
    </DataGrid>

    <Button Name="ButtonExpand" Height="25" Width="25" HorizontalAlignment="Right" VerticalAlignment="Bottom" Visibility="Hidden">+</Button>
</Grid>

Solution

TargetName is not intended for use within the Triggers collection of a Style. A style does not have a namescope, so it does not make sense to refer to elements by name there. But a template (either DataTemplate or ControlTemplate) does have a namescope.

See this link.

You can do it the other way around with a DataTrigger for the Button. Note that you must set the Property Visibility within the Style for the DataTrigger to work.

<Grid Name="MainGrid"> 

    <DataGrid ItemsSource="{Binding Programs}"
              IsReadOnly="True"
              AutoGenerateColumns="false" > 
      <DataGrid.Columns> 
        <DataGridTextColumn Header="Name" Binding="{Binding Name}"/> 
        <DataGridTextColumn Header="Version" Binding="{Binding Version}"/> 
        <DataGridTextColumn Header="Publisher" Binding="{Binding Publisher}"/> 
      </DataGrid.Columns> 
    </DataGrid> 

    <Button Name="ButtonExpand"
            Height="25"
            Width="25"
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom"
            Content="+">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Visibility" Value="Hidden"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=MainGrid,
                                                   Path=IsMouseOver}" 
                                 Value="True">
                        <Setter Property="Visibility" Value="Visible" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>
</Grid>

Another way to do it would be to bind Visibilty of ButtonExpand to the IsMouseOver property of the DataGrid with a converter.

Comments

[Bluebaron]

When the mouse is over the button it flickers.

[Bluebaron]

This is mostly right. I can't give your answer props because I don't have level 15 or something. I posted my answer below but I can't click it as the answer for 2 days. Thank you so much. You definitely deserve the answer for this but I don't want to screw anyone up with the same question.

[Ray Burns]

@Bluebaron: I edited your two changes into Meleak's answer, so now you can delete your answer and mark his as correct. The two changes were Collapsed -> Hidden, MainDataGrid -> MainGrid, and to add the surrounding code to show where MainGrid is defined.

[Ray Burns]

I edited your two changes into Meleak's answer, so now you can delete this answer and mark Meleak's answer as correct.

[Fredrik Hedblad]

Right, I don't know what I was thinking there :) Nice edit Ray! Glad it worked with the changes Bluebaron