NativeScript/apps/TelerikNEXT/main-page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd"
  loaded="pageLoaded" xmlns:tsb="app/TelerikUI/side-bar">
  <tsb:SideBar title="TelerikNEXT">
    <tsb:SideBar.slideContent>
      <StackLayout style="background-color: white">
        <Border style="background-color: gray">
          <Label>
            <Label.formattedText>
              <FormattedString fontSize="26" foregroundColor="#FFFFFF">
                <FormattedString.spans>
                  <Span text="TelerikNEXT" />
                </FormattedString.spans>
              </FormattedString>
            </Label.formattedText>
          </Label>
        </Border>

        <Button text="My agenda" horizontalAlignment="left" />
        <Button text="Explore all sessions" horizontalAlignment="left" />
        <Button text="About" horizontalAlignment="left"/>

      </StackLayout>
    </tsb:SideBar.slideContent>

    <tsb:SideBar.mainContent>
      <GridLayout rows="auto, auto, auto, *">

        <SegmentedBar selectedIndex="{{ selectedIndex }}"  style="background-color: transparent;color: white;" selectedBackgroundColor="#fac950">
          <SegmentedBar.items>
            <SegmentedBarItem title="MAY 3" />
            <SegmentedBarItem title="MAY 4" />
            <SegmentedBarItem title="MAY 5" />
          </SegmentedBar.items>
        </SegmentedBar>

        <Label row="1" style="horizontal-align: center;margin: 15;">
          <Label.formattedText>
            <FormattedString fontSize="18" foregroundColor="#fac950">
              <FormattedString.spans>
                <Span text="WORKSHOPS" fontAttributes="Bold" />
              </FormattedString.spans>
            </FormattedString>
          </Label.formattedText>
        </Label>

        <SearchBar text="{{ search }}" style="background-color: #fac950; color: #fac950;" textFieldBackgroundColor="white" row="2" />

        <ListView items="{{ sessions }}" row="3" separatorColor="#fac950">
          <ListView.itemTemplate>
            <GridLayout columns="auto, *">

              <Image src="{{ favorite ? '~/app/images/fav.png' : '~/app/images/addfav.png' }}" style.visibility="{{ canBeFavorited ? 'visible' : 'collapsed' }}"
           tap="toggleFavorite" width="32" height="32" vertical-align="center" margin="20" />

              <StackLayout col="1">

                <Label>
                  <Label.formattedText>
                    <FormattedString fontSize="18" foregroundColor="#a17201">
                      <FormattedString.spans>
                        <Span text="Time:" />
                        <Span text="{{ range }}" fontAttributes="Bold" />
                      </FormattedString.spans>
                    </FormattedString>
                  </Label.formattedText>
                </Label>

                <Label text="{{ title }}" textWrap="true" cssClass="title" />

                <Label style.visibility="{{ room ? 'visible' : 'collapsed' }}">
                  <Label.formattedText>
                    <FormattedString  fontSize="12" foregroundColor="#a17201">
                      <FormattedString.spans>
                        <Span text="Room: " />
                        <Span text="{{ room }}" fontAttributes="Bold" />
                      </FormattedString.spans>
                    </FormattedString>
                  </Label.formattedText>
                </Label>

              </StackLayout>

            </GridLayout>
          </ListView.itemTemplate>
        </ListView>

      </GridLayout>
    </tsb:SideBar.mainContent>
  </tsb:SideBar>



</Page>