WPF AvalonDock使DocumentHeader選項卡閃爍綁定到依賴項屬性

Question

WPF的新手。我試圖在更新依賴項屬性值'HasProblem'設置爲true時使AvalonDock DocumentHeader的選項卡閃爍。下面是一個代碼示例，我明白我需要創建一個DocumentHeaderTemplate並使用DataTemplate.Triggers，或許是綁定到HasProblem的DataTrigger，但我實際上對實現步驟不確定。此外，如果任何人都可以推薦一個關於WPF的綜合視頻教程，也許涵蓋了一些用來實現閃動標籤的技術，我將非常感激。

<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

您可以用少量動畫創建DocumentHeaderTemplate的DataTemplate。參考下面的代碼。

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