Flashing DataGrid Cell - How to do it properly
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 5 of 5

Thread: Flashing DataGrid Cell - How to do it properly

  1. #1
    Join Date
    Nov 2007
    Posts
    5

    Flashing DataGrid Cell - How to do it properly

    Hi,

    I am developing an application that requires showing data in a datagrid and having a "flashing" animation when the value of a cell changes.

    My (business object) class implements the INotifyPropertyChanged interface. I have a list of that class (via ListCollectionView)

    I've figured out a way to do it using DataGridTemplateColumn and a DataTemplate:

    In Window.Resources:
    <DataTemplate x:Key="FlashingCellMyProperty">
    <TextBlock Name="TextBlockValue" Text="{Binding lMyProperty, Mode=OneWay,NotifyOnTargetUpdated=True}">
    <TextBlock.Background>
    <SolidColorBrush x:Name="bgBrush" />
    </TextBlock.Background>
    <TextBlock.Triggers>
    <EventTrigger SourceName="TextBlockValue" RoutedEvent="Binding.TargetUpdated">
    <BeginStoryboard HandoffBehavior="Compose">
    <Storyboard>
    <ColorAnimation Duration="0:0:0.03" Storyboard.TargetName="bgBrush" Storyboard.TargetProperty="Color" To="Red" AutoReverse="True"/>
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>
    </TextBlock.Triggers>
    </TextBlock>
    </DataTemplate>

    Then later in my window I have a grid that contains the DataGrid:
    <DataGrid AutoGenerateColumns="False" Name="dataGrid1" ItemsSource="{Binding MyList}">
    <DataGrid.Columns>
    <DataGridTextColumn Header="Strike" Binding="{Binding ExpirationPrice}"/>
    <DataGridTemplateColumn Header="My Property" CellTemplate="{StaticResource FlashingCellMyProperty}"/>
    </DataGrid.Columns>
    </DataGrid>

    This works fine but it seem to me a little wasteful to have a data template for each property. Optimally I'd like to have a way to define a "style" or a control template or somehow change existing "stock" column (e.g. DataGridTextColumn) and only change the binding on each column.

    I've search a lot online but didn't find the right path to follow. I am new to WPF and trying to read but there's much to read and I am not sure what subject I need to learn.

    Thanks!
    Last edited by tomercagan; August 22nd, 2011 at 06:28 AM. Reason: Mistake in ItemSource used

  2. #2
    Join Date
    Nov 2007
    Posts
    5

    Talking Re: Flashing DataGrid Cell - How to do it properly

    OK.
    After spending a few more hours on this matter I've found a way of doing it using a style.

    In resources you define a style. The style must target TextBlock (I guess underlaying control in a DataGridTextColumn:
    <Style TargetType="{x:Type TextBlock}" x:Key="MyStyle">
    <Setter Property="Background">
    <Setter.Value>
    <SolidColorBrush Color="Transparent"/>
    </Setter.Value>
    </Setter>
    <Style.Triggers>
    <EventTrigger RoutedEvent="Binding.TargetUpdated">
    <BeginStoryboard HandoffBehavior="Compose">
    <Storyboard TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)">
    <ColorAnimation Duration="0:0:0.03" To="Red" AutoReverse="True"/>
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>
    </Style.Triggers>
    </Style>

    Then in your datagrid you just set the style of the columm:
    <DataGridTextColumn Header="Value" Binding="{Binding Value, Mode=OneWay, NotifyOnTargetUpdated=True}" ElementStyle="{StaticResource MyStyle}"/>

    A few things to note:
    * In the style you must set the background with a solid brush instance. Transperant color may be a good choice.
    * In the story board you update the target property using the full qualification. Note the end is SolidColorBrush.Color. Have we not set it before an exception would have been thrown - that's becuase the initial value of the background wasn't a solid brush and the cast required in the target property would have faild.
    * For a "complete" animation it is advisable to set BeginStoryboard's HandoffBehavior to "Compose". This prevents the background color to eventually stay red in case of many consecutive events being triggered. Another approach I've seen was using StopStoryBoard before BeginStoryBoard but didn't try.
    * In the DataGridTextColumn Binding you must set NotifyOnTargetUpdated=True or the event doesn't fire...

    That's it - quite easy when you know how...

    Attached example project...
    Attached Files Attached Files

  3. #3
    Join Date
    Sep 2011
    Posts
    1

    Re: Flashing DataGrid Cell - How to do it properly

    Many thinks to tomercagan for figuring this out. I had a similar requirement for my application and this works really well! Thanks for posting!

  4. #4
    Join Date
    Nov 2007
    Posts
    5

    Wink Re: Flashing DataGrid Cell - How to do it properly

    Happy to help

  5. #5
    Join Date
    Jun 2003
    Location
    Lahore
    Posts
    31

    Re: Flashing DataGrid Cell - How to do it properly

    @tomercagan your provided sample helped me a lot. Thanks again.
    May Allah keep this world Peaceful. (Aameen)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center