I have been struggled with customizing a tabbed page for long time.
I need to move the hamburger menu icon to next by tab menu and disable the title name of tabbed page ("Home") (In iOS, bottom tabbed to top tabbed)
I guess I should use some custom renderer, but I couldn't find website and documents dealing with my case.
Please check it out and Help me. :blush:
My pages hierarchy:
Master/DetailPage -> NavigationPage(in Detail) -> Tabbed Page -> Content Page
As Is Image
To Do Image
If just want to remove the title in Android,Maybe the way can help you:
In AndroidManifest.xml file,add the theme property
<application android:label="xxxxx"
android:theme="#style/NoTitle"/>
</application>
And in Resources/values/styles.xml add the NoTitle style
<style name="NoTitle">
<item name="android:windowNoTitle">true</item>
</style>
Also, the same other way you also can try,in Resources/values/styles.xml find taht
<style name="MainTheme" parent="MainTheme.Base">
and add this item,
<style name="MainTheme" parent="MainTheme.Base">
<item name="android:windowNoTitle">true</item>
</style>
In native android,this way can work.Hope this way can help you.
Related
Here it reads http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Picker that the useSpinner property is deprecated. How do I use the picker properly then?
When I use the picker in Android without the useSpinner property it does not show up (left picker). When I click on the picker (green border) the values are showing up and it works properly.
With useSpinner set to true, it shows up properly (right). see screenshot.
Visibility of the picker is initially in the .xml set to false. When the user clicks on corresponding labels, the picker becomes visible. This works fine in iOS.
Actually, this is not any wrong behaviour. The red-border picker is outdated and you will hardly see it in any app, even native ones.
The standard picker is the left one which initially shows the selected value or the first value as default. As far as I know, you cannot directly change the text-color of left picker through .tss files.
Instead you can use custom themes and use it for that window which contains pickers.
Here is a quick example of how you can apply themes to pickers and other elements.
Save this xml code in a file (name it anything, let's say theme.xml).
Put this file at below location (create folders if doesn't exist).
Your_Project_Folder -> app -> platform -> android -> res -> values -> theme.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="PickerTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<!-- Activate this for Spinners/Plain Pickers in selected/popup state -->
<!-- <item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item> -->
<!-- Override Date Dialog -->
<item name="android:datePickerDialogTheme">#style/MyDatePickerDialogTheme</item>
<!-- Override Time Dialog -->
<item name="android:timePickerDialogTheme">#style/MyTimePickerDialogTheme</item>
</style>
<!-- Use this style for Spinners/Plain Pickers in default state -->
<style name="SpinnerItem">
<item name="android:textColor">#000000</item>
</style>
<style name="SpinnerDropDownItem">
<item name="android:textColor">#color/primary_dark</item>
<item name="android:background">#color/accent</item>
</style>
<style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
<item name="colorAccent">#color/primary</item>
<item name="android:textColorSecondary">#000000</item>
</style>
<style name="MyTimePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
<item name="colorAccent">#color/primary</item>
<item name="android:textColorSecondary">#000000</item>
</style>
</resources>
Now, you can use this theme either globally for all windows, or for particular window.
1 - Using theme for whole app, use this in tiapp.xml file.
<android xmlns:android="http://schemas.android.com/apk/res/android">
<manifest>
<application android:theme="#style/PickerTheme">
....
</application>
</manifest>
</android>
2 - Using theme in .tss file
"Window[platform=android]": {
theme : 'PickerTheme',
backgroundColor : 'white',
windowSoftInputMode : Ti.UI.Android.SOFT_INPUT_STATE_ALWAYS_HIDDEN | Titanium.UI.Android.SOFT_INPUT_ADJUST_RESIZE
}
I have been trying to change the text of the back button in Xamarin.Forms without luck.
I tried already this code with no luck:
NavigationPage.SetBackButtonTitle(this, "");
I'm using a MasterDetailPage.
I tried to add the code into the constructor of the XAML cs file.
Libraries used: PRISM 6.2.0, Xamarin Forms 2.3.1.114
Any suggestion or idea?
Thanks in advance
Due to the topic:
One of the things that is a little bit unintuitive about this API is that you are setting the title for the back button that shows up when this page is the one that you are going back to. For example, you are trying to set the title to "Home". That means you should be calling this method on the Page that represents the "home" page, not the page that is visible when the back button that says "Home" is showing.
So, if you are navigating from Page1 to Page2, you should set NavigationPage.SetBackButtonTitle(this, "") in constructor of Page1 and on Page2 you will see the empty title of back button.
You have to set the Backbutton title of your previous page as string.Empty. By default it's the title of the previous page on the navigation stack that is shown as the back button text.
Also Android does not support this property.
You can also do it from the Code Behind of the current xaml page
public TodoPage()
{
InitializeComponent();
NavigationPage.SetBackButtonTitle(this, "Back");
}
NB: It has to be done on the previous page you want to set.
e.g. Page A has to have the code if you want Page B to show "Back" title.
Belated answer but maybe someone will find this useful in the future… Anyhow, if you wish to get rid of the back button title from XAML, you can either add NavigationPage.BackButtonTitle="" for any ContentPage that should have the title removed or you can define new ContentPage style in your App.xaml file like this:
<Style x:Key="ContentPageStyle" TargetType="ContentPage">
<Setter Property="BackgroundColor" Value="White" /><!-- just an example of other things that can be in here -->
<Setter Property="NavigationPage.BackButtonTitle" Value="" />
</Style>
I was, however, unable to turn this into an implicit global style that would get applied automatically without the need to specify Style="{StaticResource ContentPageStyle}" for each ContentPage – I'm not sure why that one doesn't work.
You can set the attribute NavigationPage.BackButtonTitle on ContentPage
For example:
<?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"
xmlns:local="clr-namespace:T3R"
mc:Ignorable="d"
Title="Title of Page"
NavigationPage.BackButtonTitle="Cancel"
x:Class="T3R.MainPage">
Remember the following:
I understand this only works on iOS
For any given page, the back button title is set by the page that presents it. This way, the button label can vary with respect to the page that precedes it on the navigation stack (of which there can be many).
You can set your back button text in XAML as follows (before ContentPage.Content):
<NavigationPage.TitleView>
<Label Text="{Binding PageTitle}" HorizontalOptions="Center"/>
</NavigationPage.TitleView>
I have a Windows Phone 7 app/game that needs to use a custom font.
Example:
Set in the page properties:
FontFamily=".\Fonts\FontFileName.ttf#FontName"
or directly in the TextBlock or Button Control.
It becomes messy when a UserControl is involved as I need to set UserControl.FontFamily attribute/property.
Is there a place where I can set it once and it applies to all the controls in my Project or VisualTree?
You can set the font family of all the controls by using the App.Resources by styling implicitly as,
<Application.Resources>
<ResourceDictionary>
<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="Give your font name here" />
</Style>
<Style TargetType="TextBox">
<Setter Property="FontFamily" Value="Give your font name here" />
</Style>
--------
--------
Similarly set the style for all the controls you have used in your app
--------
--------
</ResourceDictionary>
</Application.Resources>
Set the style for all the controls,whatever you are using in your app.
You should use Blend to create a copy of the default templates of the controls:
Right click on the control you want to template (example: Button) and select "Edit template" -> "Edit a copy".
In the popup, choose "Apply to all" and "Define in Application" in order to apply this template by default on every occurrence of this control.
Edit the template to change the Setter property of FontFamily to the desired value.
Repeat these steps to every type of control where you want your custom font.
For the TextBlock control, you can't edit the Template, so you'll have to use Styles (same idea).
I'm using XUL to write my firefox toolbar. I use that xul code to do simple label button:
<?xml version="1.0"?>
<overlay id="Sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><script type="application/x-javascript" src="chrome://sample/content/sample.js" />
<toolbox id="toolbox">
<toolbar id="Sample" toolbarname="Sample" >
<label value="Lable Button "/>
</toolbar>
</toolbox>
</overlay>
My question is how to add logo image, image button and button menu...also how to add submenu. Please somebody submit a quick sample of code, so I will understand better.
What you have there isn't a button - it is a static label.
To add a logo use image tag (see example in the documentation).
To add an image button use toolbarbutton tag (see example in the documentation).
To add a submenu use toolbarbutton tag with type="menu" and put a menupopup tag inside (again, there is an example in the documentation).
Note: You can use src attribute to specify the image source for an image element and image attribute to specify the image source for a toolbarbutton element. However, it is preferable to set the images in CSS, you can use list-style-image property for that:
#myToolbarButton
{
list-style-image: url(chrome://myextension/skin/toolbar.png);
}
I'm currently building my first Firefox extension, and am having a little difficulty with one piece of functionality. I'd like to open a new browser tab in response to a button click on the toolbar. The new tab should contain the contents of a webpage, together with some extra buttons.
At the moment I've created a separate xul file for the contents of the new tab:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="myapp-report-window"
title="Example 4.5.1"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript"
src="chrome://myapp/content/main.js" />
<toolbox>
<toolbar id="nav-toolbar">
<toolbarbutton label="This-is-going-to-do-some-stuff"/>
</toolbar>
</toolbox>
<iframe id="myapp-report-frame" flex="1"/>
<script type="text/javascript">
function loadPage(url){
document.getElementById('myapp-report-frame').setAttribute('src',url);
}
</script>
</window>
This xul file is launched via this javascript, referenced from the main myapptoolbar.xul:
gBrowser.selectedTab = gBrowser.addTab('chrome://myapp/content/report.xul');
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
newTabBrowser.addEventListener("load",
function(){
loadPage('http://www.somedynamicallysetwebsite.com');
}, true);
The problem that I'm having is that the loadPage function is not being found, so the src attribute of the iframe is never set. I'm sure it's some silly scoping problem, but I'm very new to firefox extensions (day 2!) so any help would be much appreciated.
I am new to this myself. Actually stumbled back here because I was trying to ask another question about firefox extension but I think I might be able to help.
Um, your loadpage function is declared within newtab.xul and therefore, the function can't be called from myapptoolbar.xul. I think XUL files are HTML files with enhanced privilege and hence share similar properties. You can declare the function within an app.js and then have the both of them include the app.js file like this:-
<script type="application/x-javascript" src="chrome://app/content/app.js" />
Place it somewhere at the top, right after the there.is.only.xul line would be nice. Just do things like what you'll normally do to a HTML page.
I hope this helps. =) Good luck on your extension!
I fixed this in the end - it was a scope issue. I had to access the iframe via the GBrowser property.