WPF Text Fade out-then-in effect

Question

Tôi đang cố gắng sử dụng hoạt ảnh WPF để tạo hiệu ứng trong đó, khi dữ liệu trong một thuộc tính văn bản thay đổi, văn bản mờ dần, sau đó lại .. hoặc tốt hơn là một crossfade thích hợp .

Tôi đã thực hiện thành công một nửa tính năng này, mã bên dưới phản hồi sự kiện đã thay đổi văn bản, ngay lập tức làm cho văn bản ẩn sau đó mất dần trong hơn 3 giây.

Để làm mờ văn bản cũng tương tự đơn giản, tôi chỉ thay đổi thuộc tính Từ và Tới của thẻ. NHƯNG - vấn đề là văn bản trên màn hình thay đổi ngay lập tức. Điều này thường là hoàn toàn cần thiết, tất nhiên, nhưng trong trường hợp này tôi muốn văn bản OLD mờ dần, sau đó văn bản MỚI để mờ dần.

Có thủ thuật thông minh nào để thực hiện điều này trong hoạt ảnh WPF không?

hiện tại một nửa thành kích hoạt:

<Style TargetType="TextBlock" x:Key="fadeinout"> 
     <Style.Triggers> 
      <EventTrigger RoutedEvent="Binding.TargetUpdated"> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:3" From="0.0" To="1.0" BeginTime="0:0:0" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Style.Triggers> 
    </Style> 

Answer 1

Tôi không nghĩ rằng đây có thể là một giải pháp trong XAML-only. TextBlock không biết về văn bản 'cũ' và 'mới', chỉ có Văn bản.

Con đường tôi sẽ làm điều này là để tạo ra một điều khiển tùy chỉnh mà có nguồn gốc từ TextBlock, và làm như sau trên TargetUpdated-event:

• Gọi 'Fade out' Storyboard
• Thay đổi chữ
• Gọi 'Fade trong' storyboard

Chúc may mắn :)

Answer 2

giải pháp tốt nhất cho nhiệm vụ này sẽ là sử dụng một "Transition Presenter". Trình diễn chuyển tiếp là một vùng chứa cho điều khiển của bạn (có thể là TextBlock hoặc bất kỳ thứ gì khác) phản ứng với sự thay đổi của nội dung bằng cách áp dụng chuyển tiếp được chỉ định. Bạn có thể chọn một trong các chuyển tiếp được xác định trước hoặc tạo hiệu ứng chuyển tiếp của riêng bạn (sử dụng XAML). Thông thường, người trình bày chuyển tiếp sử dụng mẫu dữ liệu để hiển thị dữ liệu bị ràng buộc. Hầu hết các ví dụ cơ bản sẽ trông như thế này:

<lib:TransitionPresenter Transition="{StaticResource FadeTransition} 
    Content="{Binding MyValue}"> 
    <lib:TransitionPresenter.Resources> 
     <DataTemplate DataType="{x:Type System:string}"> 
      <TextBlock Text={Binding}/> 
     </DataTemplate> 
    </lib:TransitionPresenter.Resources> 
</lib:TransitionPresenter> 

Dưới đây là hai thư viện với mã nguồn mà thực hiện dẫn chương trình chuyển tiếp:

• Kevin's WPF Bag-o-Tricks
• FluidKit

Answer 3

Tôi với frances1983 trên điều này. Những gì tôi sẽ làm là làm cho một UserControl mới thực sự xử lý văn bản cũ và mới liền mạch với các mờ dần.

Tôi đang làm điều tương tự với nhãn tôi muốn chỉ hiển thị trong vài giây và sau đó biến mất. Đây là những gì tôi đã thực hiện:

<Label Name="lbl" DockPanel.Dock="Bottom" HorizontalAlignment="Center" Visibility="Collapsed"> 
    <Label.Style> 
     <Style TargetType="{x:Type Label}"> 
      <Style.Triggers> 
       <Trigger Property="Visibility" Value="Visible"> 
        <Trigger.EnterActions> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="00:00:00" BeginTime="00:00:00" From="0.0" To="1.0" /> 
           <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="00:00:03" BeginTime="00:00:02" From="1.0" To="0.0" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </Trigger.EnterActions> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Label.Style> 
    Display Text 
</Label> 

Và sau đó trong mã nơi nhãn văn bản thay đổi:

//Make the label visible, starting the storyboard. 
lbl.Visibility = Visibility.Visible; 

DispatcherTimer t = new DispatcherTimer(); 
//Set the timer interval to the length of the animation. 
t.Interval = new TimeSpan(0, 0, 5); 
t.Tick += (EventHandler)delegate(object snd, EventArgs ea) 
{ 
    // The animation will be over now, collapse the label. 
    lbl.Visibility = Visibility.Collapsed; 
    // Get rid of the timer. 
    ((DispatcherTimer)snd).Stop(); 
}; 
t.Start(); 

Bạn có thể dễ dàng sửa đổi mẫu này thành một UserControl.Chỉ cần thay đổi mờ dần trên Visibility == Hidden, thêm một storyboard mà ngược lại với Visibility == Visible, và thay đổi văn bản và thiết lập lại tầm nhìn bên trong trình xử lý Tick.

Hy vọng điều này sẽ hữu ích!

Answer 4

Đây là một thực hiện tự động thực hiện fade-out, giá trị chuyển đổi, phai trong

Để sử dụng (sau khi thiết xmlns: l đến không gian tên chính xác:

Label l:AnimatedSwitch.Property="Content" l:AnimatedSwitch.Binding="{Binding SomeProp}"/> 

Mã này (đây là Mã chứng minh-of-khái niệm, mà không có lỗi handeling an không phải là sản xuất đã sẵn sàng)

public class AnimatedSwitch : DependencyObject 
{ 
    // Define the attached properties 

    public static DependencyProperty BindingProperty = 
     DependencyProperty.RegisterAttached("Binding", typeof(object), typeof(AnimatedSwitch), 
     new PropertyMetadata(BindingChanged)); 
    public static DependencyProperty PropertyProperty = 
     DependencyProperty.RegisterAttached("Property", typeof(string), typeof(AnimatedSwitch)); 
    public static object GetBinding(DependencyObject e) 
    { 
     return e.GetValue(BindingProperty); 
    } 
    public static void SetBinding(DependencyObject e, object value) 
    { 
     e.SetValue(BindingProperty, value); 
    } 
    public static string GetProperty(DependencyObject e) 
    { 
     return (string)e.GetValue(PropertyProperty); 
    } 
    public static void SetProperty(DependencyObject e, string value) 
    { 
     e.SetValue(PropertyProperty, value); 
    } 

    // When the value changes do the fadeout-switch-fadein 

    private static void BindingChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
    { 
     Storyboard fadeout = new Storyboard(); 
     var fadeoutAnim = new DoubleAnimation(){To=0,Duration=new Duration(TimeSpan.FromSeconds(0.3))}; 
     Storyboard.SetTarget(fadeoutAnim,d); 
     Storyboard.SetTargetProperty(fadeoutAnim, new PropertyPath("Opacity")); 
     fadeout.Children.Add(fadeoutAnim); 
     fadeout.Completed += (d1, d2) => 
      { 
       d.GetType().GetProperty(GetProperty(d)).SetValue(d, GetBinding(d), null); 

       Storyboard fadein = new Storyboard(); 
       var fadeinAnim = new DoubleAnimation() { To = 1, Duration = new Duration(TimeSpan.FromSeconds(0.3)) }; 
       Storyboard.SetTarget(fadeinAnim, d); 
       Storyboard.SetTargetProperty(fadeinAnim, new PropertyPath("Opacity")); 
       fadein.Children.Add(fadeinAnim); 
       fadein.Begin(); 
      }; 
     fadeout.Begin(); 
    } 
}