microsoft / xaml-standard

XAML Standard : a set of principles that drive XAML dialect alignment
Other
805 stars 50 forks source link

Proposal Add TabBar control #128

Open insinfo opened 7 years ago

insinfo commented 7 years ago

A tab bar provides easy access to different views in an app. Use a tab bar to organize information in your app by subtask. The most common way to use a tab bar is with a tab bar controller. You can also use a tab bar as a standalone object in your app.

        <TabBar>
            <TabItem Header="Featured" Icon="uri...">
                <Grid>
                       <Label Content="Content goes here..." />
                   </Grid>
            </TabItem>
            <TabItem >
              <Header>
                <SVG>
                   <rect id="my-rect" r="30" cx="50" cy="50" fill="orange" />
                       <animate 
                         xlink:href="#my-rect"
                         attributeName="cx"
                         from="50"
                         to="450" 
                         dur="1s"
                         begin="click"
                         fill="freeze" />
                    </rect>
                  </SVG>
                </Header>
               <Grid>
                  <Label Content="Content goes here..." />
                </Grid>
            </TabItem>
            <TabItem Header=" Near Me" />
                    <Grid>
                       <Label Content="Content goes here..." />
                   </Grid>
        </TabBar>

tab bars

windows tabcontrol flat design

1435541252ios_vs_android_tabs

android-scrollable-tab-layout tab-bar-icons-iphone-ramotion-animation-interface-design

mdtauk commented 7 years ago

Don't forget the Windows 10 Tab examples. uwp-tab-1 uwp-tab-2

insinfo commented 7 years ago

@mdtauk Yes very well remembered, I updated with an idea of the syntax including support for the SVG animated icon with SMIL, if you want to contribute syntax as well. And vote for this idea so that it is part of the XAML standard, +1 Native support of SVG animation with SMIL inside XAML

birbilis commented 7 years ago

Pivot in WP7/8 was much better than WP10 tabs btw.

Apart from that in the above design of the phone app, MS forgot a People (Contacts) tab. Glaring omission in practice