אלעד מה העניינים?
יש לי ב-VIEWMODEL אוסף של אובייקטים מסוג מסוים שמכיל פרופרטי IsOn
ב-XAML יש לי DATATEMPLATE שמכיל אליפסה. אני רוצה לשנות את השקיפות של האליפסה באמצעות אנימציה שתופעל בהתאם לערך של IsOn
איך עושים את זה?
(ובאנגלית:
I have in a viewmodel a collection of objects (ObservableCollection<Sensor>) that contains one property IsOn:
public class Sensor
{
public bool IsOn { get; set; }
}
public class AreaSensorsPanelViewModel : ViewModelBase
{
private ObservableCollection<Sensor> _areaSensors = new ObservableCollection<Sensor>();
public AreaSensorsPanelViewModel()
{
for (int i = 0; i < 4; i++)
{
Sensor sense = new Sensor();
AreaSensors.Add(sense);
}
}
public ObservableCollection<Sensor> AreaSensors
{
get { return _areaSensors; }
set
{
_areaSensors = value;
OnPropertyChanged("AreaSensors");
}
}
}
This collection of objects represented in ListBox that its ItemTemplate is binded to
datatemplate which contains 2 viewboxes. each one of them contains 3 ellipses that represents "Led light indicator". (one is Green, one is Red)
Only one of them needs to be set to On (based on the property IsOn)
My Code is:
<DataTemplate x:Key="SensorDataTemplate">
<StackPanel Orientation="Horizontal" Margin="0,-1,0,10">
<StackPanel.Resources>
<Storyboard x:Name="SBTurnRedSensorOn">
<ColorAnimation Duration="0:0:0.5" To="#FFE93911" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="RedEllipse" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.5" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="RedEllipse" d:IsOptimized="True"/>
</Storyboard>
<Storyboard x:Name="SBTurnGreenSensorOn">
<ColorAnimation Duration="0:0:0.5" To="#FF24AB00" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="GreenEllipse" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.5" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GreenEllipse" d:IsOptimized="True"/>
</Storyboard>
<Storyboard x:Name="SBTurnRedSensorOff">
<ColorAnimation Duration="0:0:0.5" To="#00E93911" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="RedEllipse" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="RedEllipse" d:IsOptimized="True"/>
</Storyboard>
<Storyboard x:Name="SBTurnGreenSensorOff">
<ColorAnimation Duration="0:0:0.5" To="#0024AB00" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="GreenEllipse" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GreenEllipse" d:IsOptimized="True"/>
</Storyboard>
</StackPanel.Resources>
<TextBlock Text="Area: " Foreground="White"/>
<Viewbox HorizontalAlignment="Right" Height="20" Margin="13,0,0,0" VerticalAlignment="Bottom" Width="20">
<Grid Height="26" Width="25">
<Ellipse Height="25" x:Name="RedEllipse" VerticalAlignment="Top" Width="25" HorizontalAlignment="Left" Opacity="0">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.148,0.175" StartPoint="0.852,0.825">
<GradientStop Color="#FFFF0606" Offset="0"/>
<GradientStop Color="#FFE93911" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Margin="0,11,0,0" Height="15" VerticalAlignment="Top" HorizontalAlignment="Left" Width="25">
<Ellipse.OpacityMask>
<RadialGradientBrush>
<GradientStop Color="Black"/>
<GradientStop Offset="1"/>
</RadialGradientBrush>
</Ellipse.OpacityMask>
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.148,0.175" StartPoint="0.852,0.825">
<GradientStop Color="#FFEDF3F2" Offset="0"/>
<GradientStop Color="#FFEDF3F2" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Margin="3,2,0,0" Height="15" VerticalAlignment="Top" HorizontalAlignment="Left" Width="20">
<Ellipse.OpacityMask>
<LinearGradientBrush EndPoint="0.503,0.826" StartPoint="0.468,-0.287">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#14FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Ellipse.OpacityMask>
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.192,0.11" StartPoint="0.808,0.89">
<GradientStop Color="#FFEDF3F2" Offset="0"/>
<GradientStop Color="#FFEDF3F2" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</Viewbox>
<Viewbox Height="20" Margin="26,0,1,0" VerticalAlignment="Bottom" HorizontalAlignment="Right">
<Grid Height="26" Width="25">
<Ellipse x:Name="GreenEllipse" Height="25" VerticalAlignment="Top" Width="25" HorizontalAlignment="Left">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.148,0.175" StartPoint="0.852,0.825">
<GradientStop Color="#FF0EFF06" Offset="0"/>
<GradientStop Color="#FF24AB00" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Margin="0,11,0,0" Height="15" VerticalAlignment="Top" HorizontalAlignment="Left" Width="25">
<Ellipse.OpacityMask>
<RadialGradientBrush>
<GradientStop Color="Black"/>
<GradientStop Offset="1"/>
</RadialGradientBrush>
</Ellipse.OpacityMask>
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.148,0.175" StartPoint="0.852,0.825">
<GradientStop Color="#FFEDF3F2" Offset="0"/>
<GradientStop Color="#FFEDF3F2" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Margin="3,2,0,0" Height="15" VerticalAlignment="Top" HorizontalAlignment="Left" Width="20">
<Ellipse.OpacityMask>
<LinearGradientBrush EndPoint="0.503,0.826" StartPoint="0.468,-0.287">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#14FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Ellipse.OpacityMask>
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.192,0.11" StartPoint="0.808,0.89">
<GradientStop Color="#FFEDF3F2" Offset="0"/>
<GradientStop Color="#FFEDF3F2" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</Viewbox>
</StackPanel>
</DataTemplate>
how can I change (or, play/trigger the storyboards) in order to change the lightning indicator?
