NavigationView example about react-native-xaml

[asklar]

Good request! Definitely would love to have specific jsx examples.

Right now codegen looks at the type of properties as well as whether the property is backed by a DependencyProperty in order to decide what to project; moreover sub-items need custom logic to map children to the right collection property.

(FYI you would not use the NavigationView.MenuItems property, you'd just create the NavigationViewItem/Header/Separator directly inside of the NavigationView tag)

This is all possible for NavigationView, I'll get back in a couple of days :) Keep the feedback coming!

[achipa]

Same here. As react-native-xaml is a codegen-based thin wrapper, I'd expect to have a very close to 1:1 mapping with existing xaml structures/code. For example if I had:

<Grid>
    <NavigationView>
        <NavigationView.MenuItems>
            <NavigationViewItemHeader Content="Main"/>
            <NavigationViewItem Content="Customers"/>
            <NavigationViewItem Content="Orders"/>
            <NavigationViewItemSeparator/>
            <NavigationViewItemHeader Content="Reports"/>
            <NavigationViewItem Content="Customers"/>
            <NavigationViewItem Content="Orders"/>
            <NavigationViewItem Content="Sales"/>
            <NavigationViewItemSeparator/>
            <NavigationViewItemHeader Content="Charts"/>
            <NavigationViewItem Content="Sales by Customer"/>
            <NavigationViewItem Content="Sales by Product"/>
            <NavigationViewItem Content="Sales by Date"/>
        </NavigationView.MenuItems>
    </NavigationView>
</Grid>

I would expect to end up with something like

<Grid>
    <NavigationView>
        <NavigationView.MenuItems>
            <NavigationViewItemHeader content={{string: "Main"}}/>
            <NavigationViewItem content={{string: "Customers"}}/>
            <NavigationViewItem content={{string: "Orders"}}/>
            <NavigationViewItemSeparator/>
            <NavigationViewItemHeader content={{string: "Reports"}}/>
            <NavigationViewItem content={{string: "Customers"}}/>
            <NavigationViewItem content={{string: "Orders"}}/>
            <NavigationViewItem content={{string: "Sales"}}/>
            <NavigationViewItemSeparator/>
            <NavigationViewItemHeader content={{string: "Charts"}}/>
            <NavigationViewItem content={{string: "Sales by Customer"}}/>
            <NavigationViewItem content={{string: "Sales by Product"}}/>
            <NavigationViewItem content={{string: "Sales by Date"}}/>
        </NavigationView.MenuItems>
    </NavigationView>

...which is not really doable right now (no apparent way of defining/adding NavigationView.MenuItems, for starters)

[asklar]

Good bug, thanks again for filing. I just got it to work!

[asklar]

@achipa @jeanmaried See USAGE.md

[jeanmaried]

@asklar awesome! Thank you.