How do I put the flyout item(Exit) at the bottom of the menu?

HamittirpanHamittirpan Member ✭✭✭

Hi everyone !

I want to put shell content at the bottom of my shell menu. How do I do this? I would also like to show popup when the user clicks on logout. But the application fails. Note : local: AcoountExit ==> PopupPage

    <FlyoutItem Title="Anasayfa" FlyoutDisplayOptions="AsMultipleItems" Style="{StaticResource BaseStyle}" Icon="ic_action_home.png">
        <ShellContent Title="Kampanyalar" Icon="ic_action_home.png" ContentTemplate="{DataTemplate local:MainCampaing}" />
        <Tab Title="Harita" Route="Harita" Icon="ic_action_location_on.png">
            <ShellContent Route="Harita" Style="{StaticResource BaseStyle}" Title="Harita" Icon="ic_action_location_on.png" ContentTemplate="{DataTemplate local:MapPage}" />
            <ShellContent Route="Liste" Style="{StaticResource BaseStyle}" Title="Liste" Icon="ic_launcher.png" ContentTemplate="{DataTemplate local:MapListPage}" />
        </Tab>
        <ShellContent Title="Barkod" Icon="ic_action_center_focus_weak.png" ContentTemplate="{DataTemplate local:BarcodePage}" />
        <ShellContent Title="Alışveriş" Icon="ic_action_shopping_cart.png" ContentTemplate="{DataTemplate local:WebSite}" />
        <ShellContent Title="Profil" Icon="ic_action_account_circle.png" ContentTemplate="{DataTemplate local:ProfilePage}" />
    </FlyoutItem>
    <FlyoutItem Title="Hizmetler" Icon="ic_action_center_focus_weak.png" Style="{StaticResource BaseStyle}" FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="Markalarımız" Icon="ic_action_style.png" ContentTemplate="{DataTemplate local:BrandsPage}" />
        <ShellContent Title="Alışveriş" Icon="ic_action_shopping_cart.png" ContentTemplate="{DataTemplate local:WebSite}" />
        <ShellContent Title="Hakkımızda" Icon="ic_action_center_focus_weak.png" ContentTemplate="{DataTemplate local:AboutUs}" />
    </FlyoutItem>
        <ShellContent Title="Çıkış Yap" Icon="ic_action_style.png" ContentTemplate="{DataTemplate local:AccountExit}" />
Tagged:

Best Answer

  • ColeXColeX Xamurai
    edited September 13 Accepted Answer

    MenuItem can help you .

    Define MenuItem and MenuItemTemplate in xaml like below

     <Shell.MenuItemTemplate>
            <DataTemplate>
                <Grid >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.2*" />
                        <ColumnDefinition Width="0.8*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding Icon}"
                           Margin="0,200,0,0"             //move the item down
                           HeightRequest="20" />
                    <Label Grid.Column="1"
                           Margin="0,200,0,0"            //move the item down
                           Text="{Binding Text}"
                           FontAttributes="Italic"
                           VerticalTextAlignment="Center" /> 
                </Grid>
            </DataTemplate>
        </Shell.MenuItemTemplate>
    
     <MenuItem Text="Help"
              Icon="help.png"
              Command="{Binding HelpCommand}"
              />
    

    Show popup code behind with Command

    public ICommand HelpCommand => new Command(() => this.DisplayAlert("Logout",null,"ok"));
    

Answers

  • HamittirpanHamittirpan Member ✭✭✭

  • ColeXColeX Member, Xamarin Team Xamurai
    edited September 13 Accepted Answer

    MenuItem can help you .

    Define MenuItem and MenuItemTemplate in xaml like below

     <Shell.MenuItemTemplate>
            <DataTemplate>
                <Grid >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.2*" />
                        <ColumnDefinition Width="0.8*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding Icon}"
                           Margin="0,200,0,0"             //move the item down
                           HeightRequest="20" />
                    <Label Grid.Column="1"
                           Margin="0,200,0,0"            //move the item down
                           Text="{Binding Text}"
                           FontAttributes="Italic"
                           VerticalTextAlignment="Center" /> 
                </Grid>
            </DataTemplate>
        </Shell.MenuItemTemplate>
    
     <MenuItem Text="Help"
              Icon="help.png"
              Command="{Binding HelpCommand}"
              />
    

    Show popup code behind with Command

    public ICommand HelpCommand => new Command(() => this.DisplayAlert("Logout",null,"ok"));
    

  • HamittirpanHamittirpan Member ✭✭✭
    edited September 13

    @ColeX Hi Cole. I tried your code on my own project. my screen like this;

    I don't know why my code doesn't work.

  • HamittirpanHamittirpan Member ✭✭✭

    @ColeX MainPage.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"
           xmlns:controls="clr-namespace:GulaylarMenuDesign.Views.Control"
           xmlns:local="clr-namespace:GulaylarMenuDesign.Views" mc:Ignorable="d" 
           x:Class="GulaylarMenuDesign.MainPage"
           FlyoutBackgroundColor="White" ForegroundColor="#050063" TitleColor="#050063"
           DisabledColor="#ED6933" UnselectedColor="White"
           Shell.NavBarIsVisible="True"
           NavigationPage.HasBackButton="False"
           Visual="Material">
    
        <Shell.TitleView>
                <Image Source="DL.png"
                       VerticalOptions="CenterAndExpand"
                       HorizontalOptions="EndAndExpand">
                    <Image.WidthRequest>
                        <OnPlatform x:TypeArguments="x:Double">
                            <On Platform="iOS">80</On>
                            <On Platform="Android">70</On>
                         </OnPlatform>
                    </Image.WidthRequest>
    
                    <Image.HeightRequest>
                        <OnPlatform x:TypeArguments="x:Double">
                            <On Platform="iOS">80</On>
                            <On Platform="Android">70</On>
                         </OnPlatform>
                    </Image.HeightRequest>
                </Image>
        </Shell.TitleView>
    
         <!--<controls:GradientView StartColor="#ED6933" EndColor="White"/>-->
    
        <Shell.Resources>
            <ResourceDictionary>
                <Style x:Key="BaseStyle" TargetType="Element">
                    <!--For the bottom tab-->
                    <Setter Property="Shell.TabBarBackgroundColor" Value="#ED6933" />
                    <Setter Property="Shell.BackgroundColor" Value="#ED6933" />
                </Style>
            </ResourceDictionary>
        </Shell.Resources>
    
        <Shell.FlyoutHeader>
            <ContentView HeightRequest="200">
                <Image Source="Fly1.jpg"
                       Aspect="AspectFill" />
            </ContentView>
        </Shell.FlyoutHeader>
    
        <FlyoutItem Title="Anasayfa" FlyoutDisplayOptions="AsMultipleItems" Style="{StaticResource BaseStyle}" Icon="ic_action_home.png">
            <ShellContent Title="Kampanyalar" Icon="ic_action_home.png" ContentTemplate="{DataTemplate local:MainCampaing}" />
            <Tab Title="Harita" Route="Harita" Icon="ic_action_location_on.png">
                <ShellContent Route="Harita" Style="{StaticResource BaseStyle}" Title="Harita" Icon="ic_action_location_on.png" ContentTemplate="{DataTemplate local:MapPage}" />
                <ShellContent Route="Liste" Style="{StaticResource BaseStyle}" Title="Liste" Icon="ic_launcher.png" ContentTemplate="{DataTemplate local:MapListPage}" />
            </Tab>
            <ShellContent Title="Barkod" Icon="ic_action_center_focus_weak.png" ContentTemplate="{DataTemplate local:BarcodePage}" />
            <ShellContent Title="Alışveriş" Icon="ic_action_shopping_cart.png" ContentTemplate="{DataTemplate local:WebSite}" />
            <ShellContent Title="Profil" Icon="ic_action_account_circle.png" ContentTemplate="{DataTemplate local:ProfilePage}" />
        </FlyoutItem>
        <FlyoutItem Title="Hizmetler" Icon="ic_action_center_focus_weak.png" Style="{StaticResource BaseStyle}" FlyoutDisplayOptions="AsMultipleItems">
            <ShellContent Title="Markalarımız" Icon="ic_action_style.png" ContentTemplate="{DataTemplate local:BrandsPage}" />
            <ShellContent Title="Alışveriş" Icon="ic_action_shopping_cart.png" ContentTemplate="{DataTemplate local:WebSite}" />
            <ShellContent Title="Hakkımızda" Icon="ic_action_center_focus_weak.png" ContentTemplate="{DataTemplate local:AboutUs}" />
        </FlyoutItem>
    
        <Shell.MenuItemTemplate>
            <DataTemplate>
                <Grid >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.2*" />
                        <ColumnDefinition Width="0.8*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding Icon}"
                           Margin="0,100,0,0"             
                           HeightRequest="20" />
                    <Label Grid.Column="1"
                           Margin="0,100,0,0"           
                           Text="{Binding Text}"
                           FontAttributes="Italic"
                           VerticalTextAlignment="Center" /> 
                </Grid>
            </DataTemplate>
        </Shell.MenuItemTemplate>
    
     <MenuItem Text="Çıkış Yap"
              Icon="ic_action_style.png"
              Command="{Binding HelpCommand}"/>
    
    </Shell>
    
  • ColeXColeX Member, Xamarin Team Xamurai

    Try my project .

  • HamittirpanHamittirpan Member ✭✭✭

    @ColeX Thanks to you, my code now works the way I want. I'm just asking you to give me an idea. I've designed cancel and sign out for the warning message.Where and how should I write the actions that will take place if the user clicks the logout button?

  • ColeXColeX Member, Xamarin Team Xamurai

    Where and how should I write the actions that will take place if the user clicks the logout button?

    Inside the command where you defined .. What do you mean by How ? Use DisplayAlert ?

  • HamittirpanHamittirpan Member ✭✭✭

    @ColeX So how do I detect if the user has pressed cancel or sign out? I would normally design xaml with RgpopUp and control it with buttons. But I don't know how to do it here.Because using Command Parameters.

Sign In or Register to comment.