How do I change the color of the actionbar and get the horizontal line back?
I have a successful android app developed in native xamarin android. Now i'm trying to port it to Xamarin Forms using the xaml approach.
I've created a hello world app and added a toolbar item the contentPage. When I initially start the app, the action bar is visible with my icon, the normal teal background and there is a nice horizontal line. However, once my forms code kicks in, it displays my icon, my toolbaritem icon, but the background is black and there is no horizontal line.
I've tried NavigationPage.BackgroundColor and that had no affect. I'm thinking i'm doing something small wrong.
Here is my xaml.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage.Title> My Sample </ContentPage.Title>
<ContentPage.ToolbarItems>
<ToolbarItem Name="test" Icon="ic_action_refresh" ></ToolbarItem>
</ContentPage.ToolbarItems>
<Label Text="Hello Forms" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>
Here is my app.cs
public class App
{
public static Page GetMainPage()
{
var nav = new NavigationPage(new Splash());
nav.BackgroundColor = Color.Teal;
return nav;
}
}
I'd also like to hide the default actionbar at startup and go with a full splash screen, but I did find this thread that looks like it'll work. http://forums.xamarin.com/discussion/18290/hiding-the-status-bar-and-the-action-bar-in-android-app
This is what I have done.
in App.xaml, add following lines and it works in both iOS and Android
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="whatever color value here"/>
</Style>
I figured it out. I was using the default template in VS2013 and the Xamarin.Forms.Core library reference was version 1.0. There have been a few updates since and one of them fixed the issue. I just updated via nuget to the latest version and it started working.
I've had a lot of luck with the following method when generating a NavigationPage, with the key being the BarBackgroundColor property being the key to setting the color of the bar itself. The underlying border should still be present as well. You can also use whatever method from Color you like, not just the FromHex method.
private Page GetNavigationPage(Page innerPage){
var navigation = new NavigationPage (innerPage);
navigation.BarBackgroundColor= Color.FromHex ("#00263A");
return navigation;
}
Try to do it at App.xaml.cs
MainPage = new NavigationPage(new TrainPage());
((NavigationPage)Application.Current.MainPage).BarBackgroundColor = Color.Black;
((NavigationPage)Application.Current.MainPage).BarTextColor = Color.White;
Related
I have a Shell in Xamarin.Forms that I've set the Attached Properties (for color) for:
<Shell x:Class="Sample.MyApp.Views.MasterView"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:behavior="clr-namespace:Sample.MyApp.Behaviors"
xmlns:definitions="clr-namespace:Sample.MyApp.Definitions"
xmlns:views="clr-namespace:Sample.MyApp.Views"
Shell.BackgroundColor="{x:Static definitions:Colors.ShellBackgroundColor}"
Shell.TabBarBackgroundColor="{x:Static definitions:Colors.ShellBackgroundColor}"
Shell.TabBarForegroundColor="{x:Static definitions:Colors.ShellForegroundColor}"
Shell.TitleColor="{x:Static definitions:Colors.ShellForegroundColor}"
Shell.UnselectedColor="{x:Static definitions:Colors.BlockForegroundMutedColor}">
And this works great -- but only after I navigate somewhere else (which can sometimes be confusing). In iOS, the Shell Background is white (as is the flyout menu's icon), and in Android, it is a slight blue.
Once I navigate to another page, everything renders as it should -- no problems.
Is there something wrong with this method of setting the colors on the Shell?
public App()
{
InitializeComponent();
MainPage = new MasterView() { BindingContext = new MasterViewModel() };
}
This is the constructor for the App (re: Xamarin.Forms.Application).
Is there another method of setting Shell colors that I'm missing?
(Android, then iOS) The left side is what "initially" loads. When I navigate to any page, it gets the correct color scheme (on the right). I swap sections and then go back -- and then my color is correct.
In iOS this is even worse, because the background color is WHITE, so you cannot see any of the items in the Header.
How do i change the back button of the navigation bar on xamarin form on both iOS and android? There was text color but can't find for back button
From Xamarin.Forms version 4.6.0, you can do something like this:
NavigationPage.SetIconColor(this, Color.FromHex("#000000"));
I'm putting that after calling InitializeComponent().
I know this is an old question but #adamm answer works ,to change the Backbutton color .
You also can do this from Recources ,#Jessie Zhang gave me the solution.
<Application.Resources>
<ResourceDictionary>
<!-- Colors -->
<Color x:Key="defaultBackbuttonColor">Red</Color>
<Color x:Key="Yellow">#ffd966</Color>
</ResourceDictionary>
</Application.Resources>
And in cs after InitializeComponent();
Color color = (Color)Application.Current.Resources["defaultBackbuttonColor"];
NavigationPage.SetIconColor(this, color);
I am using an action drawer with a menu. The icons appear in black as in the following screenshot:
I am trying to change the color of these icons, pretty much the same as in the design guidelines:
However, I cannot find where to do that or which style attribute will allow me to do so.
If you're using a CircledImageView you can set the tint of the icon directly on the view using setImageTint(int tint).
If you're using a traditional ImageView you need to create a Drawable from your icon resource and apply the tint to it, and then set it to the view:
Drawable iconDrawable = mContext.getResources().getDrawable(R.drawable.icon, mContext.getTheme());
iconDrawable.setTint(mContext.getColor(R.color.bg_color, mContext.getTheme()));
iconView.setImageDrawable(iconDrawable);
EDIT: To access icons in a menu you can do something like this when it's created:
for(int i = 0; i < menu.size(); i++) {
Drawable iconDrawable = menu.getItem(i).getIcon();
iconDrawable.setTint(mContext.getColor(R.color.bg_color, mContext.getTheme()));
}
They changed the layout for the Action Drawer items without giving an option to change the color/disable it.
v23/action_drawer_item_view.xml
<ImageView
android:id="#+id/wearable_support_action_drawer_item_icon"
android:layout_width="#dimen/action_drawer_item_icon_size"
android:layout_height="#dimen/action_drawer_item_icon_size"
android:layout_gravity="center_vertical"
android:background="#drawable/action_item_icon_background"
**android:tint="?android:attr/colorBackground"**
android:padding="#dimen/action_drawer_item_icon_padding"
android:scaleType="fitCenter"
tools:ignore="ContentDescription" />
Since there's no access to the adapter, it's not possible change the color.
I have a very simple Xamarin forms app which contains a scrollview, and inside is a stacklayout.
When deployed on Windows, the mouse works correctly to scroll the scrollview with a scrollbar. However, touch/drag does not work at all to scroll the same control. Do I have to do something special to enable touch/drag to scroll? I figured this would just work.
I'm not sure even where to start troubleshooting.
I am targeting Windows 10. Other platforms optional at this point.
The structure of UI classes I have is this:
ContentPage.Content = StackLayout1
StackLayout1.Children = { StackLayout2, Scrollview }
StackLayout2 contains an entry field and two buttons
ScrollView, which is the problem, contains another StackLayout
Inside that I have some labels and some grids
Following is a simplified repro. Running in the android emulator on my (touch capable) dev machine scrolling with touch works, running in the Windows 8.1 emulator, scrolling only works with a mouse, not with touch.
public App() {
StackLayout sl = new StackLayout();
for (int i = 1; i < 20; i++) {
sl.Children.Add( new Label { Text = "Label1", FontSize = 50, HeightRequest = 100 } );
}
ScrollView sv = new ScrollView { VerticalOptions = LayoutOptions.FillAndExpand };
sv.Content = sl;
ContentPage cp = new ContentPage();
cp.Content = sv;
MainPage = cp;
}
Does Xamarin not handle Windows devices with touch, like Surface or other windows tablets? Or?
There is an overriden method from Activity which is: public boolean onTouchEvent(MotionEvent event)
This is the general method that interprets all the touch events from the whole screen.
As you know every View has its own onTouchEvent() method that you could implement in order to add some custom implementation.It appears that these touch events go from the "inside" elements to the "outside" elements. I mean parent-child relations.
So in our case, the ScrollView returns true when the touch events are a horizontal. The activity's touch event will be handled only if the ScrollView touch event is not handled by itself then you are fine. Otherwise you have to override and implement the on touch event of scroll view and in some cases you have to return false so as for the whole layout to implement it.
The solution is to update Xamarin v2.0.0.6482, which came with my VS 2015 template, to v2.1.0.6529. Updating is a bit of a pain because of this problem https://bugzilla.xamarin.com/show_bug.cgi?id=39721. Once I got that installed scrolling started working with no other changes.
Scrolling is broken in the older version, on Windows, verified by a dev on the Xamarin forums.
I'm using an HTML document to show text output in my application - this gives me the flexibility of HTML and the power of CSS, and I can publish the generated HTML as a log file openable in any browser. When new information is available, I update the HTML file and then call Refresh() on my WebBrowser control. Naturally, I want the user to see the newest information without having to manually scroll down, so I need to automatically scroll to the bottom of the document after the browser refreshes and changes have been rendered.
I have the code to scroll to the bottom:
(this.browser.Document as HTMLDocument).body.scrollIntoView(false);
The issue is that I've tried many events, and all of them fire BEFORE the web browser control has actually finished rendering the updated source, so I end up scrolling to the bottom before the new content is displayed! This is incredibly frustrating - does anyone know how to solve this problem? How can I know when the new content is COMPLETELY finished displaying so that I can scroll to the bottom of it?
EDIT: I tried enclosing a Frame inside a ScrollViewer:
<ScrollViewer x:Name="scrollBar" Grid.Row="1" Grid.Column="0">
<Frame Name="browserBox" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" NavigationUIVisibility="Hidden"/>
</ScrollViewer>
This works fine for application pages (Page class) because the Frame grows large enough to fit the entire page, causing the enclosing ScrollViewer to adjust and fire a ScrollChanged event. I was momentarily very excited, but then discovered that unfortunately, when I load an HTML file into the frame instead, the frame does NOT resize to fit the content, but rather introduces its own scroll bar, so now I've got one scroll bar inside of another, and I can't subscribe to events for the inner scroll bar. :(
OMG! I found the answer! Based on a hint I found in this post:
Wrap a frame with a scroll viewer and subscribe to the frame's ContentRendered event:
<ScrollViewer x:Name="scrollViewer">
<Frame x:Name="frame" Source="pack://siteoforigin:,,,/HTMLPage1.htm" NavigationUIVisibility="Hidden" ContentRendered="Frame_ContentRendered" />
</ScrollViewer>
On render, measure the HTML content and update the size of the frame (add a reference to .NET assembly Microsoft.mshtml):
using mshtml;
private void Frame_ContentRendered(object sender, EventArgs e)
{
HTMLDocument htmlDoc = ((this.frame.Content as WebBrowser).Document as mshtml.HTMLDocument);
if (htmlDoc != null && htmlDoc.body != null)
{
mshtml.IHTMLElement2 body = (mshtml.IHTMLElement2)htmlDoc.body;
this.frame.Width = body.scrollWidth;
this.frame.Height = body.scrollHeight;
}
this.scrollViewer.ScrollToEnd();
}
Finally, eliminate the scroll bar housed within the Frame by disabling scrolling within your HTML document itself:
<body scroll="no">
Woohoo! I'll go throw a party now. Scrolling to the bottom of an HTML doc should not have taken a week (but it did).