Comments (8)
Initial work done here: 14641a1
Blazor Native Xaminals sample started, with Shell, here: 18f510b
from mobileblazorbindings.
Thanks for a great work!
Is there any way I could currently set TabBarIsVisible
property for Shell?
from mobileblazorbindings.
Hi @Dreamescaper thanks! It seems that TabBarIsVisible
is an "attached property", meaning it isn't a direct property of Shell. I haven't figured out a good way to support attached properties directly in the Blazor markup.
Fortunately, in Mobile Blazor Bindings there's an "escape hatch" to get to the Xamarin.Forms controls via the NativeControl
property, described in the docs here.
For example, in the Xaminals Shell sample's BearPage I changed the code to this:
@inject ShellNavigationManager NavigationManager
<ContentPage @ref="bearPage">
<ScrollView>
<StackLayout>
@foreach (var animal in BearData.Bears)
{
<AnimalTemplate Animal="animal" OnClick="AnimalClicked"></AnimalTemplate>
}
</StackLayout>
</ScrollView>
</ContentPage>
@code {
Microsoft.MobileBlazorBindings.Elements.ContentPage bearPage;
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
if (firstRender)
{
Xamarin.Forms.Shell.SetTabBarIsVisible(bearPage.NativeControl, false);
}
}
async Task AnimalClicked(Animal animal)
{
await NavigationManager.NavigateToAsync($"/beardetails/{animal.Name}");
}
}
On the first "render" of this page (think of that as the first time the Xamarin.Forms controls are made to show up), it takes a reference to the current ContentPage
and calls SetTabBarIsVisible
on it with false
so that the tab bar is not visible on the BearsPage.
from mobileblazorbindings.
Oh, and yes, this is kind of cumbersome. I'll have to think about how to make this easier. Attached Properties are a very XAML-ish thing, and they do work well from regular C# (as they do in my example above), but they're not great in Blazor syntax.
from mobileblazorbindings.
@Eilon
What do you think about creating component ShellProperties
with handler implementing INonPhysicalChild
, which sets Shell attached properties for parent?
Something like that:
<ContentPage Title="Page Title">
<ShellProperties NavBarIsVisible="false"
TabBarIsVisible="false" />
<StackLayout>
...
</StackLayout>
</ContentPage>
(I would prefer it to be nested Shell type, so it would be <Shell.Properties />
, but blazor does not support that dotnet/aspnetcore#20765)
from mobileblazorbindings.
That is a very interesting idea!!! That is a very clever way to simulate attached properties. Definitely worth exploration!
from mobileblazorbindings.
I like what I see here. If it works I'll copy it for FlexLayout.
from mobileblazorbindings.
The attached properties idea from @Dreamescaper is in!
Thank you: https://twitter.com/original_ejl/status/1334253894772244482
from mobileblazorbindings.
Related Issues (20)
- debug windows app that has a blazorwebview HOT 1
- Renderer was called before InitAsync
- IJSRuntime : {System.NullReferenceException: Object reference not set to an instance of an object. in DelegatingHandler HOT 2
- Does blazor hybrid work on iOS? HOT 5
- Is this project is dead ? HOT 1
- this project are discontinued? HOT 2
- Revisit ObjectExtensions.This() internal extension method HOT 4
- True Fullscreen on blazor windows HOT 4
- How to change WebView EBWebView folder path? HOT 2
- OnParametersSet is not invoked on Shell navigation
- Allow text content for Label control
- Allow passing additional parameters during Shell navigation
- Blazor WebView freeze after maximizing WPF Windows App
- Update Picker.ItemDisplayBinding to be Func instead of string
- Unable to load image from URL HOT 1
- WFP blazor Support MVVM in future release? HOT 4
- When will this project continue? HOT 3
- Window size
- NavigationManager does not work anymore on Hybrid Apps HOT 2
- VS 2022 Community is forever Installing SDK Components and never completes. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mobileblazorbindings.