Changing Image Opacity Not Working As Expected
Posted: 06 Nov 2020, 10:43
Hello guys!
I have a usercontrol which has a Storyboard changing the opacity of an Image(png).
When going through the different keyframes nothing happens in-between the different keyframes; the opacity changes from 0 to 1 instantly(when the set duration has passed) instead of smoothly interpolating/transitioning between the two given values.
xaml code:
Storyboard begin being called from code:
Also if I set the opacity of the image to 0.5 the image disappears which makes me believe it handles image opacity differently from other UIElements.
Because when I use the same storyboard for changing the opacity of a grid/rectangle it behaves as expected; smooth transition between 0 and 1.
I've tried using the ImageMagick tool to convert the png to have premultiplied alpha but without good results.
I have also tried changing the TargetProperty and use (Image.opacity).
Also, the png has transparent areas which do appear transparent in our project.
Any hint is much appreciated as this problem is making my hair turn grey ^^
I have a usercontrol which has a Storyboard changing the opacity of an Image(png).
When going through the different keyframes nothing happens in-between the different keyframes; the opacity changes from 0 to 1 instantly(when the set duration has passed) instead of smoothly interpolating/transitioning between the two given values.
xaml code:
Code: Select all
<UserControl x:Class="CrazyCanvas.DamageIndicatorGUI"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:CrazyCanvasNoesisGUI"
mc:Ignorable="d"
TextElement.FontFamily="gogono_cocoa_mochi.ttf#Gogono Cocoa Mochi"
d:DesignHeight="100" d:DesignWidth="100"
x:Name="DAMAGE_INDICATOR_CONTAINER">
<UserControl.Resources>
<Storyboard x:Key="DamageIndicatorStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DamageIndicator">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="test">
<Image x:Name="DamageIndicator" Source="HitIndicator.png" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="1">
</Image>
</Grid>
</UserControl>
Code: Select all
void DamageIndicatorGUI::DisplayIndicator()
{
m_pDamageIndicatorStoryboard->Begin();
}
Because when I use the same storyboard for changing the opacity of a grid/rectangle it behaves as expected; smooth transition between 0 and 1.
I've tried using the ImageMagick tool to convert the png to have premultiplied alpha but without good results.
I have also tried changing the TargetProperty and use (Image.opacity).
Also, the png has transparent areas which do appear transparent in our project.
Any hint is much appreciated as this problem is making my hair turn grey ^^