Shell MenuItem binding problem

igorkr_10igorkr_10 Member ✭✭✭
edited September 25 in Xamarin.Forms

Hi all.
My Label in Shell MenuItemTemplate can't see property from ViewModel (last item in XAML)

<?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:d="http://xamarin.com/schemas/2014/forms/design"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       xmlns:views="clr-namespace:BillingMobile.Views"
       xmlns:markupextensions="clr-namespace:BillingMobile.Xaml.MarkupExtensions"
       xmlns:materialIcons="clr-namespace:BillingMobile.Icons"
       xmlns:rounded="clr-namespace:BillingMobile.Controls.Rounded"
       Title="BillingMobile"
       x:Class="BillingMobile.AppShell"
       Style="{DynamicResource BaseStyle}">

    <FlyoutItem Title="Меню" FlyoutDisplayOptions="AsSingleItem" FlyoutIcon="wallet.png">
        <Tab Title="{markupextensions:TranslateExtension Wallet}" Icon="wallet.png">
            <ShellContent ContentTemplate="{DataTemplate views:AccountPage}" />
        </Tab>
        <Tab Title="{markupextensions:TranslateExtension MyCompany}" Icon="account_group.png">
            <ShellContent Title="{markupextensions:Translate Services}" ContentTemplate="{DataTemplate views:AccountPage}" />
            <ShellContent Title="{markupextensions:Translate Users}" ContentTemplate="{DataTemplate views:AccountPage}" />
            <ShellContent Title="{markupextensions:Translate Departments}" ContentTemplate="{DataTemplate views:AccountPage}" />
        </Tab>
        <Tab Title="{markupextensions:TranslateExtension Notifications}" Icon="bell_ring.png">
            <ShellContent ContentTemplate="{DataTemplate views:AccountPage}" />
        </Tab>
    </FlyoutItem>

    <Shell.FlyoutHeader>
        <Grid Padding="15">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Image Grid.Row="0" HeightRequest="70" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="70" x:Name="image">
                <Image.Source>
                    <FontImageSource FontFamily="{DynamicResource MaterialFontFamily}" Glyph="{x:Static materialIcons:MaterialDesignIcons.AccountCircle}" Size="70" Color="{StaticResource PrimaryColor}"/>
                </Image.Source>
            </Image>
            <Label Grid.Row="1" Text="Кравченко Ігор Андрійович" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}"/>
            <Label Grid.Row="2" Text="{Binding SelectedTheme}" TextColor="{StaticResource PrimaryColor}"/>
        </Grid>
    </Shell.FlyoutHeader>

    <MenuItem>
        <Shell.MenuItemTemplate>
            <DataTemplate>
                <StackLayout Orientation="Horizontal" Padding="15">
                    <Image Grid.Row="0" HeightRequest="24" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="24">
                        <Image.Source>
                            <FontImageSource FontFamily="{DynamicResource MaterialFontFamily}" Glyph="{x:Static materialIcons:MaterialDesignIcons.Brush}" Size="24" Color="{StaticResource PrimaryColor}"/>
                        </Image.Source>
                    </Image>
                    <Label PropertyChanged="OnLabelPropertyChanged" Text="{Binding ThemeTitle}" VerticalOptions="Center" VerticalTextAlignment="Center" TextColor="Black"/>                       
                </StackLayout>
            </DataTemplate>
        </Shell.MenuItemTemplate>
    </MenuItem>
</Shell>

ViewModel:

public class ShellViewModel : BaseViewModel
    {
        public string ThemeTitle
        {
            get { return "Light"; }
        }

        public ShellViewModel()
        {

        }        
    }

The text in Label is always empty.
BUT!
In method OnLabelPropertyChanged I see how the text is binded to label.

Another BUT
When I set Text without binding all works:

<Label PropertyChanged="OnLabelPropertyChanged" Text="Light" VerticalOptions="Center" VerticalTextAlignment="Center" TextColor="Black"/>

I am using Xamarin 4.3.0.819712-pre2

Tagged:

Best Answer

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    Refer to this doc: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-menuitem-appearance
    we know:

    Shell provides the Text and IconImageSource properties to the BindingContext of the MenuItemTemplate

    We can only use Text in the template for binding and bind the value with the Text property:

    <MenuItem Text="{Binding ThemeTitle}">
        <Shell.MenuItemTemplate>
            <DataTemplate>
                <StackLayout Orientation="Horizontal" Padding="15">
                    <!--<Image Grid.Row="0" HeightRequest="24" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="24">
                        <Image.Source>
                            <FontImageSource FontFamily="{DynamicResource MaterialFontFamily}" Glyph="{x:Static materialIcons:MaterialDesignIcons.Brush}" Size="24" Color="{StaticResource PrimaryColor}"/>
                        </Image.Source>
                    </Image>-->
                    <Label PropertyChanged="OnLabelPropertyChanged" Text="{Binding Text}" VerticalOptions="Center" VerticalTextAlignment="Center" TextColor="Black"/>
                </StackLayout>
            </DataTemplate>
        </Shell.MenuItemTemplate>
    </MenuItem>
    
  • igorkr_10igorkr_10 Member ✭✭✭

    @LandLu said:
    Refer to this doc: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-menuitem-appearance
    we know:

    Shell provides the Text and IconImageSource properties to the BindingContext of the MenuItemTemplate

    We can only use Text in the template for binding and bind the value with the Text property:

    <MenuItem Text="{Binding ThemeTitle}">
        <Shell.MenuItemTemplate>
            <DataTemplate>
                <StackLayout Orientation="Horizontal" Padding="15">
                    
                    <Label PropertyChanged="OnLabelPropertyChanged" Text="{Binding Text}" VerticalOptions="Center" VerticalTextAlignment="Center" TextColor="Black"/>
                </StackLayout>
            </DataTemplate>
        </Shell.MenuItemTemplate>
    </MenuItem>
    

    You mean its impossible to use binding in MenuItem template right now?

  • igorkr_10igorkr_10 Member ✭✭✭

    @LandLu said:
    @igorkr_10 No. I mean in the template you can only consume the Text and Icon binding for label and image.
    The real place to link the binding with your view model is the text property of MenuItem:

    <MenuItem Text="{Binding ThemeTitle}">
    

    OK. Will we have this opportunity (binding from template) in the future?

  • LandLuLandLu Member, Xamarin Team Xamurai

    @igorkr_10 You can raise an issue here: https://github.com/xamarin/Xamarin.Forms/issues to request a new feature.

  • CarlosBuscaCarlosBusca USMember

    Hi @igorkr_10 I'm trying to bind the text parameter as you made in your flyoutHeader:
    <Label Grid.Row="2" Text="{Binding SelectedTheme}" TextColor="{StaticResource PrimaryColor}"/>
    But till now I didn't get how to do it. Could you give me a clue? Thanks,

Sign In or Register to comment.