How do I easily implement a tabbed page inside a tabbed page in xamarin forms with mvvmcross?
TabbedPage1;
[MvxTabbedPagePresentationAttribute(Position = TabbedPosition.Root, WrapInNavigationPage = true, NoHistory = false)]
public partial class TabbedPage1: MvxTabbedPage<ViewModels.TabbedPage1ViewModel>
{
public TabbedPage1()
{
InitializeComponent();
}
}
TempPage;
[MvxTabbedPagePresentationAttribute(Position = TabbedPosition.Tab, Icon = "map_outline", WrapInNavigationPage = true, NoHistory = false)]
public partial class TempPage: MvxContentPage<ViewModels.TempPageViewModel>
{
public TempPage()
{
InitializeComponent();
}
}
TabbedPage2;
[MvxTabbedPagePresentationAttribute(Position = TabbedPosition.Root, WrapInNavigationPage = true, NoHistory = false)]
public partial class TabbedPage2 : MvxTabbedPage<ViewModels.TabbedPage2ViewModel>
{
public TabbedPage2 ()
{
InitializeComponent();
}
}
my current situation is, that the tabbedpage2 shows like a modal page.
You could nest a TabView in Tabbed page. Install Xam.Plugin.TabView via NuGet. https://www.nuget.org/packages/Xam.Plugin.TabView
Create three tab pages in views folder.
Tabbed Page:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
x:Class="TabbedPageDemo.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:Views="clr-namespace:TabbedPageDemo.Views"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
BarBackgroundColor="Blue"
BarTextColor="White"
mc:Ignorable="d">
<Views:Tab1_Page Title="TAB1" />
<Views:Tab2_Page Title="TAB2" />
<Views:Tab3_Page Title="TAB3" />
</TabbedPage>
And then use TabView in you tab1 page.
Tab1_Page:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="TabbedPageDemo.Views.Tab1_Page"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:local="clr-namespace:Xam.Plugin.TabView;assembly=Xam.Plugin.TabView"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ContentPage.Content>
<local:TabViewControl>
<local:TabViewControl.ItemSource>
<local:TabItem HeaderText="SUBTAB1">
<StackLayout VerticalOptions="Start" Padding="10">
<Button
BackgroundColor="White"
Text="List Item"
TextColor="Black"/>
</StackLayout>
</local:TabItem>
<local:TabItem HeaderText="SUBTAB2">
<Image Source="pink.jpg" />
</local:TabItem>
</local:TabViewControl.ItemSource>
</local:TabViewControl>
</ContentPage.Content>
</ContentPage>
Please note, if you want to make the tabs in tabbed page in the bottom. Add the code below in your MainPage.
On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
You could download the code sample from GitHub in TabbedPage_NestedTabView/TabbedPageDemo
https://github.com/WendyZang/Test.git
Related
Can't find source of evil, have two pages, added as Singleton service, when i navigate to the second page for a first time everything great, when i navigate second time i get:
System.InvalidOperationException: 'Native View not set'
MAUI version 6.0.300-rc.2.5513+sha.8a017cf73-azdo.6048189
Emulator Android11 API 30
Tested on Desktop everything seems ok...
MauiProgram.cs
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
builder.Services.AddSingleton<ShellViewModel>();
builder.Services.AddSingleton<AppShell>();
builder.Services.AddSingleton<MainPage>();
builder.Services.AddSingleton<SettingsPage>();
return builder.Build();
}
}
App.xaml - default to new project
App.cs
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new AppShell();
Routing.RegisterRoute(nameof(MainPage), typeof(MainPage));
Routing.RegisterRoute(nameof(SettingsPage), typeof(SettingsPage));
}
}
AppShell.xaml
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="MauiAppTest.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiAppTest"
xmlns:vm="clr-namespace:MauiAppTest.ViewModels"
x:DataType="vm:ShellViewModel"
Shell.FlyoutBehavior="Disabled">
<Shell.ToolbarItems>
<ToolbarItem Command="{Binding GoToSettings}" Text="Settings"/>
</Shell.ToolbarItems>
<ShellContent
Title="Hello, World!"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage" />
</Shell>
AppShell.cs
public partial class AppShell : Shell
{
public AppShell()
{
InitializeComponent();
BindingContext = new ShellViewModel();
}
}
ShellViewModel.cs
public class ShellViewModel: ObservableObject
{
public AsyncRelayCommand GoToSettings { get; private set; }
public ShellViewModel()
{
GoToSettings = new AsyncRelayCommand(async () => await Shell.Current.GoToAsync("SettingsPage"));
}
}
MainPage and SettingsPage just two default blank pages
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppTest.MainPage"
Title="MainPage">
<StackLayout>
<Label Text="Welcome to .NET MAUI!"
VerticalOptions="Center"
HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppTest.SettingsPage"
Title="SettingsPage">
<StackLayout>
<Label Text="Welcome to .NET MAUI!"
VerticalOptions="Center"
HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
I'm trying to create a custom control of an ImageButton to which I can assign a property that is to give it a color and another an image with Source. I have tried to do it this way but the image and the color that I am giving it does not work for me. This is my code:
View1.xaml.cs:
public partial class View1 : ContentView
{
public static readonly BindableProperty ImageSourceProperty =
BindableProperty.Create("Source", typeof(ImageSource),typeof(ImageButton),default(ImageSource));
public ImageSource Source {
get { return (ImageSource)GetValue(ImageSourceProperty); }
set { SetValue(ImageSourceProperty, value); }
}
//============================================
public static readonly BindableProperty ButtonColorProperty =
BindableProperty.Create("ButtonColor", typeof(Color), typeof(ImageButton), Color.White);
public Color ButtonColor
{
get { return (Color)GetValue(ButtonColorProperty); }
set { SetValue(ButtonColorProperty, value); }
}
public View1()
{
InitializeComponent();
}
}
View1.xaml:
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CustomContro.View1">
<StackLayout>
<ImageButton CornerRadius="20" WidthRequest="70" HeightRequest="70" />
</StackLayout>
</ContentView>
MainPage.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CustomContro.MainPage"
xmlns:local="clr-namespace:CustomContro"
>
<AbsoluteLayout>
<local:View1
Source="dieciseis.png"
ButtonColor="Green"
/>
</AbsoluteLayout>
</ContentPage>
You could try to change like below:
the custom control View1:
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class View1 : ContentView
{
public static readonly BindableProperty ImageSourceProperty =
BindableProperty.Create("ImageSource", typeof(ImageSource), typeof(View1), null);
public ImageSource ImageSource
{
get { return (ImageSource)GetValue(ImageSourceProperty); }
set { SetValue(ImageSourceProperty, value); }
}
public static readonly BindableProperty ButtonColorProperty =
BindableProperty.Create("ButtonColor", typeof(Color), typeof(View1), null);
public Color ButtonColor
{
get { return (Color)GetValue(ButtonColorProperty); }
set { SetValue(ButtonColorProperty, value); }
}
public View1()
{
InitializeComponent();
BindingContext = this;
}
}
the View1.xaml:
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="EntryCa.View1">
<ContentView.Content>
<StackLayout>
<ImageButton x:Name="image" CornerRadius="20" WidthRequest="70" HeightRequest="70" Source="{Binding ImageSource}" BackgroundColor="{Binding ButtonColor}" />
</StackLayout>
</ContentView.Content>
</ContentView>
use it like:
<local:View1 ImageSource="dieciseis.png" ButtonColor="Green"></local:View1>
You have to set the values for the ImageButton like this:
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CustomContro.View1"
x:Name="MyAwesomeContentView">
<StackLayout>
<ImageButton CornerRadius="20"
WidthRequest="70"
HeightRequest="70"
ImageSource="{Binding Path=Source, Source={x:Reference MyAwesomeContentView}}"
Color="{Binding Path=ButtonColor, Source={x:Reference MyAwesomeContentView}}"
/>
</StackLayout>
</ContentView>
I am attempting to use CarouselView for the first time and is kind of struck with it. I have XAML defined as follows
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
x:Class="cSixty.Xam.Views.MainPage"
Title="MainPage">
<ContentPage.Content>
<StackLayout>
<Label Text="Name" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
<cv:CarouselView ItemsSource="{Binding Zoos}">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding Name}" />
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
The ViewModel has a Collection defined as follows.
public MainPageViewModel()
{
Zoos = new ObservableCollection<Zoo>
{
new Zoo
{
Name = "Woodland Park Zoo"
},
new Zoo
{
Name = "Cleveland Zoo"
},
new Zoo
{
Name = "Phoenix Zoo"
}
};
}
Where Zoo is defined as
public class Zoo
{
public string Name { get; set; }
}
My issue is that the Carousel just doesn't show up. Its all empty. Could someone guide me ?
Finally got it working, just thought will share it in case someone else runs into same situation.
You need install the Nuget Package in your Droid Project (or whatever platform you are using) as well. Previously, I had installed in my Portable Library only.
I want to load an Activity indicator first when the WebView is loading data , then it turns Invisible after loading data.
Below is my Xaml Code:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" Title="Shows Trending" xmlns:o="clr-namespace:Octane.Xam.VideoPlayer;assembly=Octane.Xam.VideoPlayer" x:Class="BBSTV.TrendingShowsDetails">
<ActivityIndicator x:Name="activity_indicator" Color="Blue" />
<WebView VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" x:Name="loadVideo_wv">
</WebView>
</ContentPage>
Below is my C# code:
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace BBSTV
{
public partial class TrendingShowsDetails : ContentPage
{
public TrendingShowsDetails(string videolink)
{
InitializeComponent();
activity_indicator.IsRunning = true;
loadVideo_wv.Source = "https://www.youtube.com/playlist?list=" + videolink;
activity_indicator.IsRunning = false;
}
}
}
Try out this :
C# code :
public TrendingShowsDetails(string videolink)
{
InitializeComponent();
loadVideo_wv.Source = "https://www.youtube.com/playlist?list=" + videolink;
}
protected async override void OnAppearing()
{
base.OnAppearing();
await activity_indicator.ProgressTo(0.9, 900, Easing.SpringIn);
}
public void OnNavigating(object sender, WebNavigatingEventArgs e)
{
activity_indicator.IsVisible = true;
}
public void OnNavigated(object sender, WebNavigatedEventArgs e)
{
activity_indicator.IsVisible = false;
}
Xaml Code:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Shows Trending" xmlns:o="clr-namespace:Octane.Xam.VideoPlayer;assembly=Octane.Xam.VideoPlayer" x:Class="BBSTV.TrendingShowsDetails">
<StackLayout>
<ProgressBar Progress="0.2" IsVisible="false" HorizontalOptions="FillAndExpand" x:Name="activity_indicator" />
<WebView VerticalOptions="FillAndExpand" Navigating="OnNavigating" Navigated="OnNavigated" HorizontalOptions="FillAndExpand" x:Name="loadVideo_wv">
</WebView>
</StackLayout>
</ContentPage>
This question is already answered here:
https://forums.xamarin.com/discussion/59056/how-to-get-the-progress-of-webview-while-loading-the-data-xamarin-forms
and here:
Xamarin.Forms.WebView initial loading indicator
It looks like this
I've been working on a medical app and used MasterDetailPage to put all the navigation into one place. But it was too much so I figure to have it categorize into one of each. I thought of drop down menu on each page item. I've been searching the internet about implementing it but I couldn't figure it out.This is Xamarin on android and I wanted to make a drop down similar to the image above.
This is my code so far on C#
namespace MasterDetailPageNavigation
{
public partial class MasterPage : ContentPage
{
public ListView ListView { get { return listView; } }
public MasterPage ()
{
InitializeComponent ();
BackgroundColor = Color.FromHex ("ffffff");
var masterPageItems = new List<MasterPageItem> ();
masterPageItems.Add (new MasterPageItem {
Title = "DashBoard",
TargetType = typeof(DashBoard)
});
masterPageItems.Add (new MasterPageItem {
Title = "Schedules",
TargetType = typeof(SchedulesCS)
});
masterPageItems.Add (new MasterPageItem {
Title = "Master Data",
TargetType = typeof(MasterDataCS)
});
masterPageItems.Add (new MasterPageItem {
Title = "Audit Trail",
TargetType = typeof(AuditTrailCS)
});
listView.ItemsSource = masterPageItems;
}
}
}
For the xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MasterDetailPageNavigation.MasterPage"
Padding="0,40,0,0"
Icon="hamburger.png"
Title="Medical">
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand">
<ListView x:Name="listView" VerticalOptions="FillAndExpand" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ImageCell Text="{Binding Title}" ImageSource="{Binding IconSource}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
How do you do it?