アルゴリズムにリンクされた画面で5ドットをアニメーション化する方法

Question

これは、どのように見えるかを示すスクリーンショットです。

こんにちはみんな、私は、WPFウィンドウを作成しようとしています。そこには5つの点があります。各ドットは、背景のアルゴリズムによって表示されるか消えます。私は誰かが私にこれを達成するためのヒントを与えることができるかどうか疑問に思っています。

私はアルゴリズムにドットをデータバインドする必要があると知っていますが、どのように正確にそれを行うべきですか？私はC＃、XAML、WPFの新機能です。私は、ウィンドウリソースを使用してXAMLにドットを作成し、それをウィンドウに表示しました。私はそれがリンクして表示され、消えるようにC＃をどのように書くかを知る必要があります。

Answer 1

あなたがそれらを個別に制御する必要がある場合、あなたの後ろにあなたのビューモデル/コードの5つのブールの性質を持つことができ、

のような公共ブールIsDot1Visible { INotifyPropertyChangedの //実装は、あなたのフレームワークに依存し 取得します。セット; }

アルゴリズムに応じて、これらのプロパティを設定または設定解除することができます。ドットを非表示にするか、または表示させるには、トリガーで簡単なスタイルを作成します。

<Style x:Key="MyDotStyle" TargetType="{x:Type Ellipse}"> 
     <Setter Property="Visibility" Value="Visible" /> 
     <Style.Triggers> 
      <DataTrigger Binding="{Binding IsDot1Visible}" Value="false"> 
       <Setter Property="Visibility" Value="Hidden" /> 
      </DataTrigger> 
     </Style.Triggers> 
    </Style> 

Answer 2

5つの独立したブール値と少し例：

私はドットのために国境を使用していますがEllipse .ColorsがColorAnimationを使用してアニメーション化され選択することができます。

XAML：

<Grid> 
    <Grid.Resources> 
     <Style x:Key="Border" TargetType="{x:Type Border}"> 
      <Setter Property="Background" Value="Blue"></Setter> 
      <Style.Triggers> 
       <DataTrigger Binding="{Binding Path=Tag,RelativeSource={RelativeSource Self}}" Value="True"> 
         <DataTrigger.EnterActions> 
         <BeginStoryboard> 
          <Storyboard> 
           <ColorAnimation To="Red" 
           Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" 
           FillBehavior="HoldEnd" 
           Duration="0:0:1"/> 
          </Storyboard> 
         </BeginStoryboard> 
        </DataTrigger.EnterActions> 
        <DataTrigger.ExitActions> 
         <BeginStoryboard> 
          <Storyboard> 
           <ColorAnimation To="Blue" 
           Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" 
           FillBehavior="HoldEnd" 
           Duration="0:0:1"/> 
          </Storyboard> 
         </BeginStoryboard> 
        </DataTrigger.ExitActions> 
       </DataTrigger> 
      </Style.Triggers> 
     </Style> 
    </Grid.Resources> 
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top"> 
     <Border Width="10" Height="10" Tag="{Binding Point1Blue}" Style="{StaticResource Border}" CornerRadius="10"></Border> 
     <Border Width="10" Height="10" Tag="{Binding Point2Blue}" Style="{StaticResource Border}" CornerRadius="10"></Border> 
     <Border Width="10" Height="10" Tag="{Binding Point3Blue}" Style="{StaticResource Border}" CornerRadius="10"></Border> 
     <Border Width="10" Height="10" Tag="{Binding Point4Blue}" Style="{StaticResource Border}" CornerRadius="10"></Border> 
     <Border Width="10" Height="10" Tag="{Binding Point5Blue}" Style="{StaticResource Border}" CornerRadius="10"></Border> 
    </StackPanel> 
</Grid> 

モデルContext.cs：

namespace WpfApplication1 
{ 
    public class Context : INotifyPropertyChanged 
    { 
     private bool _point1Blue; 
     private bool _point2Blue; 
     private bool _point3Blue; 
     private bool _point4Blue; 
     private bool _point5Blue; 

     public Context() 
     { 
      Point1Blue = true; 
      Point2Blue = true; 
      Point3Blue = false; 
      Point4Blue = true; 
      Point5Blue = false; 

     } 

     public bool Point1Blue 
     { 
      get { return _point1Blue; } 
      set 
      { 
       if (value == _point1Blue) return; 
       _point1Blue = value; 
       OnPropertyChanged("Point1Blue"); 
      } 
     } 

     public bool Point2Blue 
     { 
      get { return _point2Blue; } 
      set 
      { 
       if (value == _point2Blue) return; 
       _point2Blue = value; 
       OnPropertyChanged("Point2Blue"); 
      } 
     } 

     public bool Point3Blue 
     { 
      get { return _point3Blue; } 
      set 
      { 
       if (value == _point3Blue) return; 
       _point3Blue = value; 
       OnPropertyChanged("Point3Blue"); 
      } 
     } 

     public bool Point4Blue 
     { 
      get { return _point4Blue; } 
      set 
      { 
       if (value == _point4Blue) return; 
       _point4Blue = value; 
       OnPropertyChanged("Point4Blue"); 
      } 
     } 

     public bool Point5Blue 
     { 
      get { return _point5Blue; } 
      set 
      { 
       if (value == _point5Blue) return; 
       _point5Blue = value; 
       OnPropertyChanged("Point5Blue"); 
      } 
     } 

     public event PropertyChangedEventHandler PropertyChanged; 

     protected virtual void OnPropertyChanged(string propertyName) 
     { 
      var handler = PropertyChanged; 
      if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName)); 
     } 
    } 
} 

そして結果：

今あなたが欲しいのアルゴリズムを使用して5つのブール値を変更することで、あなたのUIを変更することができるでしょう。

Answer 3

表示する必要があることを暗示し、その状態にバインドする状態に基づいて列挙型を作成します。次いで

public enum States 
{ 
    RedState, 
    GreenState, 
    OrangeState 
} 

ビューモデル

public class MyViewModel : INotifyPropertyChanged 
{ 
     public States CurrentState 
     { 
      get { return _CurrentState; } 
      set 
      { 
       _CurrentState = value; 
       PropertyChanged("CurrentState"); 
      } 
    } 

列挙楕円

をオン/オフする特定の状態を特定するパラメータにかかる変換コンストラクタがXAML

<Window.Resources> 
    <converters:OperationStateToVisiblity x:Key="StateToVisiblity" /> 
</Window.Resources> 
    ... 
<Ellipse Fill="DarkRed" Visibility="{Binding CurrentState, ConverterParameter=RedState, Converter={StaticResource StateToVisiblityReverse}}"/> 
<Ellipse Fill="Green" Visibility="{Binding CurrentState, ConverterParameter=GreenState, Converter={StaticResource StateToVisiblityReverse}}" /> 

コンバータ

/// <summary> 
/// Take the current state, passed in as value which is bound, and check it against 
/// the parameter passed in. If the names match, the ellipse should be visible, 
/// if not equal, then it should be collapsed. 
/// </summary> 
public class OperationStateToVisiblity : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     return (value != null)  && 
       (parameter != null) && 
       value.ToString().Equals(parameter.ToString()) 
      ? Visibility.Visible : Visibility.Collapsed; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
}