Skip to content
This repository has been archived by the owner on May 1, 2024. It is now read-only.

[Shell,Android] Allow transparent background on Shell Header #13322

Merged
merged 6 commits into from
Jan 15, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,14 @@ public ShellFlyoutBackground()

protected override void Init()
{
AddFlyoutItem(CreateContentPage(), "Item 1");
AddFlyoutItem(CreateContentPage(), "Item 2");
for (int i = 0; i < 20; i++)
{
AddFlyoutItem(CreateContentPage(), $"Item {i}");
}

FlyoutBackgroundImage = "photo.jpg";
FlyoutBackgroundImageAspect = Aspect.AspectFill;
FlyoutVerticalScrollMode = ScrollMode.Enabled;
}

ContentPage CreateContentPage()
Expand Down Expand Up @@ -148,6 +151,52 @@ ContentPage CreateContentPage()
}
}),
AutomationId = "ToggleHeaderFooter"
},
new Button()
{
Text = "Toggle Header/Footer Transparent",
Command = new Command(() =>
{
if (FlyoutHeader == null)
{
FlyoutFooter =
new Label()
{
Text = "The FOOTER",
TextColor = Color.Blue,
HeightRequest = 50
};

FlyoutHeader =
new StackLayout
{
Orientation = StackOrientation.Horizontal,
HeightRequest = 100,
Children = {
new Label()
{
Text = "The HEADER",
FontSize = 25,
FontAttributes = FontAttributes.Bold,
VerticalTextAlignment = TextAlignment.Center,
TextColor = Color.Blue,
},
new Button()
{
Text = "OK",
FontSize = 25,
TextColor = Color.Green,
Command = new Command(() => DisplayAlert("Button", "ThisButtonWorks", "OK"))
}
}
};
}
else
{
FlyoutHeader = FlyoutFooter = null;
}
}),
AutomationId = "ToggleHeaderFooterTransparent"
}
}
};
Expand Down
5 changes: 2 additions & 3 deletions Xamarin.Forms.Platform.Android/Renderers/ContainerView.cs
Original file line number Diff line number Diff line change
Expand Up @@ -62,13 +62,12 @@ protected override void OnLayout(bool changed, int l, int t, int r, int b)

var width = Context.FromPixels(r - l);
var height = Context.FromPixels(b - t);

_shellViewRenderer.LayoutView(width, height);
LayoutView(0, 0, width, height);
}

protected virtual void LayoutView(double x, double y, double width, double height)
{
View?.Layout(new Rectangle(x, y, width, height));
_shellViewRenderer.LayoutView(width, height);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All this change does is makes sure that UpdateElevation is called when the header is created. This allows the user to set the flyout header elevation via the platform specific

}

protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -549,19 +549,8 @@ void UpdateElevation()

protected override void LayoutView(double x, double y, double width, double height)
{
var context = Context;
var paddingLeft = context.FromPixels(PaddingLeft);
var paddingTop = context.FromPixels(PaddingTop);
var paddingRight = context.FromPixels(PaddingRight);
var paddingBottom = context.FromPixels(PaddingBottom);

width -= paddingLeft + paddingRight;
height -= paddingTop + paddingBottom;

UpdateElevation();

if (View != null)
View.Layout(new Rectangle(paddingLeft, paddingTop, width, height));
base.LayoutView(x, y, width, height);
}

protected override void Dispose(bool disposing)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
android:id="@+id/flyoutcontent_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@null"
app:elevation="0dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

</xamarin.forms.platform.android.ShellFlyoutLayout>