मैं अपने Xamarin.Forms Shell App में अपने FlyoutItems और MenuItems में DataTemplate को सफलतापूर्वक संलग्न कर रहा हूं। हालांकि, मैं उसी टेम्पलेट को ShellContent में कैसे संलग्न करूं?

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:MyApp.Views"
       xmlns:volDash="clr-namespace:MyApp.Views.VolDash"
       xmlns:orgDash="clr-namespace:MyApp.Views.OrgDash"
       x:Class="EventingVolunteers.AppShell"
       FlyoutBackgroundColor="#337ab7">
    <Shell.Resources>
        <Style x:Key="FlyoutItemStyle" TargetType="Grid">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Red"/>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Green"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
        <DataTemplate x:Key="FlyoutTemplates">
            <Grid HeightRequest="{x:OnPlatform Android=50}" Style="{StaticResource FlyoutItemStyle}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="{x:OnPlatform Android=54, iOS=50}"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding FlyoutIcon}"
                    VerticalOptions="Center"
                    HorizontalOptions="Center"
                    HeightRequest="{x:OnPlatform Android=24, iOS=22}"
                    WidthRequest="{x:OnPlatform Android=24, iOS=22}">
                </Image>
                <Label VerticalOptions="Center"
                        Text="{Binding Title}"
                        FontSize="{x:OnPlatform Android=14, iOS=Small}"
                        FontAttributes="Bold" Grid.Column="1">
                    <Label.TextColor>
                        White
                    </Label.TextColor>
                    <Label.Margin>
                        <OnPlatform x:TypeArguments="Thickness">
                            <OnPlatform.Platforms>
                                <On Platform="Android" Value="20, 0, 0, 0" />
                            </OnPlatform.Platforms>
                        </OnPlatform>
                    </Label.Margin>
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String">
                            <OnPlatform.Platforms>
                                <On Platform="Android" Value="sans-serif-medium" />
                            </OnPlatform.Platforms>
                        </OnPlatform>
                    </Label.FontFamily>
                </Label>
            </Grid>
        </DataTemplate>
    </Shell.Resources>
    <FlyoutItem
        x:Name="volFlyoutItem"
        Title="Volunteer Dashboard"
        FlyoutDisplayOptions="AsSingleItem"
        FlyoutIcon="ic_dashboard_white.png"
        Shell.ItemTemplate="{StaticResource FlyoutTemplates}">
        <ShellContent Title="Signups" Icon="ic_assignment.png">
            <volDash:SignupsPage />
        </ShellContent>
        <ShellContent Title="Events" Icon="ic_event.png">
            <volDash:AreasPage />
        </ShellContent>
        <ShellContent Title="Mailbox" Icon="ic_mail_outline.png">
            <volDash:MailboxPage />
        </ShellContent>
        <ShellContent Title="Rankings" Icon="fa_trophy.png">
            <volDash:MyRankingsPage />
        </ShellContent>
        <ShellContent Title="Videos" Icon="ic_ondemand_video.png">
            <volDash:TrainingVideoCategoriesPage />
        </ShellContent>
    </FlyoutItem>
    <FlyoutItem
        x:Name="orgFlyoutItem"
        Title="Organizer Dashboard"
        FlyoutDisplayOptions="AsSingleItem"
        FlyoutIcon="ic_dashboard_white.png"
        IsEnabled="False"
        Shell.ItemTemplate="{StaticResource FlyoutTemplates}">
        <ShellContent Title="Events" Icon="ic_event.png">
            <orgDash:EventsPage />
        </ShellContent>
    </FlyoutItem>
    <ShellContent
        Title="Account"
        Icon="ic_account_box_white.png"
        Shell.ItemTemplate="{StaticResource FlyoutTemplates}"
        Shell.MenuItemTemplate="{StaticResource FlyoutTemplates}">
        <views:AccountPage />
    </ShellContent>
    <MenuItem
        Shell.MenuItemTemplate="{StaticResource FlyoutTemplates}"
        Text="Logout"
        Icon="ic_dashboard_white.png"
        Command="{Binding LogOutCommand}" />
</Shell>

enter image description here

1
user2666194 9 अप्रैल 2020, 17:02

1 उत्तर

सबसे बढ़िया उत्तर

शेल में अंतर्निहित रूपांतरण ऑपरेटर हैं जो दृश्य ट्री में अतिरिक्त दृश्य पेश किए बिना, शेल दृश्य पदानुक्रम को सरल बनाने में सक्षम बनाते हैं। यह संभव है क्योंकि एक उपवर्गित Shell वस्तु में केवल FlyoutItem वस्तुएं या एक TabBar वस्तु हो सकती है, जिसमें केवल कभी भी Tab वस्तुएं हो सकती हैं, जिसमें केवल कभी भी ShellContent ऑब्जेक्ट्स। इन निहित रूपांतरण ऑपरेटरों का उपयोग FlyoutItem, Tab, और ShellContent ऑब्जेक्ट को हटाने के लिए किया जा सकता है।

आपके xaml में, ShellContent, <FlayoutItme> <ShellContent/></FlayoutItme> का सरलीकरण है, इसलिए आपको बस इसके बाहर <FlayoutItme> जोड़ने और Shell.ItemTemplate जोड़ने की जरूरत है।

<FlyoutItem
    x:Name="account"
    Title="Account"
    FlyoutDisplayOptions="AsSingleItem"
    FlyoutIcon="ic_account_box_white.png"
    Shell.ItemTemplate="{StaticResource FlyoutTemplates}">
    <ShellContent>
        <views:AccountPage />
    </ShellContent>
</FlyoutItem>
0
Leo Zhu - MSFT 10 अप्रैल 2020, 06:47