Button in Shell.TitleView is not clickable

Question

Button in Shell.TitleView is not clickable

Daniel Donnelly, Jr 86

<Shell.TitleView>  
    <StackLayout Orientation="Horizontal" Padding="0" Margin="0">  
        <Image HorizontalOptions="Start" Source="app_logo.png" WidthRequest="200"/>  
        <Label HorizontalOptions="Center" HorizontalTextAlignment="Center"  
               VerticalTextAlignment="Center" Text="Company Name" Style="{StaticResource LargeLabel}"/>  
        <Button HorizontalOptions="End" VerticalOptions="Center" Text="Sign Out" Style="{StaticResource ButtonOutline}"  
                Command="{Binding SignOutCommand}" Margin="100,0,0,0"/>  
    </StackLayout>  
</Shell.TitleView>

There is my relevant code. The command exists and I'm importing / calling it just like any other of my buttons. Clicking does nothing. I've set a breakpoint in the SignOut command. Nothing at all. Perhaps putting everything on the actual title bar and doing the title bar properly (not some gray box - the default) would also fix this. So please help me fix either one of these issues.

Daniel Donnelly, Jr 86 Reputation points

2023-01-09T04:53:50.757+00:00

That code is in AppShell.xaml
Anonymous

2023-01-10T07:08:42.257+00:00

Do you bind the viewModel in the AppShell.xaml.cs?

Could you share SignOutCommand code in viewmodel?

If you bind the viewmodel(contain SignOutCommand) in the Contentpage, SignOutCommand cannot be executed.

Daniel Donnelly, Jr 86

public partial class AppShellViewModel : BaseViewModel
{
    [RelayCommand]
    async void SignOut()
    {
        await Shell.Current.GoToAsync(nameof(LoginPage));
    }    
}

Daniel Donnelly, Jr 86

public partial class AppShellViewModel : BaseViewModel
{
    [RelayCommand]
    async void SignOut()
    {
        await Shell.Current.GoToAsync(nameof(LoginPage));
    }    
}

Here is the action code.

Answer accepted by question author

0 additional answers

Your answer

Daniel Donnelly, Jr 86 Reputation points

2023-01-09T04:53:50.757+00:00

That code is in AppShell.xaml
Anonymous

2023-01-10T07:08:42.257+00:00

Do you bind the viewModel in the AppShell.xaml.cs?

Could you share SignOutCommand code in viewmodel?

If you bind the viewmodel(contain SignOutCommand) in the Contentpage, SignOutCommand cannot be executed.
Daniel Donnelly, Jr 86 Reputation points

2023-01-10T18:37:38.787+00:00

public partial class AppShellViewModel : BaseViewModel { [RelayCommand] async void SignOut() { await Shell.Current.GoToAsync(nameof(LoginPage)); } }
Daniel Donnelly, Jr 86 Reputation points

2023-01-10T20:58:02.537+00:00

public partial class AppShellViewModel : BaseViewModel { [RelayCommand] async void SignOut() { await Shell.Current.GoToAsync(nameof(LoginPage)); } }

Here is the action code.

Answer 1

Anonymous

Hello,

You can add BindingContext = new AppShellViewModel(); in your AppShell.xaml.cs , then when you click Sign Out button, SignOut method will be executed.

public partial class AppShell : Shell{
 public AppShell()    {   
     
    InitializeComponent();        
    Routing.RegisterRoute("LoginPage", typeof(LoginPage));        
    BindingContext = new AppShellViewModel();        

}

}

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Ramaraj Thanga Pandi 0 Reputation points

2023-06-14T07:20:39.29+00:00

Did this work? I tried the exact same thing. The button is not even tappable. Many people are facing the same issue https://github.com/dotnet/maui/issues/11168

Share via

Button in Shell.TitleView is not clickable

0 additional answers

Your answer