We are working on an MAUI app and facing a problem in navigating from and to tabs.
We have a shell app with a TabBar, inside we defined 5 tabs:
<TabBar>
<Tab Title="Home"
Icon="homeicon.png">
<ShellContent ContentTemplate="{DataTemplate Pages:FeedPage}" />
</Tab>
<Tab Title="Messages"
Icon="messageicon.png">
<ShellContent ContentTemplate="{DataTemplate Pages:MessagesPage}" />
...
</TabBar>
We have also defined in one of the tabs xaml a Shell.TitleView like so:
<Shell.TitleView>
<Grid Padding="5" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ImageButton Grid.Column="2" Source="profileicon.png"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Command="{Binding ProfileButtonTapped }" />
<ImageButton Grid.Column="1" Source="coinicon.png"
...
...
</Grid>
</Shell.TitleView>
Our problem occurs when we try to go back to the tab in which we have the Shell.TitleView defined. the error we get is :
Java.Lang.IllegalStateException: 'The specified child already has a parent. You must call removeView() on the child's parent first.'
This error occurs with StackLayout on the title view as well... we did some digging and found out that if we remove the layouts from the TitleView the error isn't happening anymore so we guess it has something to do with it.
Edit 1: I have noticed this output every time I switch tabs
"Thread finished: #11
The thread 0xb has exited with code 0 (0x0).
Thread started: #12
Thread finished: #10
The thread 0xa has exited with code 0 (0x0).
[TabLayout] MODE_SCROLLABLE + GRAVITY_FILL is not supported, GRAVITY_START will be used instead"
Unfortunately it is a known bug in MAUI itself Page with TitleView crashes on Android when navigating back to it from Shell Tab #4506
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 have an issue with the NavigationView control in my UWP app. When I set the IsPaneToggleButtonVisible to false, my PaneHeader collapses too. Offically this bug was solved, am I doing something wrong?
<NavigationView PaneDisplayMode="Left" IsPaneToggleButtonVisible="False" IsBackButtonVisible="Collapsed" OpenPaneLength="200" IsSettingsVisible="False" Height="923">
<NavigationView.PaneHeader>
<Image x:Name="Header" Source="/Assets/Header.png" Stretch="UniformToFill" Margin="0,0,0,0" HorizontalAlignment="Left" Width="216" Height="53"/>
</NavigationView.PaneHeader>
<NavigationView/>
Based on this thread, it mentions
This issue was addressed in #1083, which has now been successfully
released as Microsoft.UI.Xaml v2.2.190731001-prerelease.
This means the bug has solved in the Windows UI Library version of NavigationView, so if you want to show your PaneHeader, you need to install the Microsoft.UI.Xaml nuget package and then add <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/> to your Application.Resources.
.App.xaml:
<Application>
<Application.Resources>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
</Application.Resources>
</Application>
.MainPage.xaml:
<Page
......
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
>
<Grid>
<muxc:NavigationView PaneDisplayMode="Left" IsPaneToggleButtonVisible="False" IsBackButtonVisible="Collapsed" OpenPaneLength="200" IsSettingsVisible="False" Height="923">
<muxc:NavigationView.PaneHeader>
<Image x:Name="Header" Source="Assets/StoreLogo.png" Stretch="UniformToFill" Margin="0,0,0,0" HorizontalAlignment="Left" Width="53" Height="53"/>
</muxc:NavigationView.PaneHeader>
</muxc:NavigationView>
</Grid>
</Page>
Hi I am new to Xamarin Forms and am from native iOS development.
For showing alerts / action sheets I am using this https://github.com/aritchie/userdialogs.
For implementing this I followed this How to use Acr.UserDialogs.
I am getting alert successfully by following this, but now I need to customise the OK / Cancel Button's background color, alignment, frame values, hide and show the buttons..
Thanks in advance.
I need to customise the OK / Cancel Button's background color, alignment, frame values, hide and show the buttons.
As the author said, you could do this by creating a style and apply it in AlertConfig.
For example:
In the style.xml:
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<!-- Used for the buttons -->
<item name="colorAccent">#AAAAAA</item>
<!-- Used for the title and text -->
<item name="android:textColorPrimary">#FFFFFF</item>
<!-- Used for the background -->
<item name="android:background">#DDDDDD</item>
<!-- Used for the Alignment -->
<item name="android:gravity">center_horizontal</item>
</style>
And you could find this style Id in the Resource.Designer.cs.
// aapt resource value: 0x7f0b0189
public const int AlertDialogCustom = 2131427721;
Then in the code create a AlertConfig to config the alertdialog:
AlertConfig alertConfig = new AlertConfig();
alertConfig.OkText = "OKOK";
alertConfig.Message = "Message";
alertConfig.Title = "Title";
alertConfig.AndroidStyleId=2131427721;
UserDialogs.Instance.Alert(alertConfig);
With Rg.Plugins.Popup Nuget you can customize the popup.
Finally I am not using any nugget packages. Now I created my own CustomAlert class. I hope it will helpful for any one.
#Miguel Angel please look at below code
In my CustomAlert.xaml file
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="wwww/2009/xaml" x:Class="MY.UserControls.CustomAlert">
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid BackgroundColor="#656565" Opacity="0.5">
</Grid>
<StackLayout BackgroundColor="{StaticResource WhiteColor}" VerticalOptions="Center" Margin="10" Padding="10" >
<Label Text="Title" FontSize="18" HorizontalTextAlignment="Center" Margin="0,0,0,0" TextColor="Black"></Label>
<Label Text="Descrption." FontSize="14"
HorizontalTextAlignment="Start"
Margin="10,10,5,5"
VerticalOptions="Center" TextColor="Gray"></Label>
<Button Text="OK" TextColor="{StaticResource WhiteColor}"
Command="{Binding DismissCustomAlertCommand}"
HorizontalOptions="Center" VerticalOptions="Center"
BackgroundColor="Red" Margin="30,0,30,0" WidthRequest="400" HeightRequest="40"></Button>
</StackLayout>
</Grid>
</ContentView>
Thank you
Problem
This is the layout of my main pane:
<Page
x:Class="Communities.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Communities"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Loaded="Page_Loaded" DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="48" />
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
...
<SplitView Grid.Row="1" Name="hamburgerMenu" OpenPaneLength="200" PaneBackground="#F02A2A2A">
<SplitView.Pane>
<ListView ItemsSource="{Binding}" IsItemClickEnabled="True" ItemClick="HamburgerItemClick">
... </ListView>
</SplitView.Pane>
<Frame Name="frame" />
</SplitView>
<Grid Grid.RowSpan="3" Name="popupArea" />
</Grid>
</Page>
the frame is where I load all my pages, so that the layout is always consistant.
Now, in most of my child pages I have defined AppBar control and attached it to the BottomAppBar property of that child page:
PostView.xaml
...
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Label="Back" Icon="Back" Click="TryGoBack" />
<AppBarButton Label="Refresh" Icon="Refresh" Click="TryRefreshComments" />
<AppBarButton Label="Go to Community" Icon="Go" Click="TryOpenCommunity" />
</CommandBar>
</Page.BottomAppBar>
...
Here's where the trouble starts. It works fine on PC, as the layout is mostly static on desktop. There are no software keyboards required most of the time etc. On mobile it's more problematic: Screenshots
My thoughts
It seems like the frame that is used to display the child page is causing all sorts of problems. When the AppBar is defined in the main page it positions correctly.
I'd like to avoid the keyboard covering the textbox as well as the AppBar but I don't want to get rid of the frame control. I'd also prefer it if the page got "squished" when the keyboard shows up, instead of getting pushed upwards, but I'm not sure how to display the keyboard on the frame level, instead of the entire MainPage, default level.
What would be the best way to solve this situation?
Cheers!
As you know, if we set the Page.BottomAppBar in the root of the Page, there is no issue with Touch keyboard. It seems it is the best way to add the Page.BottomAppBar.
If you want to add the Page.BottomAppBar in the other page in the Frame, you should be able to customize your UI. The UWP provides similar behavior on the appearance of the touch keyboard by handling the Showing and Hiding events exposed by the InputPane object.
We can use the InputPaneVisibilityEventArgs.OccludedRect to get the region of the application's window that the input pane is covering.
For example:
public PostView()
{
this.InitializeComponent();
InputPane.GetForCurrentView().Showing += PostView_Showing;
InputPane.GetForCurrentView().Hiding += PostView_Hiding;
}
private void PostView_Hiding(InputPane sender, InputPaneVisibilityEventArgs args)
{
MyTextBox.Margin = new Thickness(0, args.OccludedRect.Height, 0, 0);
}
private void PostView_Showing(InputPane sender, InputPaneVisibilityEventArgs args)
{
MyTextBox.Margin = new Thickness(0, 0, 0, args.OccludedRect.Height);
}
I am trying to add a context menu which shows menu items horizontally. My sample code:
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<StackPanel Orientation="Horizontal">
<toolkit:MenuItem Tap="CallMenuItem_tapped">
<toolkit:MenuItem.Header>
<Image Height="50"
Stretch="Uniform"
Source="Assets/icon1.png" />
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
<toolkit:MenuItem Tap="ChatMenuItem_tapped">
<toolkit:MenuItem.Header>
<Image Height="50"
Stretch="Uniform"
Source="Assets/icon2.png" />
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
<toolkit:MenuItem Tap="OtherMenuItem_tapped">
<toolkit:MenuItem.Header>
<Image Height="50"
Stretch="Uniform"
Source="Assets/icon3.png" />
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
</StackPanel>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
I am facing some problems. First of all when I tap a menu item the specific event is called but the menu remains open. As I am showing all the menu items in one line(horizontally), I am unable to fix the height and width of context menu. Is there a better way to add a horizontal context menu using icons?
I would suggest you to use the ItemsPanel property to set the layout as horizontal stack panel. And if you still face any issues then you can manually close the context menu using the IsOpen property. Hope this helps you.