arukari
Topic Author
Posts: 5
Joined: 22 Apr 2015, 15:16

OpacityMask and RadialGradientBrush

06 Dec 2018, 09:01

hi,
i try creating radar gui.
but, no visible for use OpacityMask and RadialGradientBrush.
<Grid HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="300" Width="300">
                <Grid.OpacityMask>
                    <RadialGradientBrush>
                        <GradientStop Color="Black" Offset="0"/>
                        <GradientStop Color="#AA000000" Offset="0.98"/>
                        <GradientStop Color="Transparent" Offset="1"/>
                    </RadialGradientBrush>
                </Grid.OpacityMask>
                ....
this not use OpacityMask.
Image

Any idea? for mask ring out yellow maker.

Tags:
 
Wanderer
Posts: 168
Joined: 08 May 2017, 18:36

Re: OpacityMask and RadialGradientBrush

06 Dec 2018, 10:16

If I know correctly, Noesis don't support GeometryBrushes, therefore OpacityMask doesn't work. Try Clip, this should working. Or Instead GeometryBrush use texture. This should working too (I remember I used texture brush for something, but not for OpacityMask)
 
User avatar
sfernandez
Site Admin
Posts: 1395
Joined: 22 Dec 2011, 19:20

Re: OpacityMask and RadialGradientBrush

07 Dec 2018, 17:18

Hi, I think you don't need OpacityGroup for this matter, you can achieve the same using simple radial brushes with transparency as you can see here:
<Grid x:Name="Radar" Width="300" Height="300">
    <Ellipse>
        <Ellipse.Fill>
            <RadialGradientBrush>
                <GradientStop Offset="1.0" Color="Cyan"/>
                <GradientStop Offset="0.95" Color="#DD00FFFF"/>
                <GradientStop Offset="0.94" Color="#AA00FFFF"/>
                <GradientStop Offset="0.70" Color="Transparent"/>
            </RadialGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
    <Ellipse Width="180" Height="180" Stroke="Cyan" StrokeThickness="2"/>
    <Path Data="M0,150L300,150M150,0L150,300" Stroke="Cyan" StrokeThickness="2"/>
</Grid>
Anyway, if you found a situation where OpacityMask is not working fine, could you please create a ticket in our bugtracker attaching a minimal xaml that reproduces it?
 
User avatar
sfernandez
Site Admin
Posts: 1395
Joined: 22 Dec 2011, 19:20

Re: OpacityMask and RadialGradientBrush

07 Dec 2018, 18:30

After reading again your message I think I misunderstood what was happening to you.
I guess you want to apply an OpacityMask to mask out the yellow marks, not to create the blue radar shape using an OpactiyMask, sorry.

I was able to reproduce the problem with OpacityMasks in Unity, they are vertically inverted, so when you place the radar at the bottom nothing gets rendered (it shows fine when centered in screen). Please report this at our bugtracker and we will try to fix it as soon as possible.
 
arukari
Topic Author
Posts: 5
Joined: 22 Apr 2015, 15:16

Re: OpacityMask and RadialGradientBrush

08 Dec 2018, 04:16

I can visibled.
RadialGradientBrush is need Center,Radius setting.

But I have not obtained the results I expected.
I want to make something like this.


I will post video and code comparing OpacityMask animation and Fill animation.

Left Radar Code:
            <Grid HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="300" Width="300">
                <noesis:Element.Projection>
                    <noesis:PlaneProjection RotationX="45" RotationY="-30" RotationZ="-30" />
                </noesis:Element.Projection>
                <Ellipse Stroke="Cyan" Height="300" Width="300" RenderTransformOrigin="0.5,0.5">
                    <Ellipse.Fill>
                        <RadialGradientBrush>
                            <GradientStop Color="#1500E8FF" Offset="0.795"/>
                            <GradientStop Color="#2600E8FF" Offset="0.938"/>
                            <GradientStop Color="#FF00E8FF" Offset="1"/>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Line X1="0" Y1="150" X2="300" Y2="150" Stroke="Cyan" StrokeThickness="1"/>
                <Line X1="150" Y1="0" X2="150" Y2="300" Stroke="Cyan" StrokeThickness="1"/>
                <Path Data="M150,10 145,100 155,100Z" Fill="Cyan" Stroke="Cyan" StrokeThickness="1" />
                <Ellipse x:Name="RadarEllipse" Stroke="Cyan" Height="300" Width="300" HorizontalAlignment="Left" VerticalAlignment="Bottom">
                    <Ellipse.Fill>
                        <RadialGradientBrush>
                            <GradientStop Color="#0000E8FF" Offset="0"/>
                            <GradientStop Color="#FF00E8FF" Offset="0.03"/>
                            <GradientStop Color="Transparent" Offset="0.06"/>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <ItemsControl x:Name="RadarCanvas" Width="300" Height="300" ItemsSource="{Binding Path=RadarPositions}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Canvas ClipToBounds="True" x:Name="RadarClip">
                                <Canvas.OpacityMask>
                                    <RadialGradientBrush Center="0.5,0.5" RadiusX="300" RadiusY="300">
                                        <GradientStop Color="#00000000" Offset="0.25"/>
                                        <GradientStop Color="#FF000000" Offset="0.50"/>
                                        <GradientStop Color="#00000000" Offset="0.60"/>
                                    </RadialGradientBrush>
                                </Canvas.OpacityMask>
                                <Canvas.Triggers>
                                    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.OpacityMask).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" RepeatBehavior="Forever">
                                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-0.56"/>
                                                    <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" RepeatBehavior="Forever">
                                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-0.23"/>
                                                    <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.00"/>
                                                </DoubleAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.OpacityMask).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" RepeatBehavior="Forever">
                                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.00"/>
                                                    <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.00"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Canvas.Triggers>
                            </Canvas>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <ContentControl Content="{Binding}">
                                <ContentControl.Style>
                                    <Style TargetType="{x:Type ContentControl}">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Path=IconType}" Value="1">
                                                <Setter Property="ContentTemplate" Value="{StaticResource RadarMarker}" />
                                                <Setter Property="Visibility" Value="{Binding Path=IsAlive}" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </ContentControl.Style>
                            </ContentControl>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemContainerStyle>
                        <Style>
                            <Setter Property="Canvas.Left" Value="{Binding Position.x}"/>
                            <Setter Property="Canvas.Top" Value="{Binding Position.y}"/>
                        </Style>
                    </ItemsControl.ItemContainerStyle>
                </ItemsControl>
            </Grid>
Right Fill Animation Code:
            <Ellipse HorizontalAlignment="Right" Height="300" Stroke="Cyan" StrokeThickness="1" VerticalAlignment="Bottom" Width="300">
                <noesis:Element.Projection>
                    <noesis:PlaneProjection RotationX="50" RotationY="-30"/>
                </noesis:Element.Projection>
                <Ellipse.Fill>
                    <RadialGradientBrush>
                        <GradientStop Color="#00000000" Offset="0.25"/>
                        <GradientStop Color="#FF000000" Offset="0.50"/>
                        <GradientStop Color="#00000000" Offset="0.60"/>
                    </RadialGradientBrush>
                </Ellipse.Fill>
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" RepeatBehavior="Forever">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-0.56"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" RepeatBehavior="Forever">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-0.23"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.00"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" RepeatBehavior="Forever">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.00"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.00"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>

                </Ellipse.Triggers>
            </Ellipse>
 
User avatar
sfernandez
Site Admin
Posts: 1395
Joined: 22 Dec 2011, 19:20

Re: OpacityMask and RadialGradientBrush

10 Dec 2018, 11:31

To create an animation like the one in the youtube video you can use an image (see attached), and rotate it:
<Canvas>
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.OpacityMask).(Brush.RelativeTransform).(RotateTransform.Angle)" RepeatBehavior="Forever"
                                From="0" To="360" Duration="0:0:4"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Canvas.Triggers>
            <Canvas.OpacityMask>
                <ImageBrush ImageSource="Images/radar.png">
                    <ImageBrush.RelativeTransform>
                        <RotateTransform CenterX="0.5" CenterY="0.5"/>
                    </ImageBrush.RelativeTransform>
                </ImageBrush>
            </Canvas.OpacityMask>
            ...
</Canvas>
Attachments
radar.png
radar.png (26.76 KiB) Viewed 39 times
 
arukari
Topic Author
Posts: 5
Joined: 22 Apr 2015, 15:16

Re: OpacityMask and RadialGradientBrush

10 Dec 2018, 13:00

To create an animation like the one in the youtube video you can use an image (see attached), and rotate it:
<Canvas>
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.OpacityMask).(Brush.RelativeTransform).(RotateTransform.Angle)" RepeatBehavior="Forever"
                                From="0" To="360" Duration="0:0:4"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Canvas.Triggers>
            <Canvas.OpacityMask>
                <ImageBrush ImageSource="Images/radar.png">
                    <ImageBrush.RelativeTransform>
                        <RotateTransform CenterX="0.5" CenterY="0.5"/>
                    </ImageBrush.RelativeTransform>
                </ImageBrush>
            </Canvas.OpacityMask>
            ...
</Canvas>
Thanks, Nice work.
but, vertically (and rotate) inverted.
I Report bugtracker now.
 
User avatar
sfernandez
Site Admin
Posts: 1395
Joined: 22 Dec 2011, 19:20

Re: OpacityMask and RadialGradientBrush

12 Dec 2018, 11:06

Thanks for the reports, we will fix them as soon as we can.

Who is online

Users browsing this forum: Baidu [Spider], Majestic-12 [Bot] and 8 guests