Font Icon Background

Question

Font Icon Background

Jassim Al Rahma 1,616

Hi,

In below image

277982-52a85fec-0d80-43a9-b736-187c7c5d1ff9-4-5005-c.jpeg

I am using a fontawesome on the top of a Border but as you can see that the border line is visible inside the icon.

How can I fix this?

Thanks, Jassim

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-01-11T07:39:46.5566667+00:00

Could you share more code snippets about how you set the fontawesome? Do you use any NuGet packages? and would you mind sharing the font file for testing? On which platform did you meet this issue? As noted in the Q&A FAQ: How to write a quality question

Jassim Al Rahma 1,616

Here is the code:

<SyncfusionListView:SfListView x:Name="ListViewProverbs" Grid.Row="2" IsVisible="False" SelectionBackground="Transparent" ScrollBarVisibility="Never" AutoFitMode="DynamicHeight" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" ItemSpacing="3" ItemTapped="ListViewProverbs_ItemTapped">
    <SyncfusionListView:SfListView.ItemTemplate>
        <DataTemplate>
            <Grid Margin="20,0,20,40" ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
                <Border Padding="20">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="0,40,40,0" Stroke="{AppThemeBinding Light={StaticResource ProverbBorderLight}, Dark={StaticResource ProverbBorderDark}}" />
                </Border.StrokeShape>
                    <Label Text="{Binding proverb_text}" Margin="0,0,0,40" FontFamily="MarheyRegular" FontSize="{DynamicResource LabelFontSize}" />
                </Border>

                <Image x:Name="ImagePlay" WidthRequest="60" HeightRequest="60" Margin="0,0,0,-30" VerticalOptions="End">
                <Image.Source>
                    <FontImageSource FontFamily="FontSolid" Glyph="{StaticResource IconCirclePlay}" Color="{AppThemeBinding Light={StaticResource PlayIconLight}, Dark={StaticResource PlayIconDark}}" Size="40" />
                </Image.Source>
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="PlayTapGestureRecognizer_Tapped" NumberOfTapsRequired="1" />
                </Image.GestureRecognizers>
                </Image>
            </Grid>
        </DataTemplate>
    </SyncfusionListView:SfListView.ItemTemplate>
</SyncfusionListView:SfListView>

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-01-12T04:45:20.4166667+00:00
Would you mind sharing the Glyph for testing? From the code snippets, I can see that you set a Grid as the DataTemplate, please try to add a ViewCell

<ListView> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Grid ...>
Jassim Al Rahma 1,616 Reputation points

2023-01-12T16:17:42.2866667+00:00

I tried <ViewCell> but it's the same problem. My Glyph is a FontAwesome.

<x:String x:Key="IconPlay"></x:String>
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-01-13T07:03:59.9566667+00:00

As described in the doc- Fonts in .NET MAUI - .NET MAUI | Microsoft Learn, I need the Glyph files and register the Glyph for testing.(I use other Glyph and I didn't use SyncfusionListView , but I cannot reproduce the issue)
You coud try to debug the project and check if it is related to Margin="0,0,0,-30", and check if this issue still exists when you use ListView instead of SyncfusionListView.
Jassim Al Rahma 1,616 Reputation points

2023-01-13T08:19:00.6133333+00:00

it's nothing to do with the SfListView because I tried it with just a Grid in an Empty page and it's having the same problem.

Here is a sample project:

[https://github.com/jrahma/IconFontSample
Jassim Al Rahma 1,616 Reputation points

2023-01-13T08:20:38.2766667+00:00

it's nothing to do with the SfListView because I tried a plain Grid and it's the same problem.

Here is a sample project:

[https://github.com/jrahma/IconFontSample

Accepted answer

0 additional answers

Your answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-01-11T07:39:46.5566667+00:00

Could you share more code snippets about how you set the fontawesome? Do you use any NuGet packages? and would you mind sharing the font file for testing? On which platform did you meet this issue? As noted in the Q&A FAQ: How to write a quality question
Jassim Al Rahma 1,616 Reputation points

2023-01-11T08:24:20.3766667+00:00

Here is the code:

<SyncfusionListView:SfListView x:Name="ListViewProverbs" Grid.Row="2" IsVisible="False" SelectionBackground="Transparent" ScrollBarVisibility="Never" AutoFitMode="DynamicHeight" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" ItemSpacing="3" ItemTapped="ListViewProverbs_ItemTapped"> <SyncfusionListView:SfListView.ItemTemplate> <DataTemplate> <Grid Margin="20,0,20,40" ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand"> <Border Padding="20"> <Border.StrokeShape> <RoundRectangle CornerRadius="0,40,40,0" Stroke="{AppThemeBinding Light={StaticResource ProverbBorderLight}, Dark={StaticResource ProverbBorderDark}}" /> </Border.StrokeShape> <Label Text="{Binding proverb_text}" Margin="0,0,0,40" FontFamily="MarheyRegular" FontSize="{DynamicResource LabelFontSize}" /> </Border> <Image x:Name="ImagePlay" WidthRequest="60" HeightRequest="60" Margin="0,0,0,-30" VerticalOptions="End"> <Image.Source> <FontImageSource FontFamily="FontSolid" Glyph="{StaticResource IconCirclePlay}" Color="{AppThemeBinding Light={StaticResource PlayIconLight}, Dark={StaticResource PlayIconDark}}" Size="40" /> </Image.Source> <Image.GestureRecognizers> <TapGestureRecognizer Tapped="PlayTapGestureRecognizer_Tapped" NumberOfTapsRequired="1" /> </Image.GestureRecognizers> </Image> </Grid> </DataTemplate> </SyncfusionListView:SfListView.ItemTemplate> </SyncfusionListView:SfListView>
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-01-12T04:45:20.4166667+00:00

Would you mind sharing the Glyph for testing? From the code snippets, I can see that you set a Grid as the DataTemplate, please try to add a ViewCell

<ListView> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Grid ...>
Jassim Al Rahma 1,616 Reputation points

2023-01-12T16:17:42.2866667+00:00

I tried <ViewCell> but it's the same problem. My Glyph is a FontAwesome.

<x:String x:Key="IconPlay"></x:String>
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-01-13T07:03:59.9566667+00:00

As described in the doc- Fonts in .NET MAUI - .NET MAUI | Microsoft Learn, I need the Glyph files and register the Glyph for testing.(I use other Glyph and I didn't use SyncfusionListView , but I cannot reproduce the issue)
You coud try to debug the project and check if it is related to Margin="0,0,0,-30", and check if this issue still exists when you use ListView instead of SyncfusionListView.
Jassim Al Rahma 1,616 Reputation points

2023-01-13T08:19:00.6133333+00:00

it's nothing to do with the SfListView because I tried it with just a Grid in an Empty page and it's having the same problem.

Here is a sample project:

[https://github.com/jrahma/IconFontSample
Jassim Al Rahma 1,616 Reputation points

2023-01-13T08:20:38.2766667+00:00

it's nothing to do with the SfListView because I tried a plain Grid and it's the same problem.

Here is a sample project:

[https://github.com/jrahma/IconFontSample

Answer 1

Hello,

Please try to set the BackgroundColor for the Image, and the color should response the theme, I test Black and White, you can set the color according to your needs, refer to the following code:

  <Image BackgroundColor="{AppThemeBinding Light= "White", Dark= Black}"... Margin="0,0,0,-30" VerticalOptions="End" >

Best Regards,

Wenyan Zhang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentationto enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Font Icon Background

0 additional answers

Your answer