iOS touch effect does not cover the circle and I cannot make change color on highlighted either

[mobileguy]

Hi

I have  a keypad screen with buttons from 0 to 9 and when the user tap on the border I would like some sort of effect - whatever I do does not seem to work  . on android the ripple effect is within the circle but on iOS is not working as android is does just some of the circle... also doing any highlighting does not work either..

I am sure I am doing something wrong . can you upload a sample snippet that should work in both ios and android

many thanks

//below is just a border with a circle and no properties in the effectview as whatever combination does not work for me.

  <localCore:SampleView.Resources>

      <ResourceDictionary>

          <Style x:Key="BorderKeyPadStyle" TargetType="Border">

              <Setter Property="Background" Value="Azure" />

              <Setter Property="HeightRequest" Value="80" />

              <Setter Property="HorizontalOptions" Value="Center" />

              <Setter Property="Stroke" Value="#ececec" />

              <Setter Property="StrokeThickness" Value="4" />

              <Setter Property="VerticalOptions" Value="Center" />

              <Setter Property="WidthRequest" Value="80" />

              <Setter Property="StrokeShape">

                  <Setter.Value>

                      <Ellipse />

                  </Setter.Value>

              </Setter>

          </Style>

      </ResourceDictionary>

  </localCore:SampleView.Resources>

  <Border Style="{StaticResource BorderKeyPadStyle}">

      <sfEffectsView:SfEffectsView x:Name="EffectsView">

          <Label HorizontalTextAlignment="Center" VerticalOptions="Center">

              <Label.FormattedText>

                  <FormattedString>

                      <Span FontSize="15" Text="2" />

                      <Span Text="{x:Static sys:Environment.NewLine}" />

                      <Span FontSize="10" Text="ABC" />

                  </FormattedString>

              </Label.FormattedText>

          </Label>

      </sfEffectsView:SfEffectsView>

  </Border>

[Vijayakumar Viswanathan]

Hi,

We have checked and are able to reproduce the reported Scenario of SfEffectView in IOS. This issue occurs with the framework ContentView not being resized inside a Border with Ellipse as Stroke Shape in IOS. We have reported this issue to the .NET MAUI team in the GitHub repository. Please follow the below link for further updates on the issue.

Issue link:  https://github.com/dotnet/maui/issues/13387

Regards,

Vijayakumar V

[mobileguy]

Thank you for your reply.

Unfortunately that has now gone into the Maui black hole and who knows if it will ever be fixed! All the issues in there are being moved to the backlog!!. I think as Syncfusion you have powerful voice there...

I would have used your SFButton but It would not be ready till sep 2023,  now since I am building a keypad page with button 1 to 9 and the 0 similar to the iphone passcode page , what control can I use to make a circle with a number and a letter in the middle and then add some effects to it , to show the user that something has been tapped/clicked?

Also I have tried setting the effect hightlight color or change color or just a ripple effect and nothing works. Is the border the problem?  Do you have an example where change color works?

this code does not work 

<syncEffectsView:SfEffectsView
     HighlightColor="#2196F3"
     TouchDownEffects="Highlight">
     ...
 </syncEffectsView:SfEffectsView>

Open to suggestions ! 

Many thanks

[Vijayakumar Viswanathan]

Hi,

We have prepared a workaround to meet the current requirement by utilizing the 'clip' property of the Border control, as demonstrated in the code snippet below. Additionally, we have provided a reference sample for your convenience. Please review the sample and let us know the details.

Border Style:

 <Setter Property="Clip">

                    <Setter.Value>

                        <EllipseGeometry RadiusX="35" RadiusY="35" Center="40,40"/>

                    </Setter.Value>

  </Setter>

Attachment: TestSample_4200a1fe.zip

[mobileguy]

Thank you so much for your workaround , that does the job. 

Just to let you know that toucheffect and highlight does not seem to work - it does not change the color when I touch the control/

Thanks 

<syncEffectsView:SfEffectsView
    TouchDownEffects="Highlight"
    HighlightBackground="#FF0000">
</syncEffectsView:SfEffectsView>

[Vijayakumar Viswanathan]

Hi,

Query: Toucheffect and highlight does not seem to work - it does not change the color when I touch the control

We have checked the reported scenario by setting the TouchDownEffects as Highlight and the HighlightedBackground property and couldn't able to reproduce it. We have shared the sample and the video for your reference. To better understand the root cause and assist with resolving the issue, it would be helpful if you could provide more detailed information about the scenario in which our control was used, including a sample demonstrating the issue with replication steps. Please let us know if you have any other queries.

Attachment: Sample_and_Video_930136d3.zip

[mobileguy]

Thank you so much ... all good and again thanks for the workaround 

[Vijayakumar Viswanathan]

Hi,

We are pleased that the workaround we offered was successful for you. We will be closing this forum thread, if you require any further information, please open a new one.

Regards,

Vijayakumar V