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>

        <Image src="~/app/images/logo.png" margin="20" />

        <Button tap="{{ selectView }}" text="My agenda" horizontalAlignment="left" color="{{ selectedViewIndex === 0 ? '#e4ba4e' : 'white' }}"/>
        <Button tap="{{ selectView }}" text="All sessions" horizontalAlignment="left" color="{{ selectedViewIndex === 1 ? '#e4ba4e' : 'white' }}" />
        <Button tap="{{ selectView }}" text="About" horizontalAlignment="left" color="{{ selectedViewIndex === 2 ? '#e4ba4e' : 'white' }}"/>

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

    <tsb:SideBar.mainContent>
      <GridLayout>

        <GridLayout rows="auto, auto, *" visibility="{{ selectedViewIndex !== 2 ? 'visible' : 'collapsed' }}">

          <StackLayout style="background-image: url('~/app/images/background.jpg')">
            <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 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>
          </StackLayout>

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

          <ListView items="{{ sessions }}" row="2" separatorColor="#fac950">
            <ListView.itemTemplate>
              <GridLayout columns="auto, *" backgroundColor="{{ canBeFavorited ? 'white' : '#fffbf0' }}">

                <Image src="{{ favorite ? '~/app/images/fav.png' : '~/app/images/addfav.png' }}" 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 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>

        <Border style="background-color: #053140;" visibility="{{ selectedViewIndex === 2 ? 'visible' : 'collapsed' }}">
          <Image src="~/app/images/logo.png" margin="20" />
        </Border>

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



</Page>