Is it possible to share Storyboards using App.xaml?

Question

Is it possible to share Storyboards using App.xaml?

jennyliu835 221

Hi Peter + Daisy,
Is it possible to share Storyboards using App.xaml?
The result of WpfApp2.exe in WpfApp_Animation is preferable.
WpfApp2_ViewModel is what I learned from you about View Model, but I can't implement some of the functionalities in WpfApp_Animation using View Model, such as Storyboard, Hide_TextBlock() and assigning #FFBF72FF.
Thanks a lot.

Peter Fleischer (former MVP) 19,341 Reputation points

2020-09-09T13:05:02.207+00:00

Hi Jenny,
it's possible. The storyboard has the task of animating the UI. It belongs in the View, not in the business logic (ViewModel). In App.xaml, styles can be defined as resources that storyboards use.
jennyliu835 221 Reputation points

2020-09-09T16:03:09.36+00:00
Hi Peter,

Glad to hear that storyboard is not the business of ViewModel.
I have defined the storyboard as resources in pages. Now I have 2 questions for you:

It is ok just to copy and paste the page resources onto App.xaml?
2, How to merge storyboard procedures with those in ViewModel. For example,
merge
Storyboard MyStoryBoardT1 = null;
MyStoryBoardT1 = (Storyboard)this.Resources["StoryboardTB1"];
MyStoryBoardT1.Begin();

with
case "CommandParameter":
Tb1Visibility = Visibility.Visible;
OnPropertyChanged(nameof(Tb1Visibility));
break;

Thanks
Peter Fleischer (former MVP) 19,341 Reputation points

2020-09-10T06:48:20.79+00:00
Hi Jenny,
you need solve 2 problems:

Event to start Storyboard

UI-Element for animating.

In your demo it is impossible to animate Tb2 and Tb3 (in Page) from Style in App.xaml (outside Page).

Instead of using Style in App.xaml ii's easier to use UserControl.
jennyliu835 221 Reputation points

2020-09-10T13:33:09.077+00:00

Thank you very much, Peter, for your pointer.
I will try my best to see if I can get it solved.
Thanks again.

p.s.
"UI-Element for animating" is new to me. I googled it, got bunch of "Ui Animation" list which seems irrelevant.
Can you please give me some links to further readings about it?
Thanks
Peter Fleischer (former MVP) 19,341 Reputation points

2020-09-10T18:59:04.143+00:00

Hi Jenny,
"UI-Element for animating" - I mean the UI element whose properties are animated with the storyboard, in your case Tb2 and Tb3 (in Page).
jennyliu835 221 Reputation points

2020-09-10T21:35:38.483+00:00

Hi Peter,
You mean more basic element (i.e. UI Element) should be used instead of Frame work Element, since Frame work Element inherits from UI Element. Am I right?

Accepted answer

0 additional answers

Your answer

Peter Fleischer (former MVP) 19,341 Reputation points

2020-09-09T13:05:02.207+00:00

Hi Jenny,
it's possible. The storyboard has the task of animating the UI. It belongs in the View, not in the business logic (ViewModel). In App.xaml, styles can be defined as resources that storyboards use.
jennyliu835 221 Reputation points

2020-09-09T16:03:09.36+00:00

Hi Peter,

Glad to hear that storyboard is not the business of ViewModel.
I have defined the storyboard as resources in pages. Now I have 2 questions for you:

It is ok just to copy and paste the page resources onto App.xaml?
2, How to merge storyboard procedures with those in ViewModel. For example,
merge
Storyboard MyStoryBoardT1 = null;
MyStoryBoardT1 = (Storyboard)this.Resources["StoryboardTB1"];
MyStoryBoardT1.Begin();

with
case "CommandParameter":
Tb1Visibility = Visibility.Visible;
OnPropertyChanged(nameof(Tb1Visibility));
break;

Thanks
Peter Fleischer (former MVP) 19,341 Reputation points

2020-09-10T06:48:20.79+00:00

Hi Jenny,
you need solve 2 problems:

Event to start Storyboard

UI-Element for animating.

In your demo it is impossible to animate Tb2 and Tb3 (in Page) from Style in App.xaml (outside Page).

Instead of using Style in App.xaml ii's easier to use UserControl.
jennyliu835 221 Reputation points

2020-09-10T13:33:09.077+00:00

Thank you very much, Peter, for your pointer.
I will try my best to see if I can get it solved.
Thanks again.

p.s.
"UI-Element for animating" is new to me. I googled it, got bunch of "Ui Animation" list which seems irrelevant.
Can you please give me some links to further readings about it?
Thanks
Peter Fleischer (former MVP) 19,341 Reputation points

2020-09-10T18:59:04.143+00:00

Hi Jenny,
"UI-Element for animating" - I mean the UI element whose properties are animated with the storyboard, in your case Tb2 and Tb3 (in Page).
jennyliu835 221 Reputation points

2020-09-10T21:35:38.483+00:00

Hi Peter,
You mean more basic element (i.e. UI Element) should be used instead of Frame work Element, since Frame work Element inherits from UI Element. Am I right?

Answer 1

Hi Jenny,
in App.xaml (ResourceDictionary) inside DataTemplate you can refer to Storyboard (in App.xaml - ResourceDictionary).

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfApp2.general_pages"
                    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity">

  <Storyboard x:Key="StoryboardTB1">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TB1">
      <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
      <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
  </Storyboard>

  <Storyboard x:Key="StoryboardTB2">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TB2">
      <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
      <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
  </Storyboard>

  <Storyboard x:Key="StoryboardTB3">
    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)" Storyboard.TargetName="TB3">
      <SplineColorKeyFrame KeyTime="0" Value="#FFFDD293"/>
      <SplineColorKeyFrame KeyTime="0:0:6" Value="#FFBF72FF"/>
    </ColorAnimationUsingKeyFrames>
  </Storyboard>

  <DataTemplate x:Key="insertion">
    <Grid HorizontalAlignment="Center" 
          DataContext="{Binding RelativeSource={RelativeSource AncestorType=Page, Mode=FindAncestor}, Path=DataContext}">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"  />
        <ColumnDefinition Width="100"  />
      </Grid.ColumnDefinitions>

      <StackPanel Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,10,20,0" >
        <!--<Button Content="Preference" Width="80" Command="{Binding}" CommandParameter="Preference"/>-->
        <Button Content="General" Width="65" Command="{Binding}" CommandParameter="General">
          <Button.Triggers>
            <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
              <BeginStoryboard Storyboard="{StaticResource StoryboardTB1}"/>
            </EventTrigger>
          </Button.Triggers>
        </Button>
        <Button Content="Primary" Width="65" Margin="0,10,0,0" Command="{Binding}" CommandParameter="Primary"/>
        <Button Content="Secondary" Width="65" Margin="0,10,0,0" Command="{Binding}" CommandParameter="Secondary"/>
      </StackPanel>
      <TextBlock x:Name="TB1" Text="Colors" FontSize="16" Height="78" Width="190" Background="#FFC9C9C9" 
                 Visibility="{Binding Tb1Visibility}" HorizontalAlignment="Left" Margin="20,0,0,0"/>
    </Grid>
  </DataTemplate>

</ResourceDictionary>

jennyliu835 221 Reputation points

2020-09-11T14:33:57.507+00:00

Thanks a lot, Peter.
Let me study your code.
Peter Fleischer (former MVP) 19,341 Reputation points

2020-09-12T05:59:48.65+00:00

Hi Jenny,
for other scenario (TB2 and TB3) use DataTrigger in Style. If you have problems post a new question.
jennyliu835 221 Reputation points

2020-09-12T15:14:58.737+00:00

Yes, Peter.
I have difficulty with TB2 and TB3. Definitely need your further help.
Thank you very much.

Share via

Is it possible to share Storyboards using App.xaml?

0 additional answers

Your answer