Today we are going to have a look on
the WebAtoms
Xamarin.Forms AtomXFToggleButtonBar user interface control.
Let's first briefly check what is WebAtoms
?
WebAtoms is an advanced MVVM framework to write cross platform applications in Xamarin.Forms
. Unlike other frameworks, WebAtoms
lets you divide User Interface logic in strict MVVM fashion and separates View in XAML
. Benefit of separating User interface logic in ViewModel
is you can individually unit test view model to make sure your logic is consistent across platforms.
Xamarin Fiddle
Now we will see the actual implementation of WebAtoms
Xamarin.Forms user interface control AtomXFToggleButtonBar.
This control allow users to take actions, and make choices, with a single tap.
View
export default class MainPage extends AtomXFContentPage {
public viewModel: MainPageViewModel;
public create() {
this.viewModel = this.resolve(MainPageViewModel);
this.render( <XF.ContentPage title="Toggle Button Bar" backgroundColor="white">
<XF.StackLayout padding="20">
<XF.Label horizontalTextAlignment="center"
fontSize="40"
text="GENDER"
/>
<AtomXFToggleButtonBar
items={this.viewModel.genderList}
value={Bind.twoWays(() => this.viewModel.gender)}
/>
<XF.Label padding="10"
fontSize="25"
text={Bind.oneWay(() => `Selected gender is ${this.viewModel.gender.toUpperCase()}`)}
/>
</XF.StackLayout>
</XF.ContentPage>
);
}
}
This above code snippet is easy to understand, items
property of control bind the items which will come from ViewModel
and the value
property will tell us the toggle button selected by the user. There are different ways of bindings available in WebAtoms
Xamarin forms.
ViewModel
import { AtomViewModel } from "@web-atoms/core/dist/view-model/AtomViewModel";
export default class MainPageViewModel extends AtomViewModel {
public genderList = [
{ label: "Male", value: "male" },
{ label: "Female", value: "female" }
];
public gender = "female";}
The public property gender
and the genderlist
will be bound to the AtomXFToggleButtonBar control in above view.
So now you know how to create a AtomXFToggleButtonBar in WebAtoms
.
Like | Comment | Save | Share |