Forum Xamarin.Forms

Xamarin MVVM Custom Font Not Working In Data Template

AaronBlaylockAaronBlaylock USMember ✭✭

Having trouble with using a font. Works fine when I to the following down below.

FontFamily="{StaticResource IconFonts}" Text=""

But it doesn't work if I try to dynamically bind the text property.

FontFamily="{DynamicResource IconFonts}" Text="{Binding Comments}"

It shows up all weird. It looks like it tries to do something but doesn't completely render. Here is the full code with my testing included down below. Thanks in advance.

<FlexLayout x:Name="FlexFood"
    Wrap="Wrap"
    Direction="Row"
    JustifyContent="Start"
    Padding="0, 10"
    BindableLayout.ItemsSource="{Binding FoodCollection}">
<BindableLayout.ItemTemplate>
<DataTemplate>
    <StackLayout Padding="5, 0">

                <Frame.GestureRecognizers>

                    <TapGestureRecognizer Tapped="OnTypesSelected"></TapGestureRecognizer>

                </Frame.GestureRecognizers>

                <Frame.Content>
                    <StackLayout x:Name="LayoutFood">

                        <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                            <Label x:Name="LabelTitle" Padding="0, 10">
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span FontSize="Subtitle" Text="{Binding Title}" FontAttributes="Bold"></Span>
                                    <Span Text=" "></Span>
                                    <Span FontSize="Subtitle" Text="{Binding Version}" FontAttributes="Bold"></Span>
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>
                        </StackLayout>

                        <StackLayout Orientation="Horizontal">

                        <StackLayout HorizontalOptions="StartAndExpand">

                            <Label Text="{Binding Description}" FontSize="Body"></Label>-->
                            <Label FontSize="Caption" TextColor="#LELELE">
                                <Label.FormattedText>
                                    <FormattedString>
                                        <Span Text="{Binding fDepartment}"></Span>
                                        <Span Text="{Binding pType}"></Span>
                                    </FormattedString>
                                </Label.FormattedText>
                            </Label>

                        </StackLayout>

                        <StackLayout HorizontalOptions="End">

                        <Label Text="{Binding Comments}"></Label>

                        <Label FontFamily="{StaticResource IconFonts}" Text="&#xf139;"></Label>

                        <Label x:Name="LabelTypeTest" FontFamily="{StaticResource IconFonts}"
                                Text="{Binding Comments, StringFormat='&#xf123;'}"></Label>

                        <Label FontFamily="{DynamicResource IconFonts}" Text="{Binding Comments}"></Label>

                        <Image x:Name="ImageTypeTest">
                            <Image.Source>
                                <FontImageSource Size="48" FontFamily="{StaticResource IconFonts}" Color="#000000"></FontImageSource>
                            </Image.Source>
                        </Image>

                        </StackLayout>

                        </StackLayout>

                    </StackLayout>
                </Frame.Content>

        </helper:LayoutGradient>
    </StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>

Best Answer

  • LandLuLandLu Xamurai
    Accepted Answer

    When we want to set the text from code behind we need to use this format:

    Comments = "\uf139";
    

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai
    Accepted Answer

    When we want to set the text from code behind we need to use this format:

    Comments = "\uf139";
    
  • AaronBlaylockAaronBlaylock USMember ✭✭

    Hmm. How would I set the text from code behind on a data template? Forgot to also add the code from app class.

    Here is the static resource in app

    <ResourceDictionary>
    
        <OnPlatform x:Key="IconFonts" x:TypeArguments="x:String">
    
            <On Platform="iOS" Value="Material Design Icons"></On>
    
            <On Platform="Android" Value="IconFonts.ttf#Material Design Icons"></On>
    
            <On Platform="UWP" Value="/Assets/IconFonts.ttf#Material Design Icons"></On>
    
        </OnPlatform>
    
    </ResourceDictionary>
    
  • LandLuLandLu Member, Xamarin Team Xamurai

    I saw you have bound the items source to FoodCollection.
    And then you could change the text through

    <Label FontFamily="{DynamicResource IconFonts}" Text="{Binding Comments}"></Label>
    

    Set the Comments property in your code behind.

  • AaronBlaylockAaronBlaylock USMember ✭✭

    I'm gonna go back to the drawing board with the original source I used to see where I'm messing up at https://montemagno.com/using-font-icons-in-xamarin-forms-goodbye-images-hello-fonts/

Sign In or Register to comment.