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));
}
}