VisualStates example not working if use Animation objects that start in step 9.
What happens is that the background does not change opacity and the border does not change color. Have tried exactly as from download and slightly changed, always same result.
Any ideas, new to Windows Phone Dev and C#.
This style code works (uses methodology from step 8):
PHP Code:
<Style x:Key="ImageButtonStyle" TargetType="Button" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonButtonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed" >
<Storyboard>
<!-- Working choice to use is w/out animation which is below -->
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="MainBorder"
Storyboard.TargetProperty="BorderBrush" >
<DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="MainImage"
Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value=".5" />
</ObjectAnimationUsingKeyFrames>
<!-- Other choice to use is Animation which are below, but did not work, showed on device and emulator but no response to pressing -->
<!--
<ColorAnimation Storyboard.TargetName="MainBorder" Storyboard.TargetProperty="Border.BorderBrush.SolidColorBrush.Color" From="White" To="Red" Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetName="MainImage" Storyboard.TargetProperty="Opacity" To=".5" Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetName="MainText" Storyboard.TargetProperty="Opacity" To=".5" Duration="0:0:1" />
-->
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="MainBorder"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel x:Name="MainPanel" Background="Black"
Margin="{TemplateBinding Margin}"
Height="{TemplateBinding Height}"
Width= "{TemplateBinding Width}">
<Image x:Name="MainImage"
Margin="10"
Height="200"
Width="300"
Source="Images/wrox.png" />
<TextBlock x:Name="MainText" Text="{TemplateBinding Content}" TextAlignment="Center" />
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This style code does not (uses methodology from step 9):
PHP Code:
<Style x:Key="CustomImageButtonStyle" TargetType="Button" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonButtonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed" >
<Storyboard>
<!-- Working choice to use is w/out animation which is below -->
<!--
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="MainBorder"
Storyboard.TargetProperty="BorderBrush" >
<DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="MainImage"
Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value=".5" />
</ObjectAnimationUsingKeyFrames>
-->
<!-- Other choice to use is Animation which are below, but did not work, showed on device and emulator but no response to pressing -->
<ColorAnimation Storyboard.TargetName="MainBorder" Storyboard.TargetProperty="Border.BorderBrush.SolidColorBrush.Color" From="White" To="Red" Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetName="MainImage" Storyboard.TargetProperty="Opacity" To=".5" Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetName="MainText" Storyboard.TargetProperty="Opacity" To=".5" Duration="0:0:1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="MainBorder"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel x:Name="MainPanel" Background="Black">
<Image x:Name="MainImage" Source="Images/wrox.png" Width="300" Height="200" />
<TextBlock x:Name="MainText" Text="{TemplateBinding Content}" TextAlignment="Center" />
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>