Remove navigation bar on Xamarin Forms app with Caliburn.Micro - xamarin.forms

When using the FormsApplication base class with a brand new Xamarin.Forms app using Caliburn.Micro, I end up with an empty navigation bar at the top of my screen. I assume it's being created by Caliburn.Micro somehow, because an out-of-the-box Xamarin.Forms app doesn't have that.
Is there any way I can use Caliburn.Micro with Xamarin.Forms without this navigation bar?

I have not used Caliburn.Micro, but I am assuming that it is wrapping your page with a NavigationPage, as what you describe is what would happen if so.
You should be able to hide that navigation bar by setting a simple attribute in your page like so:
<ContentPage NavigationPage.HasNavigationBar="false"
..... >
</ContentPage>
If you are not using XAML pages and doing all of your UI in code instead, then you can do it this way within your page constructor:
NavigationPage.SetHasNavigationBar(this, false);

If you are using a Shell, (if you chose any of Visual Studios three Templates when first creating your project, you probably are) NavigationPage.HasNavigationBar="False" won't work. Try adding this line of code to each of your ContentPages
Shell.NavBarIsVisible="False"

This drove me nuts for a while as every answer I've seen for the code behind is a partial answer.
Lets say in your App.Xaml.cs file you have your NavigationPage constructor set like this:
MainPage = new NavigationPage(new Astronomy.MainPage());
You then have to go into the MainPage code behind and add code to remove the NavBar: you can't add the line to the app constructor.
public MainPage()
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
}
So glad I finally figured this out! It's been causing me a headache for a while!

It works for me:
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
this.Window.AddFlags(WindowManagerFlags.Fullscreen); // hide the status bar
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
int uiOptions = (int)Window.DecorView.SystemUiVisibility;
uiOptions |= (int)SystemUiFlags.LowProfile;
uiOptions |= (int)SystemUiFlags.Fullscreen;
uiOptions |= (int)SystemUiFlags.HideNavigation;
uiOptions |= (int)SystemUiFlags.ImmersiveSticky;
Window.DecorView.SystemUiVisibility =
(StatusBarVisibility)uiOptions;
}

If you are using Xamarin Forms 3.x try this in the constructor
SetValue(NavigationPage.HasNavigationBarProperty, false);
InitializeComponent();

After updating the MvvmCross nuget packages(to 8.0.2) and Xamarin Forms neget packages (to 5.0.0), I need to put this option explicitly.
put NavigationPage.HasNavigationBar="False" on your xaml ComtentPage
or MvxContentPage

New Here! My first comment
Just too confirm that "Cedric Moore"s Answer works!
Thank you, spent hours at this and this finally worked!
At the top of your Page(Located inside "Views" folder Default)
(AboutPage.xaml) is the starting one and the one i am using for this example.
Inside the <> of ContentPage, add Shell.NavBarIsVisible="False"
Example:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourNameHere.Views.AboutPage"
xmlns:vm="clr-namespace:YourNameHere.ViewModels"
Title="{Binding Title}"
Shell.NavBarIsVisible="False">

Related

How to delete that bar in the top of a TabView [duplicate]

When using the FormsApplication base class with a brand new Xamarin.Forms app using Caliburn.Micro, I end up with an empty navigation bar at the top of my screen. I assume it's being created by Caliburn.Micro somehow, because an out-of-the-box Xamarin.Forms app doesn't have that.
Is there any way I can use Caliburn.Micro with Xamarin.Forms without this navigation bar?
I have not used Caliburn.Micro, but I am assuming that it is wrapping your page with a NavigationPage, as what you describe is what would happen if so.
You should be able to hide that navigation bar by setting a simple attribute in your page like so:
<ContentPage NavigationPage.HasNavigationBar="false"
..... >
</ContentPage>
If you are not using XAML pages and doing all of your UI in code instead, then you can do it this way within your page constructor:
NavigationPage.SetHasNavigationBar(this, false);
If you are using a Shell, (if you chose any of Visual Studios three Templates when first creating your project, you probably are) NavigationPage.HasNavigationBar="False" won't work. Try adding this line of code to each of your ContentPages
Shell.NavBarIsVisible="False"
This drove me nuts for a while as every answer I've seen for the code behind is a partial answer.
Lets say in your App.Xaml.cs file you have your NavigationPage constructor set like this:
MainPage = new NavigationPage(new Astronomy.MainPage());
You then have to go into the MainPage code behind and add code to remove the NavBar: you can't add the line to the app constructor.
public MainPage()
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
}
So glad I finally figured this out! It's been causing me a headache for a while!
It works for me:
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
this.Window.AddFlags(WindowManagerFlags.Fullscreen); // hide the status bar
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
int uiOptions = (int)Window.DecorView.SystemUiVisibility;
uiOptions |= (int)SystemUiFlags.LowProfile;
uiOptions |= (int)SystemUiFlags.Fullscreen;
uiOptions |= (int)SystemUiFlags.HideNavigation;
uiOptions |= (int)SystemUiFlags.ImmersiveSticky;
Window.DecorView.SystemUiVisibility =
(StatusBarVisibility)uiOptions;
}
If you are using Xamarin Forms 3.x try this in the constructor
SetValue(NavigationPage.HasNavigationBarProperty, false);
InitializeComponent();
After updating the MvvmCross nuget packages(to 8.0.2) and Xamarin Forms neget packages (to 5.0.0), I need to put this option explicitly.
put NavigationPage.HasNavigationBar="False" on your xaml ComtentPage
or MvxContentPage
New Here! My first comment
Just too confirm that "Cedric Moore"s Answer works!
Thank you, spent hours at this and this finally worked!
At the top of your Page(Located inside "Views" folder Default)
(AboutPage.xaml) is the starting one and the one i am using for this example.
Inside the <> of ContentPage, add Shell.NavBarIsVisible="False"
Example:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourNameHere.Views.AboutPage"
xmlns:vm="clr-namespace:YourNameHere.ViewModels"
Title="{Binding Title}"
Shell.NavBarIsVisible="False">

Unable to select text in Xamarin.Forms Editor control or custom Borderless Editor using renderer

I've implemented Borderless Editor in my Xamarin.Forms application using Custom EditorRenderer. But I'm facing an issue that the editor text is not selectable at all in both cases, neither in Forms editor control nor in Rendered native editor control. My app has the functionality to let user copy paste the text in the editor while typing, like in any other text editing app. This is a basic feature in most of the apps and is by default there. But it's not working in my app. I've tried enabling it through
Control.SetTextIsSelectable(true);
but still it's not working. I've tried other things too, like:
Control.CustomSelectionActionModeCallback = new
CustomSelectionActionModeCallback();
Control.CustomInsertionActionModeCallback = new CustomInsertionActionModeCallback();
But nothing is working at all and text is not getting selected even a single word. Does anyone has any idea about this issue? How can I make the text selectable and allow default copy paste feature in custom editor?
Here's my code in Xaml:
<renderer:BorderlessEditor
Grid.Row="1"
x:Name="UserTextEditorAndroid"
BackgroundColor="{StaticResource WhiteColor}"
HeightRequest="350"
Margin="20,2"
MaxLength="1024"
IsReadOnly="{Binding Source={x:Reference LongTextTemplate}, Path=Editable, Converter={StaticResource InverseBool}}" />
And the custom render code is:
public class BorderlessEditorRenderer : EditorRenderer
{
public BorderlessEditorRenderer()
{
}
public static void Init() { }
protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
{
base.OnElementChanged(e);
if (e.OldElement == null)
{
Control.Background = null;
var layoutParams = new MarginLayoutParams(Control.LayoutParameters);
layoutParams.SetMargins(0, 0, 0, 0);
LayoutParameters = layoutParams;
Control.LayoutParameters = layoutParams;
Control.SetPadding(0, 0, 0, 0);
SetPadding(0, 0, 0, 0);
Control.SetTextIsSelectable(true);
Control.VerticalScrollBarEnabled = false;
}
}
}
Even if I use Xamarin.Forms own editor in Xaml instead of custom renderer then also it doesn't work at all. The text is still un-selectable.
I am having the same problem - but I'm not using Telerik. I'm running VS 2019 on Win 10. This is easy to repro ...
Create a new "Mobile App (Xamarin Forms)" and simply add an Editor to the MainPage.xaml file. I also put the Editor inside a ScrollView for kicks. The code below only shows a few words of text placed in the Editor, but I actually used a long paragraph from the Microsoft docs. I left that out below so as to simplify code presentation ... and avoid a mess!
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="Editor_Test.MainPage">
<StackLayout>
<!-- Place new controls here -->
<ScrollView>
<Editor Text="Visual Studio makes it easier ..."
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
</ScrollView>
</StackLayout>
</ContentPage>
I get normal behavior:
Because of the ScrollView, I can scroll the text with a finger (mouse) drag
A long press (click) selects the word pressed
A double tap (click) selects the word tapped
I get different results if I change 1 line of code in the App ctor, in App.xaml.cs, to instantiate the MainPage with a NavigationPage, like so:
public App()
{
InitializeComponent();
//MainPage = new MainPage();
MainPage = new NavigationPage(new MainPage());
}
Now the behavior changes:
A long press (click) has no effect (no selection)
A double tap (click) has no effect (no selection)
In fact there is no way at all that I can see to select text in the Editor. I don't know why this happens ... but it does. It drove me a bit mad until I realized what was causing it.
I'm using:
Xamarin Forms 4.5.0.495
Xamarin Essentials 1.3.1
Building for Android 9 (Pie)
I'm new to Android/Xamarin ... so my question is, how best to implement my own simple page navigation - ie, without using Xamarin's NavigationPage? I have a simple 3 page app I'd like to make some progress with!

Creating a "toast"

I have been trying to get similar functionality to an Android "toast" using Xamarin forms. After looking around, I found what I think is a good solution. The general approach appears to be to make a new Absolute layout, and make it appear for a set time, then disappear. While I think I generally understand what is being done, I can't seem to get it to work. Can anyone suggest how I would use this class if I want to make a toast appear in my MainPage? Should I be adding an AbsoluteLayout in the XAML file? Sorry, I'm sure this is a simple question, but I can't really figure out what to do...
Any help would be greatly appreciated!
public static class Popper
{
public async static Task Pop (string message, AbsoluteLayout attachLayout, int showforMilliseconds = 1500)
{
var container = new StackLayout
{
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
BackgroundColor = Color.FromHex ("#DDEFEFEF"),
Padding = 10
};
var label = new Label
{
Text = message,
FontAttributes = FontAttributes.Bold,
Style = (Style)Application.Current.Resources["PopupText"]
};
container.Children.Add (label);
container.Scale = 0;
container.Opacity = 0;
attachLayout.Children.Add (container, attachLayout.Bounds, AbsoluteLayoutFlags.PositionProportional);
container.ScaleTo (1.0f, 100);
container.FadeTo (1.0f, 100);
await Task.Delay (showforMilliseconds);
container.ScaleTo (0.0f, 250);
await container.FadeTo (0.0f, 250);
attachLayout.Children.Remove (container);
}
}
On Android you don't have to reinvent the wheel since Toast exists natively. On other platforms there is no such thing like Toast, therefor there is no silver-bullet solution here. This problem have been solved by multiple people in multiple ways, thats why I left a comment that your question might be a duplicate of existing thread with multiple examples.
Now about your idea. Your implementation is working, however it will show Toast only on an AbsoluteLayout. Why to set such a restriction? If you will recheck the link I shared in comments you will find a more appropriate and elegant solutions.
I can't seem to get it to work.
All you need is a an AbsoluteLayout on your page so you could call your method:
await Popper.Pop("Hello world", referenceToYourAbsoluteLayout, 5000);
If you still for some reason want to stick to this exact solution, maybe it will make sense to have an extension method instead. However this solution just does not make sense for the average user.
P.S: Once again, please check the existing thread for more information and details.
P.S.S: Usage example of your code snippet
<!-- XXXPage.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"
xmlns:local="clr-namespace:XXX"
x:Class="XXX.XXXPage">
<AbstractLayout x:name="myLayout />
</ContentPage>
// XXXPage.xaml.cs
public partial class XXXPage : ContentPage
{
public Test999Page()
{
InitializeComponent();
}
async protected override void OnAppearing()
{
base.OnAppearing();
await Popper.Pop("Hello world", myLayout, 5000);
}
}

Android TV: Disable collapsing on info_field on ImageCardView

I'm working with Android TV for the first time and I'm learning to use Leanback by modifying the example tv app that is provided.
The issue I'm having is that when I press left on the first item in the lists the navigation drawer opens and focus goes to the headers in the navigation drawer. When this happens, the info_field view in the ImageCardViews collapse behind the image.
What happens: The info field on the ImageCardView hides when I open the navigation drawer.
What I want to Happen: The info field remains visible when I open the navigation drawer.
I'm sure there's a way to do this because I've seen it in some Android TV apps, like Twitch. What's the best way to have the info_field visible when the navigation drawer is open?
I've worked out how to do it. In the CardPresenter, in onCreateViewHolder, when creating the ImageCardView I've overridden the BaseCardView method, setActivated(boolean activated) to always pass 'true' into it's super. And then call setActivated so that it's activated from the beginning. Like this:
#Override
public ViewHolder onCreateViewHolder(ViewGroup parent) {
ImageCardView cardView = new ImageCardView(parent.getContext()) {
#Override
public void setActivated(boolean activated) {
super.setActivated(true);
}
#Override
public void setSelected(boolean selected) {
updateCardBackgroundColor(this, selected);
super.setSelected(selected);
}
};
cardView.setActivated(true);
cardView.setFocusable(true);
cardView.setFocusableInTouchMode(true);
return new ViewHolder(cardView)
}
So that did the trick for me. The ImageCardView never collapses.
I think if you look at this SO post you'll get most of the way there. The info view hides due to what leanback calls "expanding".
Try just calling enableMainFragmentScaling(false); in your BrowseFragment and see if that does what you want. If it doesn't feel like exactly what you want, refer to the post I linked to.
Additionally, if you've tried what I recommend in the linked SO post, you could also call the API on the BaseCardView setInfoVisibility() and pass it CARD_REGION_VISIBLE_ALWAYS. This just requires calling on a reference to your card which shouldn't need an override of the Presenter or Card.

Need help to prepare Main Home Page for WPF application having vertical menu

Hii,
I am creating a WPF aplication. My home page will look like the one I have shown in the image.
In which i will have following componenents:
1. Topbar
2. Left bar - slide down menu like accordion which will slide down on selection if it has any submenu items otherwise on selection it will show related form.
3. Main panel - in which i will open my child forms
4. Bottom bar.
I would prefer if i get already implemented application that i can reuse in my application, as I think this form is gonna take hell lot of time. And Also as I am new to WPF, I would love to have some guidance about following points
How to make a slide down accordion like menu in WPF, which are also supposed to have submenu in it. ex. Report menu - will have list of all reports in it, which will be displayed when you click on the reports menu. How can I accomplish this in WPF>
How to open child form in right side panel? What controls/components should I use in my form to host child forms?
Any sample applications, web references, or already implemented code will be of great help as I have very strict deadline and dont afford to spend much time in exploring.
Abandon full accordion functionality
If you can live without a full accordion, you could easily accomplish something similar to what you want by using a TabControl, with alternate layout (TabStripPlacement="Left").
See this question (the same as in my comments): Create Tabbed Sidebar with sections WPF
Existing Library
There are existing WPF control libraries with accordions:
WPF Toolkit
Telerik Rad controls - http://www.telerik.com/products/wpf.aspx (or silverlight/asp.net MVC, etc)
Many others, most of them for money...
DIY
You can try using a TreeView to implement your accordion, too. You just need a few tricks up your sleeve to accomplish this:
First, you need to hide the tree-view buttons. They will mess up what we're trying to accomplish. See this question - Treeview hide [+] [-] buttons
Second, you want to ensure that the IsExpanded property is set to true if a TreeViewItem or one of its children is selected, and set to false otherwise. You can do this with a IMultiValueConverter combined with a Style for TreeViewItem.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1">
<!-- ... -->
<TreeView>
<TreeView.Resources>
<local:SelectedItemToIsChildConverter x:Key="isChildConverter" />
<Style TargetType="{x:Type TreeViewItem}">
<Style.Setters>
<Setter Property="IsExpanded">
<Setter.Value>
<MultiBinding Converter="{StaticResource isChildConverter}">
<Binding Path="SelectedItem"
RelativeSource="{RelativeSource AncestorType={x:Type TreeView}}" />
<Binding RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</TreeView.Resources>
<!-- Children here, or set ItemsSource property via databinding -->
</TreeView>
Here's the code for the converter, in separate CS file:
public class SelectedItemToIsChildConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
TreeViewItem selectedItem = values.Length > 0 ? values[0] as TreeViewItem : null;
TreeViewItem targetItem = values.Length > 1 ? values[1] as TreeViewItem : null;
if (targetItem == null)
return false;
TreeViewItem currentItem = selectedItem;
while (currentItem != null)
{
if (currentItem == targetItem)
return true;
currentItem = currentItem.Parent as TreeViewItem;
}
return false;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
After this, you would have to style it to make it look nice, and support animation.
Once this is all done, use a grid to split up your UI. Use data binding to show content on your main UI area, based off the selected tree view item.
Edit:
Actually, a tree view is a poor base for an accordion. I searched a bit for details on accordion controls, and it turns out that they tend to only have one level of hierarchy.
With this description in mind, it may be easier to use a DataGrid, and take advantage of the RowDetails to expand your accordion view.
Here's a brief tutorial: http://www.wpftutorial.net/DataGrid.html#rowDetails
Just make sure most of the data grid features are disabled.

Resources