Animating a dependency property in silverlight

Question

Hi to all,

I am trying out an example of animating a dependency property in order to get a hang of how it works. All it is suppose to do is change the width of a column, but for some reason non of my break points are being hit and clearly nothing happens.

The code is:

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" x:Name="Myself">
    <UserControl.Resources>
        <Storyboard x:Name="Storyboard1">
            <DoubleAnimation  Storyboard.TargetName="Myself" Storyboard.TargetProperty="ColumnWidth" To="0" Duration="00:00:05"/>
        </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid  Background="Black">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform />
                    <SkewTransform />
                    <RotateTransform />
                    <TranslateTransform />
                </TransformGroup>
            </Grid.RenderTransform>
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="Column1"
                                  Width="140" />
                <ColumnDefinition Width="250" />
                <ColumnDefinition Width="250" />
            </Grid.ColumnDefinitions>
            <Rectangle Fill="White" Stroke="Black" Margin="5"/>
            <Rectangle Fill="White" Stroke="Black" Margin="5" Grid.Column="1"/>
            <Rectangle Fill="White" Stroke="Black" Margin="5" Grid.Column="2"/>
        </Grid>

       <StackPanel Grid.Row="1">
               <Button x:Name="button1" Content="Change column width"
                Click="button1_Click" Height="100"/>
       </StackPanel>

    </Grid>

</UserControl>

and for the code behind:

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            Storyboard1.Begin();
        }

        public static readonly DependencyProperty ColumnWidthProperty = DependencyProperty.Register("ColumnWidth",
                                                                                                    typeof (double),
                                                                                                    typeof (MainPage),
                                                                                                    new PropertyMetadata
                                                                                                      (ColumnWidthChanged));
        public double ColumnWidth
        {
            get
            {
                return (double)GetValue(ColumnWidthProperty);
            }
            set
            {
                SetValue(ColumnWidthProperty, value);
            }
        }

        private static void ColumnWidthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var mainPage = (MainPage) d;
            mainPage.Column1.Width = new GridLength((double)e.NewValue);
        }
    }
}

JD.

Answer 1

You're animated a value from 0 to 0 which is why your ColumnWidthChanged method is not being called since it hasn't changed.