Develop Reference

Controls with transparent background on top of video

I am developing a project that needs to look like the attached screenshot.
I have a WinForm with VideoPanelCtl panel on top of it. The panel's handle is passed to the instantiated VLC component/control that results in video displayed on that panel.
I also tried to put another panel on top of the VideoPanelCtl at the upper end of the video panel and make it transparent and the controls that are sitting on top of this top panel also should have transparent background as shown in attached screenshot. However, my approach did not work despite that I used a a custom panel derived from panel control with bkg repainting (see code below) The panel that I was creating in code like this simply was obscured by the video...and if I had put controls on it (buttons and labels) they probably would be obscured too...
I call this from form's Load handler of the WinForm:
private void InitTopPanel()
{
mExtendedPanelTop = new ExtendedPanel();
mExtendedPanelTop.Opacity = 50; // totally transparent
videoPanelCtl.Controls.Add(mExtendedPanelTop);
mExtendedPanelTop.BorderStyle = System.Windows.Forms.BorderStyle.Fixed3D;
mExtendedPanelTop.Dock = System.Windows.Forms.DockStyle.Top;
mExtendedPanelTop.Location = new System.Drawing.Point(0, 0);
mExtendedPanelTop.Name = "ExtendedPanelTop";
mExtendedPanelTop.Size = new System.Drawing.Size(1090, 48);
mExtendedPanelTop.TabIndex = 0;
//mExtendedPanelTop.Paint += mExtendedPanelTop_Paint;
}
public class ExtendedPanel : Panel
{
private const int WS_EX_TRANSPARENT = 0x20;
public ExtendedPanel()
{
SetStyle(ControlStyles.Opaque, true);
}
private int opacity = 50;
//[DefaultValue(50)]
public int Opacity
{
get
{
return this.opacity;
}
set
{
if (value < 0 || value > 100)
throw new ArgumentException("value must be between 0 and 100");
this.opacity = value;
}
}
protected override CreateParams CreateParams
{
get
{
CreateParams cp = base.CreateParams;
cp.ExStyle = cp.ExStyle | WS_EX_TRANSPARENT;
return cp;
}
}
protected override void OnPaint(PaintEventArgs e)
{
using (var brush = new SolidBrush(Color.FromArgb(this.opacity * 255 / 100, this.BackColor)))
{
e.Graphics.FillRectangle(brush, this.ClientRectangle);
}
base.OnPaint(e);
}
}
How do I achieve the controls on top of video that sit on transparent panel and also have transparent background?
How do I achieve semi-transparent label on top of video with text (red label background) that says "Video Connection Lost"? (see attached)

I resolved it by using WPF control that contains the Canvas and the Canvas containing MediaElement and Label (or other controls). Then setting ZIndex of Label higher to cause visibility. Thus, I get visible label on running video (within MediaElement) with Label having transparent background.

Draw method of subclassed UIView (child of another subclassed UIView) not called

I have a subclassed parent UIView object which should add another subclassed UIView. This is the UIView I want to add and where the Draw method is not called:
public class Circle : UIView
{
private UIColor color;
public Circle ()
{
this.color = UIColor.Black;
this.BackgroundColor = UIColor.Clear;
}
public Circle (UIColor color)
{
this.color = color;
this.BackgroundColor = UIColor.Clear;
}
public override void Draw (CGRect rect)
{
base.Draw (rect);
// Get the context
CGContext context = UIGraphics.GetCurrentContext ();
context.AddEllipseInRect (rect);
context.SetFillColor (color.CGColor);
context.FillPath ();
}
}
This is how I'm adding the circle:
Circle circle = new Circle (UIColor.Red);
circle.TranslatesAutoresizingMaskIntoConstraints = false;
AddSubview (circle);
AddConstraint(NSLayoutConstraint.Create(circle, NSLayoutAttribute.Left, NSLayoutRelation.Equal, line, NSLayoutAttribute.Left, 1, 10));
AddConstraint(NSLayoutConstraint.Create(circle, NSLayoutAttribute.CenterY, NSLayoutRelation.Equal, line, NSLayoutAttribute.CenterY, 1, 0));
AddConstraint(NSLayoutConstraint.Create(circle, NSLayoutAttribute.Height, NSLayoutRelation.Equal, null, NSLayoutAttribute.NoAttribute, 1, 6));
AddConstraint(NSLayoutConstraint.Create(circle, NSLayoutAttribute.Width, NSLayoutRelation.Equal, null, NSLayoutAttribute.NoAttribute, 1, 6));
This code above is again in the Draw method of the parent. The objects in the parent are drawn fine except the circle and even if I use the below code as circle it is shown correctly. So the constraints are ok.
UIView circle = new UIView() { BackgroundColor = UIColor.Red };
What I'm doing wrong? Can't I override both Draw methods (in the subclassed parent and in the subclassed circle)?
PS: I have to mention that the circle should overlaps a line. But the Draw is never called so it seems that it doesn't get a frame.

Are you aware that you are instantiating an UIView and not a Circle in this code snipped ?
UIView circle = new UIView() { BackgroundColor = UIColor.Red };
Also you shouldn't add subview in the draw method, because it will be called multiple time, in fact you should only override the Draw method with you are doing a custom draw (it´s the case of the Circle view, but not the case of the parent view).
From apple documentations:
View drawing occurs on an as-needed basis. When a view is first shown,
or when all or part of it becomes visible due to layout changes, the
system asks the view to draw its contents. For views that contain
custom content using UIKit or Core Graphics, the system calls the
view’s drawRect: method
So can you post the code snipe where you actually add the parent view? And the code of the parent view, you might have override a method and are not calling the base class method (like setNeedsDisplay or something similar) OR you are not adding the view.

Change color of navigation bar title

I'm trying to style the UINavigationBar in Xamarin with MonoTouch. In the constructor of the UIViewController I tried the following:
//this.NavigationController.NavigationBar.TintColor = UIColor.Magenta;
UINavigationBar.Appearance.TintColor = UIColor.Yellow;
But if I try to run this in the simulator there is nothing changed. Where should I place this code? How do I use a RGB color (with UIColor.FromRGB (0, 127, 14)?) Is my code correct?

My Solution:
//AppDelegate.cs
public partial class AppDelegate : UIApplicationDelegate
{
// class-level declarations
UIWindow window;
public static UIStoryboard Storyboard = UIStoryboard.FromName ("MainStoryboard", null);
public static UIViewController initialViewController;
// ...
public override bool FinishedLaunching (UIApplication app, NSDictionary options)
{
window = new UIWindow (UIScreen.MainScreen.Bounds);
initialViewController = Storyboard.InstantiateInitialViewController () as UIViewController;
UINavigationBar.Appearance.SetTitleTextAttributes (
new UITextAttributes () { TextColor = UIColor.FromRGB (0, 127, 14) });
window.RootViewController = initialViewController;
window.MakeKeyAndVisible ();
return true;
}
}

Assuming that you're developing for iOS7 you need to set BarTintColor.
UINavigationBar.Appearance.BarTintColor = UIColor.Red;
UINavigationBar.Appearance.BarTintColor = UIColor.FromRGB(0, 127, 14);
see: How to change UINavigationBar background color from the AppDelegate
Put this code in AppDelegate.cs

Try this ..
NSDictionary *textTitleOptions = [NSDictionary dictionaryWithObjectsAndKeys:[UIColor darkGrayColor], UITextAttributeTextColor, [UIColor whiteColor], UITextAttributeTextShadowColor, nil];
[[UINavigationBar appearance] setTitleTextAttributes:textTitleOptions];
Or you can refer more from
IOS 7 Navigation Bar text and arrow color

You should specific the UIViewController, like:
viewController.navigationBar.tintColor = [UIColor yellowColor];
or in UIViewController:
self.navigationBar.tintColor = [UIColor yellowColor];

TextField Button action is not working

I created custom class LoginView.cs UIView For username and password added the loginButton.
now I added UIView Call into my LoginViewController.cs Class
When i build and run the application it shows the login box, two text fields and a button. The actions on the textfield are not working. When the textbox has focus the keyboard doesn't load
This is my custom View class for loginview.cs
using System;
using System.Drawing;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace DemoHouse
{
class LoginView : UIView
{
UIView view_Login;
UITextField txt_username;
public readonly UITextField txt_password;
public readonly UIButton btn_Login;
public LoginView (string loginView){
float frame = UIScreen.MainScreen.Bounds.Width;
Add (view_Login = new UIView (new RectangleF (20, 60,frame-40, 200)) {
BackgroundColor = UIColor.Red,
});
float subFrame = view_Login.Bounds.Width;
view_Login.AddSubview(txt_username = new UITextField (new RectangleF (20, 20, subFrame-40, 31)){
BackgroundColor = UIColor.White,
});
view_Login.AddSubview(txt_password = new UITextField (new RectangleF (20, 70, subFrame-40, 31)){
BackgroundColor = UIColor.White
});
view_Login.AddSubview (btn_Login = new UIButton (new RectangleF (20, 120, 60, 31)) {
BackgroundColor = UIColor.Blue
});
}
}
}
This is LoginViewController.cs
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace DemoHouse
{
public partial class LoginViewController : UIViewController
{
LoginView loginView;
UIScrollView scrollView;
public override void DidReceiveMemoryWarning (){
// Releases the view if it doesn't have a superview.
base.DidReceiveMemoryWarning ();
// Release any cached data, images, etc that aren't in use.
}
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
loginView = new LoginView("LoginView");
View.AddSubview (loginView);
// Perform any additional setup after loading the view, typically from a nib.
}
Let me know if something is wrong.
Is this the correct approach?
I do not want to use storyboard and xib in my application.
#All
Thanks in advance.

Might be a silly solution, but add a tap gesture to the button.
login_btn.UserInteractionEnabled = true;
login_btn.AddGestureRecognizer (new UITapGestureRecognizer(()=>{
//Action In HERE
}));

The keyboard popping up is a native functionality, so I am in awe you managed to break it. Maybe you should try not to condensate your code so much. It makes for less lines of code, but also causes readability and complexity to increase. Also, why not merge both classes? You already have a ViewController class. Try something like this:
public partial class LoginViewController : UIViewController
{
private UIScrollView scrollView;
private UITextField txt_username, txt_password;
private UIButton btn_login;
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
/*Depending on what else is on the screen, you can hard-code the
x, y, width and height, but in all other cases, use this:*/
scrollView = new UIScrollView (this.View.Bounds);
txt_username = new UITextField (new RectangleF (5, 5, 50, 25));
//Change other properties of the UITextfield to your liking here.
txt_password = new UITextField (new RectangleF (5, 35, 50, 25));
//Change other properties of the UITextfield to your liking here.
btn_login = new UIButton (new RectangleF (5, 65, 50, 25));
btn_login.TouchUpInside += Login;
//Change other properties of the UIButton to your liking here.
this.View.AddSubview (scrollView);
scrollView.AddSubviews (new UIView[]{txt_username, txt_password, btn_login});
}
void Login (object sender, eventargs e)
{
//Do something on button click
}
}
Keep in mind that with this solution, you won't actually be able to scroll down with the scrollView, because the scrollView.ContentSize is not set. You could implement a method, where the framesizes of all controls are set. You call this method when changing orientation (in the ViewDidRotate method). You can also add the scrollView.ContentSize in this method.
I hope this information helps. Good luck!

Children inherit parents appearance

I have created a simple custom panel using ContainerControl as my base. I've added custom properties to create borders and gradient backgrounds. If I override OnPaint and OnPaintBackground all child controls of the parent inherit the gradient and border styles. As a work around I have used the parents BackgroundImage property which works fine but has a few random quirks. There has to be a better way of approaching this issue but I have found no solution. Are there any Window API functions via Interop or other C# methods to fix this? If so please provide an example.
EDIT! Here is the style being copied (ugly example but makes the point):
EDIT 2! Here is a simple hard-coded ContainerControl without all the properties, designer attributes, etc.
public class Container : ContainerControl
{
protected override void OnPaintBackground( PaintEventArgs e )
{
using ( var brush = new LinearGradientBrush( e.ClipRectangle, Color.Red, Color.Blue, LinearGradientMode.Vertical ) )
{
e.Graphics.FillRectangle( brush, e.ClipRectangle );
}
}
}

If a Label control is created with its BackColor property set to Color.Transparent, it will end up calling its parent's OnPaintBackground() implementation.
If you modify Jon's example like this:
var label = new Label {
Text = "Label",
Location = new Point(20, 50),
BackColor = Color.Transparent
};
Then you will reproduce the issue.
There is an easy workaround, however. The problem comes from the way you're creating the linear gradient brush. Since you're passing e.ClipRectangle to its constructor, the shape of the gradient will vary depending on the control being rendered (container or label). On the other hand, if you pass the ClientRectangle of the container, then the gradient will always have the same shape and the result should be what you're looking for:
protected override void OnPaintBackground(PaintEventArgs e)
{
using (var brush = new LinearGradientBrush(ClientRectangle,
Color.Red, Color.Blue, LinearGradientMode.Vertical)) {
e.Graphics.FillRectangle(brush, e.ClipRectangle);
}
}
The result is:

Initialize the properties on control create/load
Then "INVALIDATE" the control to force a redraw of the control

I can't reproduce this simply on my Windows 7 machine - which suggests it may be one of the properties you've set in the designer. Short but complete program:
using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
public class GradientContainer : ContainerControl
{
protected override void OnPaintBackground(PaintEventArgs e)
{
using (var brush = new LinearGradientBrush(e.ClipRectangle,
Color.Red, Color.Blue, LinearGradientMode.Vertical))
{
e.Graphics.FillRectangle(brush, e.ClipRectangle);
}
}
}
class Test
{
static void Main()
{
var label = new Label {
Text = "Label",
Location = new Point(20, 50)
};
var container = new GradientContainer {
Size = new Size(200, 200),
Location = new Point(0, 0),
Controls = { label }
};
Form form = new Form {
Controls = { container },
Size = new Size(300, 300)
};
Application.Run(form);
}
}
And the result: