2009-09-22 3 views
5

나는 WPF에서 사용자 지정 컨트롤을 만들려고 노력하고 있습니다. 깜박일 수있는 LED의 동작을 시뮬레이트하고 싶습니다.타원을 깜박이게하려면 어떻게해야합니까?

컨트롤에 세 가지 상태가 있습니다, 해제 및 깜박임.

난 뒤에 코드를 통해 켜기 및 끄기를 설정하는 방법을 알고 있지만,이 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> 
+0

Visual Studio에서 애니메이션 작업을하려고한다고 가정합니다. Expression Blend를 사용하여 애니메이션을 만드는 데 필요한 디자인 도구가 있습니다. –

+0

나는 그렇다. 나는 이것에 약간의 시간을 보내고, 어디에도 가지 않고, 마감 시간을 지키고 난 후에, 나는 약간의 광란을 시작했고, 나의 머리를 조금 잃어 버렸다라고 인정할 것이다. Expression Blend를 해고하고 만든 스토리 보드가 잘 작동하는 것을 보았습니다. 나는 단지 내가 원하는 행동을하기 위해 약간의 조정을해야했다. – MedicineMan

+0

타이머 나 콜백과 같이 할 수 있습니까? 타원이 번갈아 나오는 두 개의 타원이 있습니까? 하지만 나는 팍스의 대답도 좋아한다. :) –

답변

7

당신은 애니메이션이 할 수있는 자동 반전과 반복 (이 실버입니다) :

<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 사용 - 또한 실버에서 작동 여기

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

EasingColorKeyFrame이 보이지 않습니다. Silverlight 솔루션입니까? 또한 this.Blink.Begin()을 사용할 수 없습니다. WPF를 사용하고 있습니다. – MedicineMan

+0

이것은 Silverlight 솔루션입니다. WPF에 대한 또 다른 답변을 추가하겠습니다. –

+0

나중에 일부 버튼이 깜박이도록 설정되어 있어도 동시에 여러 개의 버튼을 깜박이는 방법이 궁금합니다. 현재 나는 뒤에있는 코드에서 타이머를 사용합니다 : bool flashNow = now.Second % 2 == 0; XAML에 다른 솔루션이 있습니까? –

4

깜박임 속도를 제어하고 코드 뒤에 숨김을 허용하려면 UserControl에서 깜박임이라고하는 라우트 된 이벤트를 제안하는 것이 좋습니다.

이제

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에서 다음 코드는 빛을 볼 수 있도록 것이고, 밝은 녹색 방사형 그라데이션에 타원 (ledEllipse)의 채우기 속성을 설정 한 다음과 같은 경우 회색으로 변경 될 수 있습니다 희미한 '꺼져'녹색 (로 채우기 값을 반환 너는 좋아한다). 깜박임을 오래 지속시키기 위해 기간을 간단히 변경할 수 있습니다. 또한

<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'타원을 참조하고하고 (레드 라이트 내가 나의의 주도 채우기 속성을 시작하는 또 다른 방사형 그라데이션 브러시입니다) 다음으로 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 닷넷 3.5에 도입 된,하지만 당신은 제거 할 수 있습니다 당신은 광선 효과를 싶지 않아 (하지만 단색 대조 배경에 좋은 모양)합니다.

+0

+1 색상에 자리 잡고있다. 허용 된 대답은 솔루션과 동일한 색 구성표를 가지고 있지 않습니다. – jlafay

관련 문제