locked
DataGridのレイアウト(アニメーションの値)の動的変更方法について RRS feed

  • 質問

  • 初心者です。わかる方がいらっしゃいましたらご教授ください。

    やりたいことを簡単に箇条書きにいたします。

    ①SilverlightのDataGridを使い、あるセルの値に応じてそのセルのレイアウトを変更したい

    ②レイアウトはセルの背景色を変更するが点滅表示のアニメーションとしたい

    ③レイアウトのスタイル定義は別のファイル(HTMLのCSSファイル的な)にて定義したい

    ④点滅表示させたときの色、欲を言えば周期をWebの管理画面などで変更可能としたい

    ※それらを変更するたびにビルドし、リリースすることを回避したい

    以上のうち①~③についてはSilverlight+ExpressionStdio Blendで実現できましたが

    ④については実現方法がわかりません。

    スタイル(アニメーション)の設定値の動的変更は可能でしょうか?

    参考までに下記に①~③のソースの抜粋を記載します。

    (SilverLight,Blend ver4 + VB.net 2010)

    ※System.Windows.Interactivity 必要

    ▼MainPage.xaml

    <sdk:DataGrid AutoGenerateColumns="False" Height="389" Name="DataGrid1" Width="1254" FontSize="14" BorderThickness="0" UseLayoutRounding="True">
        <sdk:DataGrid.Columns>
            <sdk:DataGridTextColumn  Header="1" IsReadOnly="True" Binding="{Binding NUM1}" CellStyle="{StaticResource DataGridCellStyle1}"  />
        </sdk:DataGrid.Columns>
    </sdk:DataGrid>

    ▼MainPage.xaml.vb

    ※Webサービスからデータを取得し、自作クラスのプロパティに保存しています。

    自作クラスはDataGridのItemSourcsへバインドします。

    Partial Public Class MainPage

        Inherits Page

        '一覧データ用
        Public _myInfo As New ObservableCollection(Of MYINFO)

        Protected Overrides Sub OnNavigatedTo(ByVal e As System.Windows.Navigation.NavigationEventArgs)

        DataGrid1.ItemsSource = _myInfo

            '初回データバインドではスタイルが反映されないためダミーアイテムをバインド
            '※原因確認中

            For i As Integer = 0 To 128
                Dim item As New MYINFO
                _myInfo.Add(item)
            Next

      End Sub

    End Class

    Public Class MYINFO

        Implements INotifyPropertyChanged

        Public Event PropertyChanged(ByVal sender As Object, ByVal e As PropertyChangedEventArgs) Implements INotifyPropertyChanged.PropertyChanged
        Private Sub NotifyPropertyChanged(ByVal propertyName As String)
            RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
        End Sub

        '値1

        Private _NUM1 As String = ""
        Public Property NUM1() As String
            Get
                Return _NUM1
            End Get
            Set(ByVal value As String)
                _NUM1 = value
                NotifyPropertyChanged("NUM1")
            End Set
        End Property

    End Class

    ▼Styles.xaml

    ★EasingColorKeyFrame のValueの値を動的に変更したい

    <Style x:Key="DataGridCellStyle1" TargetType="sdk:DataGridCell">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="sdk:DataGridCell">
            <Grid x:Name="Root" Background="TransParent">
              <i:Interaction.Triggers>
                <ei:DataTrigger Binding="{Binding NUM1, Mode=TwoWay}" Value="N1">
                  <ei:GoToStateAction StateName="OnFlicker"/>
                </ei:DataTrigger>
                <ei:DataTrigger Binding="{Binding NUM1, Mode=TwoWay}" Value="N1" Comparison="NotEqual">
                  <ei:GoToStateAction StateName="OffFlicker"/>
                </ei:DataTrigger>
             </i:Interaction.Triggers>
             <Grid.ColumnDefinitions>
               <ColumnDefinition/>
               <ColumnDefinition Width="Auto"/>
             </Grid.ColumnDefinitions>
             <VisualStateManager.VisualStateGroups>
               <VisualStateGroup x:Name="VisualStateGroup">
                 <VisualState x:Name="OnFlicker">
                   <Storyboard AutoReverse="False" RepeatBehavior="Forever">
                     <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Root">
                       <EasingColorKeyFrame KeyTime="0" Value="Red"/>
                       <EasingColorKeyFrame KeyTime="0:0:1" Value="White"/>
                       <EasingColorKeyFrame KeyTime="0:0:2" Value="Red"/>
                     </ColorAnimationUsingKeyFrames>
                   </Storyboard>
                 </VisualState>
                 <VisualState x:Name="OffFlicker">
                   <Storyboard>
                     <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Root" d:IsOptimized="True"/>
                   </Storyboard>
                 </VisualState>
               </VisualStateGroup>
             </VisualStateManager.VisualStateGroups>
             <Rectangle x:Name="FocusVisual" Fill="#66FFFFFF" HorizontalAlignment="Stretch" IsHitTestVisible="false" Opacity="0" Stroke="#FF6DBDD1" StrokeThickness="1" VerticalAlignment="Stretch"/>
             <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
             <Rectangle x:Name="InvalidVisualElement" HorizontalAlignment="Stretch" IsHitTestVisible="False" Opacity="0" Stroke="#FFDC000C" StrokeThickness="1" VerticalAlignment="Stretch"/>
             <Rectangle x:Name="RightGridLine" Grid.Column="1" VerticalAlignment="Stretch" Width="1"/>
           </Grid>
         </ControlTemplate>
       </Setter.Value>
     </Setter>

    2012年5月7日 7:34

回答

  • 自己レスですが、以下のようにすることで対応しました。

    style定義を③の別ファイルではなく、Page.Resourcesとして同一ファイルに定義し、

    そこでダミーのコントロールを配置し、その値をバインドするようにしました。

    ▼MainPage.xaml

    <Storyboard AutoReverse="False" RepeatBehavior="Forever">
    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Root">
    <EasingColorKeyFrame KeyTime="0:0:0" Value="{Binding ElementName=TextBlock1, Path=Text}"/>
    <EasingColorKeyFrame KeyTime="0:0:1" Value="Transparent"/>
    <EasingColorKeyFrame KeyTime="0:0:2" Value="{Binding ElementName=TextBlock1, Path=Text}"/>
    </ColorAnimationUsingKeyFrames>
    </Storyboard>

    ▼MainPage.xaml.vb

    どっかのタイミングで

    TextBlock1.Text = "Blue"

    • 回答としてマーク 山本春海 2012年5月16日 8:10
    2012年5月8日 3:02