楕円を点滅させる方法を教えてください。

Question

私はWPFでカスタムコントロールを作成しようとしています。私はそれが点滅することができるLEDの動作をシミュレートしたい。

コントロールには、オン、オフ、および点滅という3つの状態があります。

私は背後にあるコードをオンとオフを設定する方法を知っているが、このWPFのアニメーションのものはちょうど私にナットを駆動している!!!!私は何でも生き生きとすることができません。計画はstateと呼ばれるプロパティを持つことです。ユーザーが値を点滅に設定すると、コントロールを緑と灰色の間で交互に切り替える必要があります。私はここに依存プロパティが必要だと思っていますが、分かりません。 私は前にもっとxamlを持っていましたが、ただそれをすべて消去しました。それは何もしていないようです。 私は可能な限りベストプラクティスでこれをやりたいと思っていますが、この時点では何かを取っていきます。私は、この時点で色を手動で変更するスレッドを書くのは半分です。

<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

あなたはその自動反転し、繰り返しアニメーション（これはSilverlightのためである）でこれを行うことができます。

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

、その後とき制御負荷時やプロパティが設定されているアニメーションを開始 - あなたは

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

     this.blinking = value; 
    } 
} 

または起動時にしない限り、依存関係プロパティを必要はありません。

その後、

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

とIsBlinkingプロパティを持っている視覚的な状態に切り替える：

を - VisualStateManagerを使用して - また、Silverlightで動作します。ここ

210は、WPFでそれを行うための別の方法です

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

あなたのコードの背後で点滅レートなどをより詳細に制御できるようにするには、私のUserControlでBlinkというルーティングイベントを使用することをお勧めします：

今

RaiseEvent(new RoutedEventArgs(LedControl.Blink)); 

：あなたは、これはまた、あなたの光にいつでも好きなときに一回点滅する機会を与えてくれます（ただし、多くの場合、あなたが好きなイベントを発生させるためにタイマーを設定することができます後ろにあなたのコードでは

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では、次のコードではグローが表示され、楕円（fillEllipse）のfillプロパティを明るい緑の放射状グラデーションに設定し、塗りつぶし値を薄暗い「unlit」緑に戻しますあなたは好きです）。あなたは単に瞬きを長くするために継続時間を変更することができます。また

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

、私は直接「ledEllipse」楕円を参照していますし、それが（レッドライトは私が私の主導fillプロパティを開始するだけで、別の放射状グラデーションブラシである）は、次のようledControlで定義されていDropShadowEffect「輝き」を対応です：

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

注：DropShadowEffectは.NET 3.5で導入されましたが、削除ができることをあなたはグロー効果を望んでいない（それはソリッドカラー対照的な背景に良さそうに見えます）場合。