I am working on a Xamarin. Forms application for iOS and Android (cross-platform)
I am working with a tabbed page which has 5 tabs at the bottom (custom render from the tabbed page)
My problem is, when I push another page on top of a tab page, the tabs at the bottom disappears.
Is there any way to keep the tabs visible when pushing new pages?
<ContentPage.Content>
<Grid>
<ScrollView>
<Grid>
<tabView:SfTabView
DisplayMode="ImageWithText"
TabHeight="64"
TabHeaderPosition="Bottom"
TabHeaderBackgroundColor="#FFFFFF"
VisibleHeaderCount="4"
EnableSwiping="False">
<tabView:SfTabView.SelectionIndicatorSettings>
<tabView:SelectionIndicatorSettings Color="#FFFFFF" Position="Bottom" StrokeThickness="-11"/>
</tabView:SfTabView.SelectionIndicatorSettings>
<tabView:SfTabItem
Title="Home"
TitleFontColor="#999999"
TitleFontFamily="InterMedium"
TitleFontSize="11"
SelectionColor="#0094DE"
ImageSource="HomeGrey.png">
<tabView:SfTabItem.Content>
<MobileScriptApp:HomeScreen1/>
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
<tabView:SfTabItem
Title="Pickup"
TitleFontColor="#999999"
TitleFontFamily="InterMedium"
TitleFontSize="11"
SelectionColor="#0094DE"
ImageSource="PickupGrey.png">
<tabView:SfTabItem.Content>
<StackLayout>
<Label Text="BLAnk TAb" TextColor="Black"/>
</StackLayout>
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
<tabView:SfTabItem
Title="Settings"
TitleFontColor="#999999"
TitleFontFamily="InterMedium"
TitleFontSize="11"
SelectionColor="#0094DE"
ImageSource="settings.png">
<tabView:SfTabItem.Content>
<MobileScriptApp:SettingPage/>
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
<tabView:SfTabItem
Title="Support"
TitleFontColor="#999999"
TitleFontFamily="InterMedium"
TitleFontSize="11"
SelectionColor="#0094DE"
ImageSource="SupportGrey.png">
<tabView:SfTabItem.Content>
<MobileScriptApp:SupportPage/>
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
</tabView:SfTabView>
</Grid>
</ScrollView>
</Grid>
</ContentPage.Content>
</ContentPage>
The SfTabView doesn't support the reported behavior.
Since the SfTabView control is a ContentView control, it can be added to a ContentPage. Due to this, if we navigate to another page, the SfTabView will not be visible because it is a child of another page.
Thanks,
Vijayakumar V
Related
I am develop a new app for Windows 11 with WinUi 3 and in my MainPage the button appears all black in dark theme:
Why this happen?
This is a resume of my code:
<Window
<Grid Name="Main" RowDefinitions="Auto,*">
<RelativePanel Grid.Row="0"
Background="{ThemeResource SystemControlAcrylicWindowBrush}">
<TextBlock Name="TextBlock_AAA"
Text="AAA">
</RelativePanel>
<RelativePanel Grid.Row="1">
<Button Name="Button_AAA"
Content="AAA"
Click="AAA_Click"/>
</RelativePanel>
</Grid>
</Window>
#Luís, you're putting your UI directly in your window which is why it is not being styled.
Add a Blank Page (from the WinUI tab in VisualStudio) called something like "MainPage" and move your Grid into the XAML for the Page.
In the XAML for your main window, simply put <local:MainPage/> as the only content.
Now your button will look like the one in the comment by #nico-zhu-msft
I'm trying to accomplish something similar to the image below where in compact mode you have the icon and the text displayed under it.
I'm not that familiar with modifying the underlying template for the NavigationView to make this work. Can you give me an advice on how to do this?
The code for the NavigationView is pretty much the default one:
<winui:NavigationView
x:Name="navigationView"
Background="{ThemeResource SystemControlBackgroundAltHighBrush}"
IsBackButtonVisible="Collapsed"
IsBackEnabled="False"
IsPaneToggleButtonVisible="False"
IsSettingsVisible="False"
PaneDisplayMode="LeftCompact"
SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}">
<winui:NavigationView.MenuItems>
<winui:NavigationViewItem x:Uid="Shell_Main" helpers:NavHelper.NavigateTo="views:MainPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<winui:NavigationViewItem x:Uid="Shell_WorkOrders" helpers:NavHelper.NavigateTo="views:WorkOrdersPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<winui:NavigationViewItem x:Uid="Shell_Materials" helpers:NavHelper.NavigateTo="views:MaterialsPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<winui:NavigationViewItem x:Uid="Shell_Documentation" helpers:NavHelper.NavigateTo="views:DocumentationPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
</winui:NavigationView.MenuItems>
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="ItemInvoked">
<ic:InvokeCommandAction Command="{x:Bind ViewModel.ItemInvokedCommand}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
<Grid>
<Frame x:Name="shellFrame" />
</Grid>
</winui:NavigationView>
NavigationView icons + text in compact mode
it's hard to make interface like the screenshot that you mentioned above, you need to edit the default NavigationViewItemPresenter style, and set icon above and content bottom.
For making navigation like above, we suggest you custom side navigation with SplitView to replace default NavigationView. and set ListView as pane content. Then you could design the nav item flexibly by customizing ItemTemplate .
For more detail please refer to Xaml-Controls-Gallery here.
I have been dipping my toes in the .NET Maui framework, but unfortunately so far it has been quite disappointing. There seem to be multiple errors related to Shell (title view not working properly) and controls themselves. I have the following main page xaml file:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp1.MainPage">
<StackLayout Background="#111111" >
<Frame HasShadow="True" Margin="10" CornerRadius="10" BackgroundColor="#222222">
<StackLayout Spacing="30">
<Grid ColumnDefinitions="30,*">
<Label Text="R" FontSize="Medium" TextColor="White" />
<Slider GridLayout.Column="1" MinimumTrackColor="Red" ThumbColor="Red" MaximumTrackColor="#AAAAAA" />
</Grid>
<Grid ColumnDefinitions="30,*">
<Label Text="G" FontSize="Medium" TextColor="White" />
<Slider GridLayout.Column="1" MinimumTrackColor="#7FFF00" ThumbColor="#7FFF00" MaximumTrackColor="#AAAAAA" />
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</ContentPage>
which is just a stack layout with a single frame that houses two sliders with labels. However, the two sliders seem to have a predefined width, as they are not filling the remaining space:
As soon as I add anything to any of the controls in the xaml while the app is running, for example a green background to the first grid, both sliders resize to the correct size:
However, when I reload the application with this change, the sliders go back to the wrong size:
There are additional issues that I encountered as well, when placing this content page as a flyout item in the shell where android behaviour was as described here, but additionally the Sliders are not interactable in Windows version. In this example with a clean project they do work in Windows version.
Try with any third-party packages like syncfusion, etc. to meet your requirements.
i am using xamarin forms(PCL) and execute the App using Windows phone emulator
i created a master detail page
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<StackLayout Orientation="Vertical">
<Button Text="buttonOne"/>
<Button Text="ButtonTwo"/>
<Button Text="ButtonThree"/>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:MasterPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
the details page is
<StackLayout>
<Label Text="Hello World"/>
<StackLayout>
<maps:Map WidthRequest="320" HeightRequest="200" />
</StackLayout>
</StackLayout>
it stops at
#if DEBUG && !DISABLE_XAML_GENERATED_BREAK_ON_UNHANDLED_EXCEPTION
UnhandledException += (sender, e) =>
{
if (global::System.Diagnostics.Debugger.IsAttached)
global::System.Diagnostics.Debugger.Break();
};
#endif
and return this exception( Native View = Unable to evaluate the expression. Operation not supported. Unknown error: 0x80070057.)
Note:
if i remove the WidthRequest and HeightRequest of the map it works
but the map would not appear.
And this Exception Takes place only when navigate to the master
detail page.
So this resolves to not being a problem with the Maps part specifically but an issue with Navigating to Master Detail pages, since PushModalAsync(...) puts the Master Detail Page on top of a new Navigation stack instead of pushing it onto the top of the current Navigation stack which is what PushAsync(...) does.
Here's a link to a Xamarin Forms Forum question that appears to have the same problem:
https://forums.xamarin.com/discussion/21461/navigation-pushasync-not-working
Apparently MasterDetail pages do not like being navigated to, and both Android and iOS prefer to have it as the root page. That isn't to say this is impossible to do, I believe it just has to be done a little differently. Some dependecy injection/custom rendering might help here.
I found this Xamarin Forms article very useful when learning about Navigation, might help you out as well:
https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/hierarchical/
I am attempting to make a multipage app and would like to use a common navigation toolbar across all pages. The page includes:
<Page.TopAppBar>
<AppBar >
<StackPanel Orientation="Horizontal">
<Button />
</StackPanel>
</AppBar>
</Page.TopAppBar>
In App.xaml I can define the AppBar that goes into the Page.TopAppBar:
<Application.Resources>
<AppBar x:Key="CommonAppBar" x:Name="AppBarCommon">
<StackPanel Orientation="Horizontal">
<Button />
</StackPanel>
</AppBar>
</Application.Resources>
But how can I use this AppBar defination in the Page xaml?
You can use the Frame control on one page and show another your pages inside that frame. Then you can add an AppBar to this page.
By the way, the AppBarButton is the button that is used inside an AppBar, not StackPanel and Buttons (your approach will still work, but if you expect the same behaviour and look as in other UWP apps, it's easier to use AppBarButtons).