Is it possible to share Storyboards - cont.

jennyliu835 221

Hi Peter,

TB1 works perfectly, need further help with TB2 and TB3.

Thanks a lot.

Accepted answer

Peter Fleischer (former MVP) 19,231

Hi Jenny,
here is a solution fpr Tb2 and Tb3:

ResourceDictionary (referenced in in App.xaml) with several Storyboards and DataTemplate for insertion:

<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)">
      <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)">
      <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>

Page with Style with DataTrigger (using property in ViewModel):

<Page x:Class="WpfApp2.pages.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:WpfApp2.pages"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="Page1">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="100"  />
      <RowDefinition Height="100"  />
      <RowDefinition Height="100" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="200"  />
      <ColumnDefinition Width="100"  />
    </Grid.ColumnDefinitions>

    <!-- common XAML to be shared thru Dictionary-->
    <ContentControl Grid.ColumnSpan="2" ContentTemplate="{StaticResource insertion}"/>
    <!-- end common XAML to be shared -->

    <TextBlock x:Name="TB2" Text="Primary - Red" FontSize="16" Background="#FFFDAFAF" 
               Visibility="{Binding Tb2Visibility}" Height="80" Width="260" Grid.Row="1" Grid.ColumnSpan="2">
      <TextBlock.Style>
        <Style>
          <Style.Triggers>
            <DataTrigger Binding="{Binding Tb2Visibility}" Value="Visible">
              <DataTrigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource StoryboardTB2}"/>
              </DataTrigger.EnterActions>
            </DataTrigger>
          </Style.Triggers>
        </Style>
      </TextBlock.Style>
    </TextBlock>

    <TextBlock x:Name="TB3" Text="Secondary - Orange to Purple" FontSize="16" 
               Visibility="{Binding Tb3Visibility}"
               Height="80" Width="260" Grid.Row="2" Grid.ColumnSpan="2">
      <TextBlock.Background>
        <SolidColorBrush Color="{Binding Tb3BackgroundColor}" />
      </TextBlock.Background>
      <TextBlock.Style>
        <Style>
          <Style.Triggers>
            <DataTrigger Binding="{Binding Tb3BeginStoryBoard}" Value="true">
              <DataTrigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource StoryboardTB3}"/>
              </DataTrigger.EnterActions>
            </DataTrigger>
          </Style.Triggers>
        </Style>
      </TextBlock.Style>
    </TextBlock>
  </Grid>
</Page>

And Pages_ViewModel.cs, Tb3BeginStoryBoard will be used to start Storyboard:

using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;

namespace WpfApp2.general_pages
{
  class Pages_ViewModel : ICommand, INotifyPropertyChanged
  {
    public Color Tb3BackgroundColor { get; set; } = Colors.Orange;
    public Visibility Tb1Visibility { get; set; } = Visibility.Hidden;
    public Visibility Tb2Visibility { get; set; } = Visibility.Hidden;
    public Visibility Tb3Visibility { get; set; } = Visibility.Hidden;
    public bool Tb3BeginStoryBoard { get; set; } = false;

    public void Execute(object parameter)
    {
      switch (parameter.ToString())
      {
        case "General":
          Tb1Visibility = Visibility.Visible;
          OnPropertyChanged(nameof(Tb1Visibility));
          break;

        case "Primary":
          Tb2Visibility = Visibility.Visible;
          Tb3Visibility = Visibility.Visible;
          OnPropertyChanged(nameof(Tb2Visibility));
          OnPropertyChanged(nameof(Tb3Visibility));
          break;

        case "Secondary":
          //TbCommonForeGround = new SolidColorBrush(Colors.Blue);
          Tb3BeginStoryBoard = true;
          OnPropertyChanged(nameof(Tb3BeginStoryBoard));
          break;

        default:
          break;
      }
    }

    public event EventHandler CanExecuteChanged;
    public bool CanExecute(object parameter) => true;

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propName = "") =>
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
  }
}

jennyliu835 221 Reputation points

2020-09-12T22:47:11.36+00:00

Thank you very much! Peter.
Let me study your code.
jennyliu835 221 Reputation points

2020-09-13T01:57:54.743+00:00

Hi Peter,
I have just built your solution.
It runs perfectly.
Thank you, thank you very very much.
It will take some time for me to digest.
I will have more questions for you after the weekend.

Have a wonderful and great weekend!

2 additional answers

Peter Fleischer (former MVP) 19,231

Hi Jenny,
for TB2 you can simplified code in Page1.xaml:

<TextBlock x:Name="TB2" ...Style="{StaticResource Tb2Style}"/>

and in Dictionary1.xaml:

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

    <Style x:Key="Tb2Style">
      <Style.Triggers>
        <DataTrigger Binding="{Binding Tb2Visibility}" Value="Visible">
          <DataTrigger.EnterActions>
            <BeginStoryboard Storyboard="{StaticResource StoryboardTB2}"/>
          </DataTrigger.EnterActions>
        </DataTrigger>
      </Style.Triggers>
    </Style>

Peter Fleischer (former MVP) 19,231 Reputation points

2020-09-13T07:39:18.953+00:00
Hi Jenny,
another approach for TB3 is:

<TextBlock x:Name="TB3" Text="Secondary - Orange to Purple" FontSize="16" Visibility="{Binding Tb3Visibility}" Height="80" Width="260" Grid.Row="2" Grid.ColumnSpan="2" Style="{StaticResource Tb3Style}"> <TextBlock.Background> <SolidColorBrush Color="{Binding Tb3BackgroundColor}" /> </TextBlock.Background> </TextBlock>

and Style in Dictionaryq.xaml:

<Style x:Key="Tb3Style" TargetType="TextBlock"> <Style.Triggers> <DataTrigger Binding="{Binding Tb3BeginStoryBoard}" Value="true"> <DataTrigger.EnterActions> <BeginStoryboard Storyboard="{StaticResource StoryboardTB3}"/> </DataTrigger.EnterActions> </DataTrigger> </Style.Triggers> </Style>
Please sign in to rate this answer.

1 person found this answer helpful.
jennyliu835 221 Reputation points

2020-09-13T16:49:20.637+00:00

Wonderful !
Thanks a lot, Peter.
Let me study it.

jennyliu835 221 Reputation points

2020-09-14T16:38:18.49+00:00

Hi Peter,
I am studying your code and have a stupid question. Storyboards can be shared with ResourceDictionary perfectly. Why can they not be shared using App.xaml? Thanks.

Peter Fleischer (former MVP) 19,231 Reputation points

2020-09-15T04:28:23.48+00:00

Hi Jenny,
instead of including style into Dictionary1.xaml you can include style in App.xaml like this:

<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="general_pages/Dictionary1.xaml"/> </ResourceDictionary.MergedDictionaries> <Style x:Key="Tb3Style" TargetType="TextBlock"> ... </Style> </ResourceDictionary> </Application.Resources>

jennyliu835 221 Reputation points

2020-09-15T05:35:07.513+00:00

Thanks for teaching, Peter.
It seems that storyboards can't be put in App.xaml. Why?

Peter Fleischer (former MVP) 19,231 Reputation points

2020-09-15T13:22:10.403+00:00

Hi Jenny,
you can put Storyborad into App.xaml too:

jennyliu835 221 Reputation points

2020-09-15T19:05:45.393+00:00

Thanks a lot, Peter.
I will try it soon.
Sign in to comment