2017-01-30 10 views
0

XAMLで5x5グリッドを作成しました。ここで、各行にTextBlockとBorderを5回配置しました。 image[]でインデックス付けを 'Border'タイプの式に適用できません

入力を確認していることをユーザーに示すために行を通過するアニメーションを作成したいとします。 (プログラムが何かをしていることを目に見えるようにするために、実際のチェックは異なって行われます)。

最初の行(私が最後のボーダーセグメントの後に残りを遮断)するためのXAMLコード:

<Grid BorderThickness="1" BorderBrush="Black"> 
    <Grid Margin="10" BorderThickness="1" BorderBrush="White" Width="350" Grid.RowSpan="4" Grid.ColumnSpan="2" Height="450"> 
     <Grid.Resources> 
      <SolidColorBrush x:Key="brush" Color="Silver"/> 
     </Grid.Resources> 

     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 

     <Grid.RowDefinitions> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
     </Grid.RowDefinitions> 

     <Border x:Name="borderRow1Column1" Grid.Column="0" Grid.Row="0" BorderBrush="{StaticResource brush}" BorderThickness="1" Width="50" Height="50"> 
      <TextBlock x:Name="tbRow1column1" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"></TextBlock> 
     </Border> 
     <Border x:Name="borderRow1Column2" Grid.Column="1" Grid.Row="0" BorderBrush="{StaticResource brush}" BorderThickness="1" Width="50" Height="50"> 
      <TextBlock x:Name="tbRow1column2" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"></TextBlock> 
     </Border> 
     <Border x:Name="borderRow1Column3" Grid.Column="2" Grid.Row="0" BorderBrush="{StaticResource brush}" BorderThickness="1" Width="50" Height="50"> 
      <TextBlock x:Name="tbRow1column3" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" ></TextBlock> 
     </Border> 
     <Border x:Name="borderRow1Column4" Grid.Column="3" Grid.Row="0" BorderBrush="{StaticResource brush}" BorderThickness="1" Width="50" Height="50"> 
      <TextBlock x:Name="tbRow1column4" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"></TextBlock> 
     </Border> 
     <Border x:Name="borderRow1Column5" Grid.Column="4" Grid.Row="0" BorderBrush="{StaticResource brush}" BorderThickness="1" Width="50" Height="50"> 
      <TextBlock x:Name="tbRow1column5" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"></TextBlock> 
     </Border> 

     <!-- More Rows following after this one --> 

    </Grid> 

今はその行の各テキストブロックを通過するループを有するたい、とそれを貼り付けるのではなく、インデックス付きのforループを作成することでコードを減らしたい。

private void displayCheckAnimation() 
    { 
     Color gray = Color.FromArgb(255, 128, 128, 128); 
     Color black = Color.FromArgb(255, 255, 255, 255); 

     Border borderRow1Column = new Border(); 
     for (int i = 0; i < 5; i++) 
     { 
      borderRow1Column[i].Background = new SolidColorBrush(gray); 
      Task.Delay(50).Wait(); 
      borderRow1Column[i].Background = new SolidColorBrush(black); 
      Task.Delay(50).Wait(); 
     } 
    } 

しかし、これは私にエラー

CS0021 Cannot apply indexing with [] to an expression of type 'Border' 

どのように私は私の行をループすることができますについてどのようなソリューションを提供しますか?

答えて

0

この例外が発生するのは、Borderを宣言してBorderの配列としてインデックスを作成しようとしているためです。代わりに、実際のボーダーインスタンスを使用する必要があります。

XAMLを変更せずに、これを行う方法がいくつかあります。あなたは特定の罫線を取得するためにリフレクションを使うこともできますし、最初にすべての罫線のリストを作成してリストをループすることもできます。

リフレクションを使用すると、名前の文字列を使用してインスタンスを取得できます。ボーダーの名前は行番号と列番号を使用して簡単に作成できるので、これは簡単な解決策です。しかし、リフレクションは使用するのが良いこともありますが、しばしばそうではありません。

もう1つの解決策は、まずボーダーでリストを作成し、それをループすることです。このようなもの:

List<Border> borders = new List<Border>() 
{ 
    borderRow1Column1, 
    borderRow1Column2, 
    etc. 
} 

foreach (var border in borders) 
{ 
    border.Background = new SolidColorBrush(gray); 
    Task.Delay(50).Wait(); 
    border.Background = new SolidColorBrush(black); 
    Task.Delay(50).Wait(); 
} 

WPFでアニメーションをチェックすることをお勧めします。これらは実際にはアニメーション用です。あなたはそれを本当に素晴らしく見せることができます。色が変わるアニメーションはColorAnimationです。

関連する問題