Elipsin yanıp sönmesini nasıl yapabilirim?

Question

WPF'de özel denetim yapmaya çalışıyorum. Göz kırpabilen bir LED'in davranışını simüle etmesini istiyorum.

Kontrole üç durum vardır: Açık, Kapalı ve Yanıp Sönüyor.

Arkadaki kodla Açık ve Kapalı'yı nasıl ayarlayacağımı biliyorum, ancak bu WPF canlandırma nesnesi beni sadece deli ediyor! Herhangi bir şeyi canlandırmak için hiçbir şey alamıyorum. Plan devlet denilen bir mülke sahip olmaktır. Kullanıcı değeri yanıp sönmeye ayarlandığında, kontrolün yeşil ve gri arasında değişmesini istiyorum. Burada bir bağımlılık malına ihtiyacım var, ama hiçbir fikrim yok. Daha önce daha fazla xaml vardı ama hepsini sildim. hiçbir şey yapmıyor gibi görünüyor. Bunu mümkün olan en iyi uygulama biçiminde yapmayı çok isterim, ama bu noktada her şeyi alacağım. Bu noktada rengi manuel olarak değiştiren bir konu yazmanın yarısıyım.

<UserControl x:Class="WpfAnimation.LED" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Height="300" Width="300"> 

<Grid> 
    <Ellipse x:Name="MyLight" Height="Auto" Width="Auto"/> 
</Grid> 

</UserControl> 

Answer 1

Sen bir animasyon ile bunu yapabilirsiniz otomatik geri ve tekrarlar (bu Silverlight içindir):

<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    x:Class="Blinker.MainPage" 
    Width="640" Height="480" Loaded="UserControl_Loaded"> 
    <UserControl.Resources> 
     <Storyboard x:Name="Blink" AutoReverse="True" RepeatBehavior="Forever"> 
      <ColorAnimationUsingKeyFrames BeginTime="00:00:00" 
       Storyboard.TargetName="ellipse" 
       Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
       <EasingColorKeyFrame KeyTime="00:00:01" Value="Gray"/> 
      </ColorAnimationUsingKeyFrames> 
     </Storyboard> 
    </UserControl.Resources> 
    <Grid x:Name="LayoutRoot" Background="White"> 
     <Ellipse x:Name="ellipse" Fill="Green" Stroke="Black"/> 
    </Grid> 
</UserControl> 

ve kontrol yüklendiğini veya bir özellik ayarlandığında zaman sonra animasyonu başlatmak - Eğer bir bağımlılık özelliği gerekmez sürece

private bool blinking; 
public bool IsBlinking 
{ 
    get 
    { 
     return blinking; 
    } 
    set 
    { 
     if (value) 
     { 
      this.Blink.Begin(); 
     } 
     else 
     { 
      this.Blink.Stop(); 
     } 

     this.blinking = value; 
    } 
} 

veya başlangıçta:

Sonra

<UserControl 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" 
x:Class="BlinkerApp.Blinker" 
x:Name="UserControl" 
d:DesignWidth="100" d:DesignHeight="100"> 
<Grid x:Name="LayoutRoot"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="BlinkStates"> 
      <VisualState x:Name="Blinking"> 
       <Storyboard AutoReverse="True" RepeatBehavior="Forever"> 
        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
         <SplineColorKeyFrame KeyTime="00:00:01" Value="Gray"/> 
        </ColorAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Stopped"/> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Ellipse x:Name="ellipse" Fill="Green" Stroke="Black"/> 
</Grid> 

ve IsBlinking özelliği vardır görsel durumunu geçiş:

- VisualStateManager kullanarak - Ayrıca Silverlight çalışacak İşte

210 WPF bunu yapmak için başka bir yoludur

namespace BlinkerApp 
{ 
    using System.Windows; 
    using System.Windows.Controls; 

/// <summary> 
/// Interaction logic for Blinker.xaml 
/// </summary> 
public partial class Blinker : UserControl 
{ 
    private bool blinking; 

    public Blinker() 
    { 
     this.InitializeComponent(); 
    } 

    public bool IsBlinking 
    {  
     get  
     {  
      return blinking;  
     }  

     set  
     {   
      if (value)   
      { 
       VisualStateManager.GoToState(this, "Blinking", true); 
      }   
      else   
      { 
       VisualStateManager.GoToState(this, "Stopped", true); 
      }   

      this.blinking = value;  
     } 
    }  
} 
} 

Answer 2

Göz kırpma oranının daha fazla kontrol edilmesini ve kodunuzun arkada kalmasını sağlamak için, UserControl uygulamanızda, Blink:

adında yönlendirilmiş bir olaya sahip olmanızı öneririz. Şimdi

RaiseEvent(new RoutedEventArgs(LedControl.Blink)); 

: Bu da size ışığı istediğiniz zaman tek bir defa yanıp fırsatı verir (ancak istediğiniz sıklıkta olayı yükseltmek için bir zamanlayıcı ayarlayabilirsiniz Kodda

public static readonly RoutedEvent BlinkEvent = EventManager.RegisterRoutedEvent("Blink", RoutingStrategy.Direct, typeof(RoutedEventHandler), typeof(LedControl)); 
public event RoutedEventHandler Blink 
{ 
    add { AddHandler(BlinkEvent, value); } 
    remove { RemoveHandler(BlinkEvent, value); } 
} 

XAML'de, aşağıdaki kod bir parıltıyı görünür hale getirir ve elipsinizin (ledEllipse) dolgu özelliğini parlak yeşil radyal gradyana ayarlar, ardından doluluk değerini 'loşlanmamış' bir yeşile döndürür. seversin). Göz kırpma süresinin daha uzun sürmesini sağlamak için süreyi değiştirebilirsiniz. Ayrıca

<UserControl.Triggers> 
    <EventTrigger RoutedEvent="local:LedControl.Blink"> 
     <EventTrigger.Actions> 
      <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation Storyboard.TargetName="glow" 
            Storyboard.TargetProperty="Opacity" 
            To="100" 
            AutoReverse="True" 
            Duration="0:0:0.075" /> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ledEllipse" 
                Storyboard.TargetProperty="Fill" 
                Duration="0:0:0.15"> 
         <ObjectAnimationUsingKeyFrames.KeyFrames> 
          <DiscreteObjectKeyFrame KeyTime="0:0:0.01"> 
           <DiscreteObjectKeyFrame.Value> 
            <RadialGradientBrush> 
             <!--bright Green Brush--> 
             <GradientStop Color="#FF215416" Offset="1"/> 
             <GradientStop Color="#FE38DA2E" Offset="0"/> 
             <GradientStop Color="#FE81FF79" Offset="0.688"/> 
            </RadialGradientBrush> 
           </DiscreteObjectKeyFrame.Value> 
          </DiscreteObjectKeyFrame> 
          <DiscreteObjectKeyFrame KeyTime="0:0:0.15" > 
           <DiscreteObjectKeyFrame.Value> 
            <RadialGradientBrush> 
             <!--dim Green Brush--> 
             <GradientStop Color="#FF21471A" Offset="1"/> 
             <GradientStop Color="#FF33802F" Offset="0"/> 
             <GradientStop Color="#FF35932F" Offset="0.688"/> 
            </RadialGradientBrush> 
           </DiscreteObjectKeyFrame.Value> 
          </DiscreteObjectKeyFrame> 
         </ObjectAnimationUsingKeyFrames.KeyFrames> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger.Actions> 
    </EventTrigger> 
</UserControl.Triggers> 

, doğrudan 'ledEllipse' elips referans am ve (redlight I benim en yol dolgu özelliğine başlangıç ​​başka bir radyal gradyanlı bir fırça olup) şu şekilde ledControl tanımlanan DropShadowEffect 'parlaklık' karşılık gelen var :

<Ellipse x:Name="statusLight" Height="16" Width="16" Margin="0" Fill="{DynamicResource redLight}" > 
    <Ellipse.Effect> 
     <DropShadowEffect x:Name="glow" ShadowDepth="0" Color="Lime" BlurRadius="10" Opacity="0" /> 
    </Ellipse.Effect> 
</Ellipse> 

Not: DropShadowEffect .NET 3.5 tanıtıldı, ancak görevden alabileceğini Eğer bir parlaklık etkisi istemiyoruz (ama düz bir renk kontrast zemin üzerine güzel görünüyor) eğer.