Remove tinting from iOS TabBar - c#

I have a TabBar at the bottom of my view that I dont want any tinting on. As od iOS 7, iOS automatically tints the icons blue and I dont want this to happen.
I have tried writing a custom renderer but setting the tint colour to clear simply removes the icon (should have seen that one coming).
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
TabBar.TintColor = UIKit.UIColor.Clear;
}
I want to have an image for the tab item without any tinting. How can this be done?

If anyone still looking for solution, you can go to your image assets, select all your tab icons (including Selected style), and in its options choose Render As: Original Image instead of Default.
No additional action is required, you can select any tint color in your TabView (or Image View) but it will not affect it any way. Also you can do it programmatically, but this is bit more simpler.
Although I am not sure since which iOS this function is available, it might be helpful to others with similar issue.

A bit late but I had a similar problem, here's what I did. I created a custom tab bar and set the tab bar item to use the original image (without tint). Then, I specified to use the rendering template when the icon is selected.
public partial class UICustomTabBar : UITabBar
{
public UICustomTabBar (IntPtr handle) : base (handle)
{
//Set your colors
BackgroundColor = UIColor.White;
SelectedImageTintColor = UIColor.Red;
foreach (UITabBarItem tabBarItem in Items)
{
tabBarItem.SelectedImage = tabBarItem.SelectedImage.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);
tabBarItem.Image = tabBarItem.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
}
}
}

If you want to use original icons to show on tab bar and without using selected or unselected tint color which applies by default.
Then we have to use custom renderer for iOS and for Android we have to use vectors
For detailed information you check the below link
https://www.davidbritch.com/2020/11/display-svgs-as-tabbedpage-tab-icons-in.html

You cannot.
Tab bar buttons don't display colors. Tab bar buttons use only the alpha information from the images you assign to them. You can use a segmented control instead.

Related

How to remove top bar from Xamarin.Forms (iOS)?

How can I remove the top bar from iOS project of Xamarin.Forms? Where the time and "Carrier" word are
.. or at least measure its height?
Just to be sure.. I don't want to see battery, time... I want to hide the bar in the red rectangle:
You can add this code on your AppDelegate.cs inside FinishedLaunching method after LoadApplication (new App ()); on iOS Project:
UIApplication.SharedApplication.StatusBarHidden = true;
also add this on your info.plist:
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
Go to Info.plist file in your iOS project
Click Source and Hover on one of those lines and a (+) and (-) button will show up. Click the plus button to add new key
Type in start with capital V and automatically the first choice will be View controller-based status bar appearance. Add that as the KEY.
Set the VALUE to "No"
Now you can still see the time alone
Then Click again the plus button to add new key
Now choose Status bar is initially hidden and add key "Yes"
In case of you want to hide programatically for each page. You have to create custom renderer for each Forms Page with UIViewController.
In UIViewController, you can override method like below
public partial class CustomViewController : UIViewController
{
public override bool PrefersStatusBarHidden()
{
return true;
}
}
Goto info.plist
Just check the HideStatusBar

StatusStrip label not visible when text too long

I have a StatusStrip docked to the bottom of a C# Form, it contains a label, the text in it displays fine, except when there is longer length of text then it does not display at all, and I have to widen the form and then all of a sudden it appears. Is it possible to show it in the form below:
This is a very long tex...
So that the user knows that the app is showing something and then he can widen it himself, because when it is not visible at all, it does not indicate anything to user.
You can create a custom renderer based on ToolStripProfessionalRenderer and override OnRenderItemText method and draw text with ellipsis:
public class CustomRenderer : ToolStripProfessionalRenderer
{
protected override void OnRenderItemText(ToolStripItemTextRenderEventArgs e)
{
if (e.Item is ToolStripStatusLabel)
TextRenderer.DrawText(e.Graphics, e.Text, e.TextFont,
e.TextRectangle, e.TextColor, Color.Transparent,
e.TextFormat | TextFormatFlags.EndEllipsis);
else
base.OnRenderItemText(e);
}
}
Then it's enough to set Renderer of your StatusStrip to your custom renderer:
this.statusStrip1.Renderer = new CustomRenderer();
In below example, You can see the behavior of a ToolStripStatusLabel which it's Spring property is set to true and its StatusStrip uses CustomRenderer:
If you set
ToolStripStatusLabel.Spring = True;
then you won't get the "..." but the text will be shown even when the available space is insufficient.
On Visual Studio 2017, the accepted answer didn't work for me. So here is another simple solution.
Set LayoutStyle property of StatusStrip to Flow. i.e:
statusStrip1.LayoutStyle= LayoutStyle.Flow;
And Set
`statusStrip1.AutoSize= false;`

How to change the background image of a button when clicked in code?

There is a similar question like mine here in Stackoverflow but it only explains how to change it in XAML. I want to know how can I change it in code.
Here is a image that shows how I do it in XAML using Blend:
Link for full size: https://snag.gy/4Skk4.jpg
Basically I want to change the background of a button's pressed state in C# but I can't seem to find any examples on the Internet. It must be in code because sometimes the image of the button will change therefore the button's pressed image must change as well.
The following code is just to change the image of the button and it's just the start.
image.ImageSource = new System.Windows.Media.Imaging.BitmapImage(new Uri(#"images/Button-warning-icon.png", UriKind.Relative));
image.Stretch = Stretch.Uniform;
buttonWarnings.Background = image;
If I understand you correctly, you are trying to change the appearance of the Button control in a "pressed" visual state.
I'm not near my dev computer to try it out, but to "unblock you" I'll give a direction.
First, as you noticed in your Blend screenshot, each visual state is represented with a Storyboard, which defines how various properties change. In your case, you're looking to change Background property.
The VisualStateGroups and their states are defined by the control. You can override them when you re-template the control. So, retemplate the button control using Blend with "Edit Template"->"Edit Copy".
Then, in code, you should be able to do the following:
1) Get visual states (this would not work unless you re-template the control, AFAIK)
var visualStateGroups = VisualStateManager.GetVisualStateGroups(buttonWarnings);
2) Get the VisualStateGroup of "CommonStates" from the visualStateGroups
collection
var commonStatesGroup = visualStateGroups.Find((g) => ((VisualStateGroup)g).Name == "CommonStates") as VisualStateGroup;
3) Get the "Pressed" VisualState:
var pressedVisualState = commonStatesGroup.Find((vs) => ((VisualState)vs).Name == "Pressed") as VisualState;
4) Change the storyboard of that state
pressedVisualState.Storyboard = newStoryboardWithCustomImageBackgroundProperty;
(Disclaimer: I'm not near in a computer to try it now - it's all in theory)
There are many examples to be found on the internet!
Take a look at some:
http://mobile.dzone.com/articles/windows-phone-buttonimage
http://loekvandenouweland.com/index.php/2011/01/windows-phone-image-button/
Actually its quite simple,
While in button pressed state....see part 3 in the image you uploaded above.
Above all the colors there is a row containing 5 icons.
Click on 4th icon.
it will show you option to choose image as background.

WP7 How do I change the image of a button when clicked

Right now I have a grid of six buttons, all with different images inside them. I have another set of six images, that are the original just with a gray tint to represent you selecting it. How do I change the image to the button to the new "selected image" when I select the button.
I am assuming you do it in the method:
private void button1_click(object sender, RoutedEventArgs e)
{
}
I'm having trouble figuring out what to put inside here. Normally I would think it would be something like:
button1.image = "image path";
However when making a WP7 application you cannot use the image keyword. Any advice on how to change the image of a button when clicked?
Write where you want to change the image
var brush = new ImageBrush();
brush.ImageSource = new BitmapImage(new Uri("/Images/YourImage.png",
UriKind.Relative));
btn.Background = brush;
In Silverlight (upon which the Windows Phone 7 framework is built) the Button control does not have an Image property. I presume that you have created your original buttons by placing an Image element as the child of the Button. On the assumption that you want the same behavior for a whole set of buttons, then it might make sense to use visual states instead. You coudl achieve a consistent look-and-feel by changing the opacity of the ContentPresenter, e.g. An Opacity of 0.75 for the "Normal" state and and Opacity of 1.0 for the "Selected" state.
Determing which button is the selected one would be the trickier part, but if you wrap your buttons in a ListBox then you can use the "Selected" visual state in the ItemContainerStyle.
If you want to continue with the approach that you've already taken, then given that you know that the content of the button is an Image, you could do something like the following:
private void button1_click(object sender, RoutedEventArgs e)
{
Button source = (Button)sender;
Image content = source.Content as Image;
if (null != content)
{
content.Source = new BitmapImage(new Uri("image path"));
}
}
In this approach you would, of course, also need to handle reverting the other buttons back to their "Normal" state, which the ListBox approach would handle for you.
What you're doing is a really good learning exercise - you'll learn lots about Silverlight by experimenting like this.
In addition to manually adjusting the image to match the button press state, I believe you can also achieve the effect you are looking for - that the button image becomes "gray" when pressed - you can do this using "Styles" and using "Behaviors". Take a look at posts like:
http://mstechno.wordpress.com/2009/08/28/silverlight-3-how-to-customize-a-button-with-expression-blend-3/
Windows Phone 7 (WP7) Change a button's background color on click
Some of the XAML in this might look daunting - and using Expression Blend takes some time to get used to - but you will get there. Good luck!

How to programmatically set selected Panorama item in WP7

I'm using a panorama control in a WP7 app. One of the PanoramaItems takes you to another page, which then allows you send an email through the EmailComposeTask. If you don't select to send the email and press the back button, the Panorama returns to the item you last selected. However, if you do select to send an email (and therefore leave the app), it does not return to the previously selected PanoramaItem. Instead, it returns to the first item in the Panorama. I tried keeping track of the selected index and setting it, but I got an error saying the SelectedIndex is not settable. This is confirmed on MSDN documentation http://msdn.microsoft.com/en-us/library/microsoft.phone.controls.panorama.selectedindex%28VS.92%29.aspx
Is there any way to manually set the selected index/item on a panorama? If not, is there a way for it to remember what was selected, even if the user leaves the app to compose an email?
I'm not sure if you can programmatically force an animation to another PanoramaItem, but you can change the Panorama.DefaultItem.
So you might have 3 PanoramaItem's and on the OnNavigatedTo() handler, change the default item via:
panoramaControl.DefaultItem = panoramaControl.Items[indexToSet];
This should help when you recover from a tombstone.
You could try the solution posted by Silicon Shark in this thread. It's noted to work, but only on the initial display - which shouldn't be a problem for your requirements of restoring state after tombstoning.
How to programmatically set the visible item in a Panorama control?
You can get the currently active page from the panorama's SelectedIndex property.
Unfortunately setting DefualtItem is only an approximation to solving this problem, which you may have discovered already.
Edit: Be aware that setting DefaultItem, changes which page of the panorama is the first page. It's a subtle difference, but you will see how it matters looking at the positioning of the heading and the wrap around of the background image.
Here is a solution. It does work as expected and does not rearrange your panorama, so your user interface is consistent.
pan.SetValue(Panorama.SelectedItemProperty, panoramaItem);
Panorama temp = pan;
LayoutRoot.Children.Remove(pan);
LayoutRoot.Children.Add(temp);
LayoutRoot.UpdateLayout();
this is not a perfect solution in that it does not slide nicely like panorama should, and it is probably not very efficient, but on the other hand you are not changing the default item so your user interface stays consistent.
I tested solutions listed here without success. Here is what I did that works like a charm!
PanoramaItem panItem = (PanoramaItem)panorama.Items[1];
panorama.Items.Remove(panItem);
panorama.Items.Insert(0, panItem);
You need to remove the panel from the list and re-inserting it at the desired position!
Set new selected item by
pan.SetValue(Panorama.SelectedItemProperty, pan.Items[newSelectedItem]);
However, it work only on the initial so my idea is let the panorama control re-init when we change the selected item. This is my code, just add this after Panorama.SelectedItem changing.
(pan.Items[curIndex] as PanoramaItem).Visibility = Visibility.Collapsed;
pan.SetValue(Panorama.SelectedItemProperty, pan.Items[(curIndex + 1) % pan.Items.Count]);
pan.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
(pan.Items[curIndex] as PanoramaItem).Visibility = Visibility.Visible;
But there is not transition effect now! Although, you can create your self.
It work great for me, this page also create a effect for sliding right http://xme.im/slide-or-change-panorama-selected-item-programatically
I'm using this model to change to a pivot when the device goes into landscape view, I'll probably end up extracting the current item to the application state. The panorama is a no-go in landscape orientation.
private int hub_page_index;
protected override void OnOrientationChanged(OrientationChangedEventArgs e)
{
base.OnOrientationChanged(e);
if (panorama.Visibility == Visibility.Visible)
{
hub_page_index = panorama.SelectedIndex;
}
else if (pivot.Visibility == Visibility.Visible)
{
hub_page_index = pivot.SelectedIndex;
}
if (e.Orientation == PageOrientation.Landscape
|| e.Orientation == PageOrientation.LandscapeLeft
|| e.Orientation == PageOrientation.LandscapeRight)
{
// Display Pivot in Landscape orientation
pivot.SetValue(Pivot.SelectedItemProperty, pivot.Items[panorama.SelectedIndex]);
panorama.Visibility = Visibility.Collapsed;
pivot.Visibility = Visibility.Visible;
}
else
{
// Display Panorama in Portrait orientation
panorama.SetValue(Panorama.SelectedItemProperty, panorama.Items[pivot.SelectedIndex]);
pivot.Visibility = Visibility.Collapsed;
panorama.Visibility = Visibility.Visible;
}
}

Categories

Resources