I've got a custom class for a button with a circular image as I'll be using it multiple times through my program. I thought it'd be pretty simple of creating class, inheriting from Button and slapping my setup into a constructor, but when I'm running the program the buttons are massive and plain (no image or text). Here's my class:
public class ImageButton : Button
{
public Button Button;
public ImageButton(string filename) : this(HorizontalAlignment.Center, VerticalAlignment.Center, filename)
{ }
public ImageButton(HorizontalAlignment hAlignment, VerticalAlignment vAlignment, string filename)
{
Button = new Button
{
Width = 35,
Height = 35,
Background = Brushes.Transparent,
HorizontalAlignment = hAlignment,
BorderBrush = Brushes.Transparent,
VerticalAlignment = vAlignment,
Content = new Image
{
Source = new BitmapImage(new Uri("pack://application:,,,/Resources/" + filename))
}
};
}
}
And here's my implementation of one of the instances
private void SetupHeaders(Grid resultGrid)
{
RowDefinition backbtn = new RowDefinition();
backbtn.Height = new GridLength(0.2, GridUnitType.Star);
resultGrid.RowDefinitions.Add(backbtn);
btn_Return = new ImageButton(HorizontalAlignment.Left, VerticalAlignment.Top, "returnicon.png");
Grid.SetRow(btn_Return, 0);
Grid.SetColumn(btn_Return, 0);
resultGrid.Children.Add(btn_Return);
}
with btn_Return being defined at the top of the class as simply
ImageButton btn_Return;
Here's an image of one of the buttons.
In you constructor you inititalize a Button with you properties and then assign it to a property. You never actually use the initialized button. You are always using ImageButton which is nothing more than an inherited button therefore you get the default behavior.
You have to change your constructor.
public ImageButton(HorizontalAlignment hAlignment, VerticalAlignment vAlignment, string filename)
{
Width = 35;
Height = 35;
Background = Brushes.Transparent;
HorizontalAlignment = hAlignment;
BorderBrush = Brushes.Transparent;
VerticalAlignment = vAlignment;
Content = new Image
{
Source = new BitmapImage(new Uri("pack://application:,,,/Resources/" + filename))
};
}
Related
I'm trying to align a image inside a button to the right. however it does not seem to do what i want it to do. i have been trying for several hours now, so i think it is time to ask here. this is my code atm.
public class DirectoryButton : Button
{
public DirectoryButton(string name, string content)
{
Name = name.Replace(" ", "");
//Content = new BitmapImage(new Uri("../Resources/folder-icon.png", UriKind.Relative)) + content;
//Content = new BitmapImage(new Uri("../Resources/folder-icon.png", UriKind.Relative));
var img = new BitmapImage(new Uri("../Resources/folder-icon.png", UriKind.Relative));
var sp = new UniformGrid
{
HorizontalAlignment = HorizontalAlignment.Stretch,
VerticalAlignment = VerticalAlignment.Stretch,
Columns = 3,
Rows = 1
};
sp.Children.Add(new Label());
sp.Children.Add(new Label { Content = content, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center });
sp.Children.Add(new Image { Source = img, HorizontalAlignment = HorizontalAlignment.Right, VerticalAlignment = VerticalAlignment.Center});
//sp.Orientation = Orientation.Horizontal;
Content = sp;
//Content = content;
Margin = new Thickness(0, 5, 0, 5);
Height = 65;
Width = 350;
FontWeight = FontWeights.Bold;
Foreground = new SolidColorBrush(Colors.Black);
Background = new SolidColorBrush(Colors.Gray);
HorizontalContentAlignment = HorizontalAlignment.Center;
VerticalAlignment = VerticalAlignment.Center;
Visibility = Visibility.Visible;
}
}
button Image
this makes the image in the button appear but it is not to the right. i cannot really do anything in the xaml since everything is created programmaticaly.
Regards,
Bjorn
Set the HorizontalContentAlignment to Stretch:
public class DirectoryButton : Button
{
public DirectoryButton(string name, string content)
{
Name = name.Replace(" ", "");
//Content = new BitmapImage(new Uri("../Resources/folder-icon.png", UriKind.Relative)) + content;
//Content = new BitmapImage(new Uri("../Resources/folder-icon.png", UriKind.Relative));
var img = new BitmapImage(new Uri("../Resources/folder-icon.png", UriKind.Relative));
var sp = new UniformGrid
{
HorizontalAlignment = HorizontalAlignment.Stretch,
VerticalAlignment = VerticalAlignment.Stretch,
Columns = 3,
Rows = 1
};
sp.Children.Add(new Label());
sp.Children.Add(new Label { Content = content, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center });
sp.Children.Add(new Image { Source = img, HorizontalAlignment = HorizontalAlignment.Right, VerticalAlignment = VerticalAlignment.Center });
//sp.Orientation = Orientation.Horizontal;
Content = sp;
//Content = content;
Margin = new Thickness(0, 5, 0, 5);
Height = 65;
Width = 350;
FontWeight = FontWeights.Bold;
Foreground = new SolidColorBrush(Colors.Black);
Background = new SolidColorBrush(Colors.Gray);
HorizontalContentAlignment = HorizontalAlignment.Stretch; //<--
VerticalAlignment = VerticalAlignment.Center;
Visibility = Visibility.Visible;
}
This should make the UniformGrid stretch to fill the entire Button and the Image will then end up to the right.
As I tried to explain in the comments above.
The code you've provide us works like it should.
You create an UniformGrid with three cells and add three childs to the grid.
Each cell of the grid will have the same size.
Your empty label will got to the left one. The next label to the center.
You will add your image to the right cell and set HorizontalAlignment = HorizontalAlignment.Right. This will align your image within his cell at the right edge. And also to the right edge of your grid.
Now you add your UniformGrid as Content to your button.
With the following line of code
HorizontalContentAlignment = HorizontalAlignment.Center;
you will center your grid within the button.
That's why your image is not at the right edge of your button.
As already suggested in my comment you can set
HorizontalContentAlignment = HorizontalAlignment.Right;
and your Image and the whole grid will move to the right edge, but this means also that your centered Label will also move to the right.
If you want to let the second Label stay within the center of the Button take the Answer provided by mm8 and use
HorizontalContentAlignment = HorizontalAlignment.Stretch;
I know this question has been asked a lot but I've tried the various solutions and can't seem to find one that works. I have a label on my storyboard titled Messages. On button click, different text appears in the label. I need to pad just this label.
I've looked at:
Adding space/padding to a UILabel,
UILabel text margin,
and Resizing a UILabel to accommodate insets.
Also not sure where in my ViewController.cs to put the code. I put it under public partial class ViewController : UIViewController but get errors.
Edit 2:
Okay, at first I did a UITextView but couldn't get vertical align to work so went back to label. This is what I have:
public partial class ViewController : UIViewController
{
public partial class PaddedUILabel : UILabel
{
private UIEdgeInsets EdgeInsets { get; set; }
public PaddedUILabel()
{
EdgeInsets = new UIEdgeInsets(0, 10, 0, 10);
}
public override void DrawText(CoreGraphics.CGRect rect)
{
base.DrawText(EdgeInsets.InsetRect(rect));
}
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
Message.Layer.BorderWidth = 1;
Message.BackgroundColor = UIColor.FromWhiteAlpha(1, 0.88f);
PaddedUILabel _paddedUILabel = Message as PaddedUILabel;
I'm still not getting any padding.
You can either use a UITextView and provide the insets directly (as mentioned in this link) which you can do either in ViewDidLoad or ViewWillAppear, or you can subclass your UILabel and override the DrawText method.
The DrawText method helps manipulate the rectangle in which the text within a label is drawn. I'd suggest you pay around with some values to get started with it.
Something like:
public partial class PaddedUILabel : UILabel
{
//Override draw text here
}
If you are using Xamarin iOS Native, give your label(for example: myLabel) the custom class from story board and retrieve the label as:
PaddedUILabel _paddedUILabel = this.myLabel as PaddedUILabel;
I'm sorry I would have given you the whole code but as of now, don't have access to a Mac environment. Let me know if you need anything else.
For vertical align in TextView follow link.
Cheers
i tried many solutions as discussed here but the actual out coming not what i wanted so i made it like that :
if (this.Padding != default(Thickness))
{
Device.BeginInvokeOnMainThread(() =>
{
if (Parent is Grid)
{
var parentAsGrid = Parent as Grid;
var index = parentAsGrid.Children.IndexOf(this);
parentAsGrid.Children.Remove(this);
Grid marginGrid = new Grid() { BackgroundColor = this.BackgroundColor, HorizontalOptions = this.HorizontalOptions, VerticalOptions = this.VerticalOptions };
var lbl = new Label() { Text = this.Text, TextColor = this.TextColor, BackgroundColor = this.BackgroundColor, HorizontalOptions = this.HorizontalOptions, VerticalOptions = this.VerticalOptions, FontSize = this.FontSize };
lbl.Margin = this.Padding;
if (!parentAsGrid.Children.Contains(this))
{
marginGrid.Children.Add(lbl);
parentAsGrid.Children.Insert(index, marginGrid);
}
}
if (Parent is StackLayout)
{
var parentAsGrid = Parent as StackLayout;
var index = parentAsGrid.Children.IndexOf(this);
parentAsGrid.Children.Remove(this);
Grid marginGrid = new Grid() { BackgroundColor = this.BackgroundColor, HorizontalOptions = this.HorizontalOptions, VerticalOptions = this.VerticalOptions };
var lbl = new Label() { Text = this.Text, TextColor = this.TextColor, BackgroundColor = this.BackgroundColor, HorizontalOptions = this.HorizontalOptions, VerticalOptions = this.VerticalOptions, FontSize = this.FontSize };
lbl.Margin = this.Padding;
if (!parentAsGrid.Children.Contains(this))
{
marginGrid.Children.Add(lbl);
parentAsGrid.Children.Insert(index, marginGrid);
}
}
});
I am trying to understand why a ScaleTransform (testing under Windows Phone 8.0) is rendering using the control's parent dimensions, instead of the control itself. I have set up a demo app that shows this behaviour, as shown below.
The dimensions and hierarchy has a reason to be, that's why I manually set the Width and Height, as it's very close to the real app.
What I'd expect is that child1 (the yellow one), which is 768x1228 and has a scale of 0.625, would render itself as if it was 480x768, but what happens is that it renders like it was 300x480 (e.g., it is rendered at 0.625% of 480, instead of 768).
Any clues?
public partial class MainPage : PhoneApplicationPage
{
private Grid root;
public MainPage()
{
InitializeComponent();
root = new Grid() {
Width = 480,
Height = 768,
HorizontalAlignment = HorizontalAlignment.Left,
VerticalAlignment = VerticalAlignment.Top,
Background = new SolidColorBrush(Colors.Blue)
};
Content = root;
Loaded += MainPage_Loaded;
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
var parent1 = new Grid {
Background = new SolidColorBrush(Colors.Red),
HorizontalAlignment = HorizontalAlignment.Left,
VerticalAlignment = VerticalAlignment.Top,
Width = 480,
Height = 768
};
root.Children.Add(parent1);
var child1 = new Grid {
Background = new SolidColorBrush(Colors.Yellow),
Width = 768,
HorizontalAlignment = HorizontalAlignment.Left,
VerticalAlignment = VerticalAlignment.Top,
Height = 1228,
RenderTransform = new ScaleTransform() {
CenterX = 0,
CenterY = 0,
ScaleX = 0.625,
ScaleY = 0.625
}
};
parent1.Children.Add(child1);
}
}
Well, looks like it's all due to the fact that the Grid component clip its child elements, as mentioned at http://wpf.2000things.com/tag/clipping. After I changed the code to have a Canvas aground my Grid, the app worked as expected.
I still find this "solution" strange, though.
I'm trying to set properties of a TreeViewItem -> StackPanel in c# like this question. It seems to make a lot of sense until I get to the part where I try to edit the Background in my Border. Borders have Background objects in them, but for the life of me I can't set a color or anything. It seems to be inconsistent because I can add Content to a Label by simply saying, Content = "Title".
Anyway, this is my code:
public static TreeViewItem childNode = new TreeViewItem() //Child Node
{
Header = new StackPanel
{
Orientation = Orientation.Horizontal,
Children =
{
new Border {
Width = 12,
Height = 14,
Background = ? //How do I set the background?
},
new Label {
Content = "Child1"
}
}
}
};
PS - I have the same problem when trying to add a BorderBrush
Thank you!
Background property accepts an Brush. Therefore, the code can set the color as follows:
MyLabel.Background = Brushes.Aquamarine;
Or this:
SolidColorBrush myBrush = new SolidColorBrush(Colors.Red);
MyLabel.Background = myBrush;
To set any color, you can use BrushConverter:
BrushConverter MyBrush = new BrushConverter();
MyLabel.Background = (Brush)MyBrush.ConvertFrom("#ABABAB");
Setting the property to the LinearGradientBrush in code:
LinearGradientBrush myBrush = new LinearGradientBrush();
myBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
myBrush.GradientStops.Add(new GradientStop(Colors.Green, 0.5));
myBrush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));
MyLabel.Background = myBrush;
For you it would look like this:
private void Window_ContentRendered(object sender, EventArgs e)
{
TreeViewItem childNode = new TreeViewItem()
{
Header = new StackPanel
{
Orientation = Orientation.Horizontal,
Children =
{
new Border
{
Width = 12,
Height = 14,
Background = Brushes.Yellow, // Set background here
},
new Label
{
Content = "Child1",
Background = Brushes.Pink, // Set background here
}
}
}
};
MyTreeView.Items.Add(childNode);
}
My problem is that the image that I am setting to my grid is not appearing, the only thing appearing is the black background, so I know the grid is working. I am a noob, and I am very confused. Thanks for the Help :)
Code:
public partial class MainWindow : Window
{
static String ImgNameMole = "C:/Users/MonAmi/Desktop/mole2.png";
public MainWindow()
{
InitializeComponent();
GridMain();
}
private void GridMain()
{
Grid grid_Main = new Grid();
MainWindow1.Content = grid_Main;
grid_Main.Height = 350;
grid_Main.Width = 525;
grid_Main.Background = Brushes.GreenYellow;
CreateImage();
}
private Image CreateImage()
{
Image Mole = new Image();
Mole.Width = 25;
Mole.Height = 25;
ImageSource MoleImage = new BitmapImage(new Uri(ImgNameMole));
Mole.Source = MoleImage;
return Mole;
}
}
Nowhere in your code you are calling CreateImage(), so:
var img = CreateImage();
Grid.SetRow(img, 0);
Grid.SetColumn(img, 0);
grid_Main.Children.Add(img);
assuming that you have added at least one row and one column to your grid.