
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
![]() | ![]() | ![]() | ![]() |
Like | Comment | Save | Share |