Forum Xamarin Xamarin.Forms

background image for the full page when using Shell

RainerMagerRainerMager JPMember ✭✭✭

Is it possible to have a background image that covers the full page when using Xamarin Forms Shell? I would then want to make the top toolbar and bottom tabbar transparent. Does anyone know how to do this?

Thanks.

Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    edited September 14

    Is it possible to have a background image that covers the full page when using Xamarin Forms Shell?

    Simply add an image with Aspect AspectFill into a grid .

    For example

        <Grid>
            <Image Source="xamarinstore.jpg" Aspect="AspectFill" />
    
            <StackLayout>
                <Label Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand"
                       FontSize="50"/>
            </StackLayout>
    
        </Grid>
    

    I would then want to make the top toolbar and bottom tabbar transparent.

    Do you want to remove toolbar and tabbar? But how do you navigate to other page without them?

  • RainerMagerRainerMager JPMember ✭✭✭

    Thanks for the suggestion, but I meant cover the entire screen, including where the toolbar and tabbar are. I would then make them semi-transparent so you can still see them and their icons, but you would also be able to see the background image behind them.

  • ColeXColeX Member, Xamarin Team Xamurai
    edited September 15

    Shell does not support semi-transparent or transparent color , i try to set transparent background color or transparent
    background image on tabbar(toolbar) , but it always shows black color .

    [assembly: ExportRenderer(typeof(AppShell), typeof(ShellCustomRenderer))]
    namespace Xaminals.Droid
    {
        public class ShellCustomRenderer : ShellRenderer
        {
            public ShellCustomRenderer(Context context) : base(context)
            {
    
            }
    
            protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
            {
                return new ToolbarAppearance();
            }
    
            protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
            {
                return new TabbarAppearance();
            }
    
        }
    
        public class TabbarAppearance : IShellBottomNavViewAppearanceTracker
        {
            public void Dispose()
            {
    
            }
    
    
            public void ResetAppearance(BottomNavigationView bottomView)
            {
                changeColor(bottomView);
            }
            public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
            {
                changeColor(bottomView);
            }
    
            void changeColor(BottomNavigationView view)
            {
    
                //method 1
                view.SetBackgroundColor(Color.FromHex("#00000000").ToAndroid());
    
    
                //method 2
                view.SetBackgroundResource(Resource.Drawable.photo);
            }
        }
    
        public class ToolbarAppearance : IShellToolbarAppearanceTracker
        {
            public void Dispose()
            {
    
            }
    
            public void ResetAppearance(Android.Support.V7.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker)
            {
                //toolbar.SetBackgroundColor(Android.Graphics.Color.Red);
                //toolbar.SetNavigationIcon(Resource.Drawable.star_small);// Resource.Drawable.star_small;
    
                Color color = Color.FromHex("#80ff0000");
                toolbar.SetBackgroundColor(color.ToAndroid());
            }
    
            public void SetAppearance(Android.Support.V7.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
            {
                //toolbar.SetBackgroundColor(Android.Graphics.Color.Red);
                // toolbar.SetNavigationIcon(Resource.Drawable.star_small);
    
                Color color = Color.FromHex("#80ff0000");
                toolbar.SetBackgroundColor(color.ToAndroid());
            }
        }
    }
    

    BTW , you could simply hide the toolbar and tabbar using Shell.TabBarIsVisible and Shell.TabBarIsVisible in single page , but it is meaningless (you can't navigate to other page)

  • RainerMagerRainerMager JPMember ✭✭✭

    I'm using Xamarin Forms Shell, which has its own toolbar and tabbar. Within a shell page I want to shown a fullscreen image that covers the shell's toolbar and tabbar. I know how to show a fullscreen image if it is not in a shell page, but once I'm in a shell page I can't figure out how to do this.

  • ColeXColeX Member, Xamarin Team Xamurai

    @ColeX said:
    Shell does not support semi-transparent or transparent color , i try to set transparent background color or transparent
    background image on tabbar(toolbar) , but it always shows black color .

    [assembly: ExportRenderer(typeof(AppShell), typeof(ShellCustomRenderer))]
    namespace Xaminals.Droid
    {
        public class ShellCustomRenderer : ShellRenderer
        {
            public ShellCustomRenderer(Context context) : base(context)
            {
    
            }
    
            protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
            {
                return new ToolbarAppearance();
            }
    
            protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
            {
                return new TabbarAppearance();
            }
    
        }
    
        public class TabbarAppearance : IShellBottomNavViewAppearanceTracker
        {
            public void Dispose()
            {
    
            }
    
    
            public void ResetAppearance(BottomNavigationView bottomView)
            {
                changeColor(bottomView);
            }
            public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
            {
                changeColor(bottomView);
            }
    
            void changeColor(BottomNavigationView view)
            {
    
                //method 1
                view.SetBackgroundColor(Color.FromHex("#00000000").ToAndroid());
    
    
                //method 2
                view.SetBackgroundResource(Resource.Drawable.photo);
            }
        }
    
        public class ToolbarAppearance : IShellToolbarAppearanceTracker
        {
            public void Dispose()
            {
    
            }
    
            public void ResetAppearance(Android.Support.V7.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker)
            {
                //toolbar.SetBackgroundColor(Android.Graphics.Color.Red);
                //toolbar.SetNavigationIcon(Resource.Drawable.star_small);// Resource.Drawable.star_small;
    
                Color color = Color.FromHex("#80ff0000");
                toolbar.SetBackgroundColor(color.ToAndroid());
            }
    
            public void SetAppearance(Android.Support.V7.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
            {
                //toolbar.SetBackgroundColor(Android.Graphics.Color.Red);
                // toolbar.SetNavigationIcon(Resource.Drawable.star_small);
    
                Color color = Color.FromHex("#80ff0000");
                toolbar.SetBackgroundColor(color.ToAndroid());
            }
        }
    }
    

    BTW , you could simply hide the toolbar and tabbar using Shell.TabBarIsVisible and Shell.TabBarIsVisible in single page , but it is meaningless (you can't navigate to other page)

    Sorry , my short answer : impossible .

Sign In or Register to comment.