My name is Edward Tanguay. I'm an American software and web developer living and working in Berlin, Germany.
9 hours ago: Here's a use-case for datapod format, recording human-readable data that later can be used as a datasource: http://is.gd/eSsLg @pholdings.
9 hours ago: "Subscriptions are available to U.S. addresses only." http://www.highlights.com another global economy #fail.
10 hours ago: "Subscriptions are available to U.S. addresses only." http://www.highlights.com another global #fail.
11 hours ago: My notes on podcast with author Aimee Bender's Lemoncake book, "a normal kid punished by expectations of giftedness": http://is.gd/eSsLg.
12 hours ago: Interesting: "one page per book": http://openlibrary.org/about.
12 hours ago: Another after-work 8K, did 5K in 23:33, getting cooler here as #berlin #marathon approaches: http://is.gd/eSp95.
yesterday: C# CODE EXAMPLE: Extension method for checking regex in one line: http://is.gd/eQzyg.
yesterday: New podcast source: "I don't want to put you to sleep, but I want to be as rich, and rewarding, and resident as a dream.":http://is.gd/eQrdC.
yesterday: An intense colin marshall interview with michael silverblatt on the art of interviewing & more: http://is.gd/eQqve (search for "blatt").
yesterday: The stackexchange site for wordpress is up: get your answers / establish your reputation @cottonr http://wordpress.stackexchange.com.
2 days ago: "I've always felt that any time you can use a tuple, you should use a struct.": http://is.gd/eQm9V.

Categories

My Older Tutorials

My Old Web Dev Site

MVVM CODE EXAMPLE created on Thursday, July 09, 2009 permalink
How to make a View element animate based on the change in value of a ViewModel property
This example shows how you can give the elements on your View subtle animations when the properties on the ViewModel change value. In this case, you can hide and show a toolbar by clicking on the buttons. The toolbar fades in and fades out. The one issue with this code example is even when the element is drawn on the screen for the first time, it still animates. If this is subtle enough that may not be a problem, but if you want the animation only to execute when the value changes after being loaded on the page, you'll have to deal with this. Strange is that in this example, even though the OnPropertyChanged is not fired upon loading, the anmiated is still executed. No code-behind is used in this example.
View:
<Window x:Class="TestAnim334.Views.MainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c="clr-namespace:TestAnim334.Commands"
    Title="Main Window" Height="400" Width="500">

    <Window.Resources>
        <Style x:Key="PageToolBarStyle" TargetType="Border">
            <Style.Triggers>
                <DataTrigger Binding="{Binding PageToolBarVisible}" Value="true">

                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                    Storyboard.TargetProperty="Opacity">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1" KeySpline="0,1,1,1"/>
                                </DoubleAnimationUsingKeyFrames>

                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>

                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                    Storyboard.TargetProperty="Opacity">
                                    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" KeySpline="0,1,1,1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>

                </DataTrigger>

                <Trigger Property="Opacity" Value="0">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </Trigger>

            </Style.Triggers>
        </Style>

    </Window.Resources>


    <DockPanel LastChildFill="False">

        <StackPanel DockPanel.Dock="Top"
                    Margin="10">

            <TextBlock Text="This is the content of the page."/>
            <TextBlock Text="The ViewModel property is:"/>
            <TextBlock Text="{Binding PageToolBarVisible}"/>
            <Button Content="Hide ToolBar"
                    Width="150"
                    Command="{Binding HideToolBarCommand}"
                    HorizontalAlignment="Left"/>
            <Button Content="Show ToolBar"
                    Width="150"
                    Command="{Binding ShowToolBarCommand}"
                    HorizontalAlignment="Left"/>

        </StackPanel>

        <Border Style="{StaticResource PageToolBarStyle}"
                Opacity="0"
                Padding="3"
                DockPanel.Dock="Bottom"
                Background="#ddd">
            <TextBlock Text="This is the ToolBar text."
                HorizontalAlignment="Right"/>
        </Border>

    </DockPanel>

</Window>

ViewModel:
using System.Windows.Input;
using TestAnim334.Commands;

namespace TestAnim334.ViewModels
{
    public class MainViewModel : ViewModelBase
    {

        private string _pageToolBarVisible;
        public string PageToolBarVisible
        {
            get
            {
                return _pageToolBarVisible;
            }

            set
            {
                _pageToolBarVisible = value;
                OnPropertyChanged("PageToolBarVisible");
            }
        }

        private DelegateCommand hideToolBarCommand;

        public ICommand HideToolBarCommand
        {
            get
            {
                if (hideToolBarCommand == null)
                {
                    hideToolBarCommand = new DelegateCommand(HideToolBar, CanHideToolBar);
                }
                return hideToolBarCommand;
            }
        }

        private void HideToolBar()
        {
            PageToolBarVisible = "false";
        }

        private bool CanHideToolBar()
        {
            return PageToolBarVisible == "true";
        }

        private DelegateCommand showToolBarCommand;

        public ICommand ShowToolBarCommand
        {
            get
            {
                if (showToolBarCommand == null)
                {
                    showToolBarCommand = new DelegateCommand(ShowToolBar, CanShowToolBar);
                }
                return showToolBarCommand;
            }
        }

        private void ShowToolBar()
        {
            PageToolBarVisible = "true";
        }

        private bool CanShowToolBar()
        {
            return PageToolBarVisible == "false";
        }

        public MainViewModel()
        {
            _pageToolBarVisible = "true";
        }

    }
}

need markup?
 

Most Recently Added Items: