Silverlight: Can an event from one usercontrol begin an animation on a different usercontrol and/or the containing control

Question

I have three UserControls in Silverlight.

UCOutside contains two UserControls called UCInside1 and UCInside2.

Containing UserControl

<!-- UCOutside --> 
<UserControl.Resources>
    <Storyboard x:Name="OutsideBoard">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="LayoutRoot">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="45"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

<Grid x:Name="LayoutRoot">
    <Grid.Projection>
        <PlaneProjection/>
    </Grid.Projection>
    <local:UCInside1 Margin="39,35,266,173"/>
    <local:UCInside2 HorizontalAlignment="Right" Margin="0,234,26,30" />
</Grid>

First UserControl Inside

<!-- UCInside1 -->
<UserControl.Resources>
    <Storyboard x:Name="ImageFade">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="myImage">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.2"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image x:Name="myImage" Margin="0" Source="/OtherImage.png" Stretch="Fill" Width="312" Height="250" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>

Second UserControl Inside

<!-- UCInside2 -->
<UserControl.Resources>
    <Storyboard x:Name="ButtonFade">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image1">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" HorizontalAlignment="Left" Height="195" VerticalAlignment="Top" Width="218">
    <Button Content="Button" HorizontalAlignment="Right" Margin="0,0,25,51" VerticalAlignment="Bottom" Width="75" Click="ClickButton"/>
    <Image x:Name="image1" HorizontalAlignment="Left" Margin="41,32,0,70" Source="/Whatever.png" Stretch="Fill" Width="47"/>
</Grid>

You will notice that the ClickButton event on the Button. You will also notice there are simple Storyboards specified in all the UserControls.

The question is how do I get all three Animations to start by a Click Event? Can it all be tied in through XAML, or using Blend? If not how is it done in the c# code?

score 1 · Accepted Answer · edited Dec 10 '11 at 00:29

i would say a very simple and efficient way to solve this issue would be to use the INotifyPropertyChanged interface in order to use the Observer-Pattern.

Let the container that fires the initial event be the observable part and let the two others observe it. So whenever the observable container does something (e.g. fires a click-event) the others will get informed and can react accordingly.

Once your OutsideContainer class is observable, do these two steps:

In the OutsideButton class fire the PropertyChanged event in appropirate place (e.g. where the "super"-click happens.
In the ImageFade and ButtonFace class chatch the PropertyChanged event and do something (e.g. let them fire their own click-event).

Try the following:

In the code-behind file OutsideBoard.cs implement the INotifyPropertyChanged interface in order to make it observable:

class OutsideBoard : INotifyPropertyChanged {

    public event PropertyChangedEventHandler PropertyChanged;

    private void FirePropertyChanged (string property) {

        if (PropertyChanged != null) {

            PropertyChanged(this, new PropertyChangedEventArgs(property));
        }
    }

    // the click- EventHandler of your UserControl
    public event Click_EventHandler (object sender, RoutedEventArgs e) {

        // your clicking code of your UserControl

        FirePropertyChanged("SuperClick");
    }


    // rest of the code inhere ...
}

Now every class that wants to observe the OutsideBorder class has to implement an EventHandler on that class:

Write something like the following in your ButtonFade and ImageFade class:

outsideBorder.PropertyChanged += PropertyEventChangeHandler(MyClickHandling);

public void MyClickHandling (object sender, PropertyChangeEventArgs e) {

     // do something
}

So whenever the OutsideBoard class fires the PropertyChanged event, all observers will get notified by calling their MyClickHandling - method.

Hope that will help you.

Marc, thanks. Using INotifyPropertyChanged is how to do it but not precisely how you have shown above. What I did was have the child control (i.e. the one that actually contains the button and subsequently receives its event) implement the INotifyPropertyChanged interface. When one does that then all the containing user control has to do is subscribe to the PropertyChanged event and if another child control also needs to be notified then that other child can implement and expose a handler for PropertyChanged and the containing UserControl can subscribe the other child to the event. — Bob Rhinehart, Oct 21 '11 at 15:53

score 0 · Answer 2 · edited Dec 10 '11 at 00:29

After going through that again, i figured out that there meight be a much simpler solution :)

If you want to react in your OutsideBoard class to an click - event of another class - simply catch that particular event :)

so in code-behinde of your "children" simply write (assuming your OutsideBorder class is outsideBorder:

outsideBorder.Click += MouseEventHandler(MyClickHandler);

public void MyClickHandler (object sender, MouseEventArgs e) {

    // do something to react on the click appeared in the OutsideBoard class.
}

So the click-event of the OutsideBoard will get chatched as it is from itselfe (without your interference) What you do is to simply add additional EventHandler to that click-firing control :)

I guess what I was trying to avoid was the children knowing about the parent's particulars. The event occurs down in the child but I am trying to figure out how to wire it up to notify the parent and to notify the other user control which is a "sibling" for lack of a better term. — Bob Rhinehart, Oct 21 '11 at 15:07

Silverlight: Can an event from one usercontrol begin an animation on a different usercontrol and/or the containing control

2 Answers2