In the previous article we have learnt how to create the WebAtoms XFToggleButtonBar user interface control.

But what if you want to customize it? In continuation to previous article, let's try to adapt the previous example for customizations.

In this post we will learn how we can create the DataTemplate for XFToggleButtonBar and integrate the Font Awesome icons in it. In the previous article we just shown the value in the control, now we will add some images in XFToggleButtonBar Data Template.

One of the best thing about WebAtoms Xamarin.Forms is that, we have integrated the Font Awesome inside our framework, that means you can use any Font Awesome icons in any of the user interface control that WebAtoms provide. It is easy to integrate the Font Awesome icons.
Let's check in the below code snippet, We have added the FontAwesomeSolid.female and FontAwesomeSolid.male with XF.Label.

 this.render(<XF.ContentPage title="Custom Toggle Button Bar" backgroundColor="#FAFAFA">
                 <XF.StackLayout padding="20" 
                    verticalOptions = "Center"
                    horizontalOptions = "Center"
                    HeightRequest = "200"
                    WidthRequest = "300" >

                    <XF.Label
                        fontAttributes="Bold"
                        textColor="black"
                        padding="0,15,0,5"
                        fontSize="25"
                        text="SELECT GENDER"/>

                    <AtomXFToggleButtonBar 
                        items={this.viewModel.genderList}
                        value={Bind.twoWays(() => this.viewModel.gender)}>
                        <AtomXFToggleButtonBar.itemTemplate>
                            <XF.DataTemplate>
                            <XF.Frame 
                                cornerRadius={5} 
                                padding={0} 
                                backgroundColor="transparent" 
                                borderColor={Colors.lightGray} >
                                <XF.StackLayout 
                                    orientation="Horizontal" 
                                    backgroundColor={Bind.oneWay((x) => x.data !== x.localViewModel.owner.selectedItem
                                            ? "#E0e0e0"
                                            : "#OC5FA3" )}>
                                    <XF.Label
                                        padding="5"
                                        fontSize={30}
                                        fontFamily={FontAwesomeSolid.toString()}
                                        text={Bind.oneTime((x) => /female/i.test(x.data.value)
                                            ? FontAwesomeSolid.female 
                                            : FontAwesomeSolid.male )}
                                        textColor={Bind.oneWay((x) => x.data === x.localViewModel.owner.selectedItem
                                        ? Colors.white
                                        : Colors.black )} />
                                    <XF.Label 
                                        padding={10} 
                                        fontAttributes="Bold"
                                        text={Bind.oneTime((x)=>x.data.label)}
                                        textColor={Bind.oneWay((x) => x.data === x.localViewModel.owner.selectedItem
                                            ? Colors.white
                                            : Colors.black )} 
                                         />                   
                                </XF.StackLayout>
                                </XF.Frame>
                            </XF.DataTemplate>
                        </AtomXFToggleButtonBar.itemTemplate>
                    </AtomXFToggleButtonBar>
                    <XF.Label
                        padding="0,15,0,5"
                        fontSize={20}
                        textColor="black"
                        fontAttributes="Bold"
                        text={Bind.oneWay(() => `You are ${this.viewModel.gender.toUpperCase()}`)}
                        />
                </XF.StackLayout>
            </XF.ContentPage>);

Our ViewModel part will remain same as we have shown in the previous article. How do I download the App?
Introducing Xamarin.Forms Fiddle

How do I run the App? Open Demo