Everything works out of the box for Xamarin Forms Android and iOS, but not UWP.
Everything works out of the box for Xamarin Forms Android and iOS, but not UWP.
Hello,
Welcome to Microsoft Q&A!
For icon text and icon color we need to create BindableProperty in Page , for barbackground color we need to create in TabbedPage.
Every Child Page
public partial class Page1 : ContentPage
{
public Page1()
{
InitializeComponent();
}
public static readonly BindableProperty FontIconProperty = BindableProperty.Create(propertyName: "FaIconBrush",
returnType: typeof(string), declaringType: typeof(Page1));
public string FaIconBrush
{
get => (string)base.GetValue(FontIconProperty);
set{if (this.FaIconBrush != value) base.SetValue(FontIconProperty, value); }
}
public static readonly BindableProperty FaIconTextProperty = BindableProperty.Create(propertyName: "FaIconText",
returnType: typeof(string), declaringType: typeof(Page1));
public string FaIconText
{
get => (string)base.GetValue(FaIconTextProperty);
set {if (this.FaIconText != value) base.SetValue(FaIconTextProperty, value); }
}
}
TabbedPage
//code behind
public partial class TabbedPage1 : TabbedPage
{
public static readonly BindableProperty BarColorProperty = BindableProperty.Create(propertyName: " BarColor",
returnType: typeof(string), declaringType: typeof(TabbedPage1));
public string BarColor
{
get => (string)base.GetValue(BarColorProperty);
set { if (this.BarColor != value) base.SetValue(BarColorProperty, value); }
}
public TabbedPage1()
{
InitializeComponent();
BarColor = "#0000ff";
}
}
//xaml
xmlns:local ="clr-namespace:FormsA"
<local:Page1 Title="Tab 1" FaIconBrush="#00ff00" FaIconText=""/>
<local:Page2 Title="Tab 2" FaIconBrush="#ff0000" FaIconText=""/>
<ContentPage Title="Tab 3" IconImageSource="settings.png"/>
Custom Renderer
[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyRenderer))]
namespace FormsA.UWP
{
class MyRenderer : TabbedPageRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.Style = (Windows.UI.Xaml.Style)Windows.UI.Xaml.Application.Current.Resources["PivotHeaderBottomStyle"];
}
}
}
}
App.xaml
// icon
<Setter
Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding FaIconText}" Foreground="{Binding FaIconBrush}" FontFamily="ms-appx:///Assets/Font Awesome 5 Free-Solid-900.oft#Font Awesome 5 Free Solid"/>
<TextBlock HorizontalAlignment="Center" Foreground="Black" Grid.Row="1" Text="{Binding Title}" Style="{ThemeResource BodyTextBlockStyle}"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
//bar background color
<ContentControl.Clip>
<RectangleGeometry
x:Name="HeaderClipperGeometry" />
</ContentControl.Clip>
<Grid
Background="{Binding BarColor}"> //this line
<PivotHeaderPanel
x:Name="StaticHeader"
Visibility="Collapsed" />
UWP Style is mentioned in this thread : https://docs.microsoft.com/en-us/answers/questions/344447/how-do-i-make-a-xamarin-uwp-bottom-tabbar-and-chan.html.
If the response is helpful, please click "Accept Answer" and upvote it.
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.
Thanks, @ColeXia-MSFT ! I'm worried that people might get confused by the UWP app.xaml style you posted, since it isn't the whole thing. I tried to post the whole thing and it wouldn't let me. Maybe you can get it done.
Thanks again for all of your help. This works well... especially is you make a base tabbedPage and a base contentpage to put the bindable properties in and then inherit all of your pages from them.
6 people are following this question.