Storyboard for a DataTemplate element in Silverlight

Question

I have a DataGrid in my application, which have a column with defined CellTemplate with a text block and a button in it.

I want to show the button only when hover this specific cell. How can i achieve this?

Thanks in advance.

Answer 1

It may be possibly to script a templated storyboard that references other templated items, but I would be too terrified to try it that way :)

If you create the cell contents as a usercontrol (with a text box and button), the animation storyboards are then easily authored for that one control and run via attached ControlStoryboardAction behaviours (I can whip one up in minutes if you need an example).

The control properties for the text box etc need to expose both values and changes (e.g. by implementing them as INotifyPropertyChanged properties or even DependencyProperties), but then you can simply bind the CellTemplate to the child control instead of a TextBox.

Hope this helps.

Answer 2

Here's a solution which uses triggers.

<DataGrid>
    <DataGrid.Items>
        <System:String>hello</System:String>
        <System:String>world</System:String>
    </DataGrid.Items>

    <DataGrid.Columns>
        <DataGridTemplateColumn>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid x:Name="MyGrid" Background="Transparent">
                        <StackPanel>
                            <TextBlock Text="{Binding}"/>
                            <Button x:Name="MyButton" Visibility="Hidden" Content="{Binding}"/>
                        </StackPanel>
                    </Grid>

                    <DataTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True" SourceName="MyGrid">
                            <Trigger.Setters>
                                <Setter TargetName="MyButton" Property="Visibility" Value="Visible"/>
                            </Trigger.Setters>
                        </Trigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>