-
- TimTheToad
- Posts: 8
- Joined:
Changing Image Opacity Not Working As Expected
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 ^^
Re: Changing Image Opacity Not Working As Expected
Are you able to reproduce this using XamlPlayer or are you using a custom renderer?
-
- TimTheToad
- Posts: 8
- Joined:
Re: Changing Image Opacity Not Working As Expected
Are you able to reproduce this using XamlPlayer or are you using a custom renderer?
I did try but get this error: *Directory*/DamageIndicatorGUI.xaml(23): invalid token.
so it doesn't do much for me sadly.
However, it does work as intended using the Microsoft Blend.
Re: Changing Image Opacity Not Working As Expected
is this using a custom renderer or own renderers?
-
- TimTheToad
- Posts: 8
- Joined:
Re: Changing Image Opacity Not Working As Expected
Sorry, we're using custom renderers. We've implemented NoesisGUI in our Vulkan renderer.is this using a custom renderer or own renderers?
Re: Changing Image Opacity Not Working As Expected
Thanks for the answer. The issue is related to the integration. I recommend reproducing a minimal example (probably a simple image with opacity is enough) that fails in your integration and works in XamlPlayer. That way you can capture the frame and analyze the GPU commands side by side.
When opacity is being used (opacity < 1), the offscreen phase is being activated (when calling RenderOffscreen()), that phase may change the active render target and current viewport so first thing i would try is making sure those parameters are restored.
You can see this in our integration sample.
I recommend reading the render section of our Integration Tutorial.
When opacity is being used (opacity < 1), the offscreen phase is being activated (when calling RenderOffscreen()), that phase may change the active render target and current viewport so first thing i would try is making sure those parameters are restored.
You can see this in our integration sample.
I recommend reading the render section of our Integration Tutorial.
-
- TimTheToad
- Posts: 8
- Joined:
Re: Changing Image Opacity Not Working As Expected
Thank you for such quick response! I'll go back to our team with this information and if we get any other issues I'll come back to you guys :)Thanks for the answer. The issue is related to the integration. I recommend reproducing a minimal example (probably a simple image with opacity is enough) that fails in your integration and works in XamlPlayer. That way you can capture the frame and analyze the GPU commands side by side.
When opacity is being used (opacity < 1), the offscreen phase is being activated (when calling RenderOffscreen()), that phase may change the active render target and current viewport so first thing i would try is making sure those parameters are restored.
You can see this in our integration sample.
I recommend reading the render section of our Integration Tutorial.
Who is online
Users browsing this forum: Ahrefs [Bot], Bing [Bot] and 33 guests