WPF AvalonDock make DocumentHeader tab flash Binding to Dependency Property - wpf

Question

Newbie to WPF. I am attempting to make the tab flash of an AvalonDock DocumentHeader when a dependency property value is updated 'HasProblem' is set to true. Below is a code sample I understand that I need to create a DocumentHeaderTemplate and use DataTemplate.Triggers, perhaps a DataTrigger bound to HasProblem but am really unsure on implementation steps. Also if anyone could recommend a comprehensive video tutorial on WPF that perhaps covers some of the techniques that would be employed to achieve the flashing tab I would be very grateful.
<Window x:Class="AirportTab.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ad="http://schemas.xceed.com/wpf/xaml/avalondock"
xmlns:local="clr-namespace:AirportTab"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
d:DataContext="{d:DesignInstance Type=local:AirportCodeDataSource, IsDesignTimeCreatable=True}"
Title="MainWindow" Height="300" Width="500">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Click="OnToggleErrorClick">
<StackPanel Orientation="Horizontal">
<Label Content="{Binding HasProblem}" ContentStringFormat="HasProblem={0}. Click to change" />
</StackPanel>
</Button>
<ad:DockingManager Grid.Row="1">
<ad:LayoutRoot>
<ad:LayoutPanel Orientation="Horizontal">
<ad:LayoutDocumentPaneGroup>
<ad:LayoutDocumentPane>
<ad:LayoutDocument Title="Airport Code">
<StackPanel>
<DataGrid ItemsSource="{Binding View}" />
</StackPanel>
</ad:LayoutDocument>
</ad:LayoutDocumentPane>
</ad:LayoutDocumentPaneGroup>
</ad:LayoutPanel>
</ad:LayoutRoot>
</ad:DockingManager>
</Grid>
</Window>
public class AirportCode
{
public string Name { get; set; }
public bool Operational { get; set; }
}
public class AirportCodeDataSource : DependencyObject
{
public AirportCodeDataSource()
{
this.View = new ObservableCollection<AirportCode>
{
new AirportCode {Name = "JFK", Operational = true},
new AirportCode {Name = "LHR", Operational = true},
new AirportCode {Name = "LGW", Operational = true}
};
}
public static readonly DependencyProperty HasProblemProperty =
DependencyProperty.Register(
"HasProblem",
typeof(bool),
typeof(AirportCodeDataSource));
public bool HasProblem
{
get { return (bool)GetValue(HasProblemProperty); }
set { SetValue(HasProblemProperty, value); }
}
public ObservableCollection<AirportCode> View { get; set; }
}
public partial class MainWindow : Window
{
public MainWindow()
{
this.DataContext = new AirportCodeDataSource();
InitializeComponent();
}
private void OnToggleErrorClick(object sender, RoutedEventArgs e)
{
this.AirportCodeDataSource.HasProblem = !this.AirportCodeDataSource.HasProblem;
}
public AirportCodeDataSource AirportCodeDataSource { get { return this.DataContext as AirportCodeDataSource; }}
}

Answer 1

You can create a DataTemplate for the DocumentHeaderTemplate with little animation. refer the below code.
<ad:DockingManager Grid.Row="1" >
<ad:DockingManager.DocumentHeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Transparent"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=DataContext.HasProblem}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="StartBlinking">
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="Orange" Duration="00:00:00.4" RepeatBehavior="Forever" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=DataContext.HasProblem}" Value="False">
<DataTrigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="StartBlinking"/>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</DataTemplate>
</ad:DockingManager.DocumentHeaderTemplate>
<ad:LayoutRoot>
<ad:LayoutPanel Orientation="Horizontal">
<ad:LayoutDocumentPaneGroup>
<ad:LayoutDocumentPane>
<ad:LayoutDocument Title="Airport Code">
<StackPanel>
<DataGrid ItemsSource="{Binding View}" />
</StackPanel>
</ad:LayoutDocument>
</ad:LayoutDocumentPane>
</ad:LayoutDocumentPaneGroup>
</ad:LayoutPanel>
</ad:LayoutRoot>
</ad:DockingManager>
public partial class Window5 : Window
{
public AirportCodeDataSource AirportCodeDataSource { get { return this.DataContext as AirportCodeDataSource; } }
public Window5()
{
InitializeComponent();
this.DataContext = new AirportCodeDataSource();
this.AirportCodeDataSource.HasProblem = true;
}
}
public class AirportCode
{
public string Name { get; set; }
public bool Operational { get; set; }
}
public class AirportCodeDataSource : DependencyObject
{
public AirportCodeDataSource()
{
this.View = new ObservableCollection<AirportCode>
{
new AirportCode {Name = "JFK", Operational = true},
new AirportCode {Name = "LHR", Operational = true},
new AirportCode {Name = "LGW", Operational = true}
};
}
public static readonly DependencyProperty HasProblemProperty =
DependencyProperty.Register(
"HasProblem",
typeof(bool),
typeof(AirportCodeDataSource));
public bool HasProblem
{
get { return (bool)GetValue(HasProblemProperty); }
set { SetValue(HasProblemProperty, value); }
}
public ObservableCollection<AirportCode> View { get; set; }
}