We Keep Coding

How to apply Border to Button control programmatically using C#

I am creating a Button control using C# as mentioned below in the code. I have created the rounded border for the button style. I am not able to see any property to assign the Border in the button.
var button = new System.Windows.Controls.Button
{
Name = "BtnOk",
Content = "OK",
Height = 20,
Width = 60,
HorizontalAlignment = HorizontalAlignment.Center,
Background = Brushes.DarkGray,
Foreground = Brushes.WhiteSmoke,
Margin = new Thickness(0,0,0,5)
};
Border border = new Border();
border.CornerRadius = new CornerRadius(3);
How can I apply Border in button programatically?

a button cannot aplly a border. a border can decorate a button:
border.Child = button;
usually Buttons already have a Border inside their Template (ControlTemplate). that Border isn't easily accessible - there is no special property of Button class, but that border can be found in visual tree after template was loaded.
additionally that Border can be customized by default style if you put it in Button.Resources. change CorderRadius using Style.Setter:
var button = new System.Windows.Controls.Button
{
Name = "BtnOk",
Content = "OK",
Height = 20,
Width = 60,
HorizontalAlignment = HorizontalAlignment.Center,
Background = Brushes.DarkGray,
Foreground = Brushes.WhiteSmoke,
Margin = new Thickness(0, 0, 0, 5)
};
var style = new Style
{
TargetType = typeof(Border),
Setters = { new Setter { Property = Border.CornerRadiusProperty, Value = new CornerRadius(3) } }
};
button.Resources.Add(style.TargetType, style);
or using object/collection initializers:
var button = new System.Windows.Controls.Button
{
Name = "BtnOk",
Content = "OK",
Height = 20,
Width = 60,
HorizontalAlignment = HorizontalAlignment.Center,
Background = Brushes.DarkGray,
Foreground = Brushes.WhiteSmoke,
Margin = new Thickness(0, 0, 0, 5),
Resources =
{
{
typeof(Border), new Style
{
TargetType = typeof(Border),
Setters =
{
new Setter { Property = Border.CornerRadiusProperty, Value = new CornerRadius(13) }
}
}
}
}
};
if many buttons should have different CornerRadius, changing Button's Template can be a solution. Change template and set CornerRadius as attached dependency property, like shown in this post: Set a property of a nested element in an WPF style

There is indeed a Border element in the default ControlTemplate for the Button but the easiest way to set the CornerRadius property of it, without having to define a custom template, is to wait until the Button has been loaded and then get a reference to it. Try this:
var button = new System.Windows.Controls.Button
{
Name = "BtnOk",
Content = "OK",
Height = 20,
Width = 60,
HorizontalAlignment = HorizontalAlignment.Center,
Background = Brushes.DarkGray,
Foreground = Brushes.WhiteSmoke,
Margin = new Thickness(0, 0, 0, 5)
};
button.Loaded += (ss, ee) =>
{
Border border = button.Template.FindName("border", button) as Border;
if (border != null)
border.CornerRadius = new CornerRadius(3);
};

Entry control expands beyond StackLayout container

I'm using the following (test) code to dynamically create a Page Content. I'm expecting the Entry control to stay within the StackLayout bounds and clip its large Text value. Somehow this doesn't work like I want.
What am I doing wrong here?
public MyPage() {
InitializeComponent();
var stackMain = new StackLayout() {
Orientation = StackOrientation.Vertical,
Spacing = 2,
BackgroundColor = Color.Yellow
};
Content = stackMain;
Padding = new Thickness(15, Device.OnPlatform(25, 5, 5), 15, 10);
var label = new Label() {
Text = "Test:"
};
stackMain.Children.Add(label);
var stackEntry = new StackLayout() {
Orientation = StackOrientation.Horizontal
};
stackMain.Children.Add(stackEntry);
var entry = new Entry() {
Text = "Blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
IsEnabled = false,
HorizontalOptions = LayoutOptions.FillAndExpand
};
stackEntry.Children.Add(entry);
var button = new Button() {
Text = "Click me"
};
stackEntry.Children.Add(button);
}

What you need is an editor, Entries are one line only, the code below is tested and it fixes the Height by the size of the text:
public class App : Application
{
public App()
{
// The root page of your application
var content = new ContentPage
{
Padding = new Thickness(15, Device.OnPlatform(25, 5, 5), 15, 10),
Title = "test",
Content = new StackLayout
{
Spacing = 2,
BackgroundColor = Color.Yellow,
Children = {
new Label {
Text = "Test:"
},
new Editor {
Text = "Blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
IsEnabled = false,
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill
},
}
}
};
MainPage = new NavigationPage(content);
}
}
Hope this helps.

I just solved the same problem on an editor control!
The problem is here Orientation = StackOrientation.Horizontal,
you need to set orientation as StackOrientation.Vertical and it will wrap properly.
Note that I'm using Editor instead of Entry.

xamarin forms: swipe to delete

How can I add Swipe to delete in my note list app.I am using xamarin forms. I have searched in xamarin forms samples but could not find it. I also tried the list view performance options with menuItem etc but I dont know how to adjust that in my code. Can anyone help me with this please?
My code is as follows:
public partial class MyPage
{
List<Note> notes;
string NotesFile {
get {
var documents = Environment.GetFolderPath (Environment.SpecialFolder.Personal);
return System.IO.Path.Combine (documents, "notes.json");
}
}
public MyPage()
{
BuildContent();
LoadNotes ();
ReloadListContents ();
AddNoteButton.Clicked += (sender, args) => {
var note = new Note("typ...");
notes.Add(note);
EditNote(note);
};
NoteListView.ItemTapped += (sender, row) =>
{
NoteListView.SelectedItem = null;
Note note = (Note)row.Item;
EditNote(note);
};
buttonDelete.Clicked += (sender, args) =>{
notes.RemoveAt(0);
DisplayAlert("Delete", "Row deleted", "OK");
};
}
}
MyPage.cs
{
public ListView NoteListView = new ListView ();
public Button AddNoteButton;
public Button buttonDelete;
private void BuildContent()
{
AddNoteButton = new Button
{
Text = "Add New Note",
TextColor = Color.White,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
buttonDelete = new Button
{
Text = "Delete Note ",
TextColor = Color.White,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
Content = new StackLayout
{
BackgroundColor = Color.Black,
Children = {
new Label {
Text = "Note Taker",
TextColor = Color.White
},
NoteListView,
AddNoteButton,
buttonDelete
}
};
}

Im responding to this question in CS code rather than XAML (My Preferred) if anyone would like the Xaml response please drop a comment below and I'll write the XAML alongside the CS.
So to complete what you have asked in Xamarin.Forms on ListView elements you must first create the ViewCell that you would like to display the data in each cell in the ListView and give it context actions. Here is an example:
public class CustomViewCell : ViewCell
{
public CustomViewCell()
{
//instantiate each element we want to use.
var image = new CircleCachedImage
{
Margin = new Thickness(20, 10, 0, 10),
WidthRequest = App.ScreenWidth * 0.15,
HeightRequest = App.ScreenWidth * 0.15,
Aspect = Aspect.AspectFill,
BorderColor = Color.FromHex(App.PrimaryColor),
BorderThickness = 2,
HorizontalOptions = LayoutOptions.Center
};
var nameLabel = new Label
{
Margin = new Thickness(20, 15, 0, 0),
FontFamily = "Lato",
FontAttributes = FontAttributes.Bold,
FontSize = 17
};
var locationLabel = new Label
{
Margin = new Thickness(20, 0, 0, 5),
FontFamily = "Lato",
FontSize = 13
};
//Create layout
var verticaLayout = new StackLayout();
var horizontalLayout = new StackLayout() { BackgroundColor = Color.White };
//set bindings
nameLabel.SetBinding(Label.TextProperty, new Binding("Name"));
locationLabel.SetBinding(Label.TextProperty, new Binding("Location"));
image.SetBinding(CircleCachedImage.SourceProperty, new Binding("Image"));
//Set properties for desired design
horizontalLayout.Orientation = StackOrientation.Horizontal;
horizontalLayout.HorizontalOptions = LayoutOptions.Fill;
image.HorizontalOptions = LayoutOptions.End;
//add views to the view hierarchy
horizontalLayout.Children.Add(image);
verticaLayout.Children.Add(nameLabel);
verticaLayout.Children.Add(locationLabel);
horizontalLayout.Children.Add(verticaLayout);
//HERE IS THE MOST IMPORTANT PART
var deleteAction = new MenuItem { Text = "Delete", IsDestructive = true }; // red background
deleteAction.Clicked += async (sender, e) => {
//Here do your deleting / calling to WebAPIs
//Now remove the item from the list. You can do this by sending an event using messaging center looks like:
//MessagingCenter.Send<TSender,string>(TSender sender, string message, string indexOfItemInListview)
};
// add to the ViewCell's ContextActions property
ContextActions.Add(deleteAction);
// add to parent view
View = horizontalLayout;
}
}
Now you must do the following to your ListView:
listView = new ListView();
lstView.ItemTemplate = new DataTemplate(typeof(CustomViewCell));
In the same Content Page that you have the ListView you must also subscirbe to the MessagingCenter listening to the same parameters as set in the custom view cell as above. Please read the link provided if you have not used the MessagingCenter before. Inside of this method you must then remove the item from the listview with the index sent to this method.
If anyone needs any further explanations drop a comment below and Ill edit this post.

UWP Template 10 create a dynamic hamburgermenu

I'm pretty noob with UWP stuff. I'm trying to create dynamic hamburger menu.
I was able to create PrimaryButtons element, and binding it in XAML worked as espected:
var loginButton = new HamburgerButtonInfo();
loginButton.ClearHistory = true;
loginButton.PageParameter = "";
loginButton.PageType = typeof(Views.Login);
var stackPanel = new StackPanel { Orientation = Orientation.Horizontal };
stackPanel.Children.Add(new SymbolIcon { Symbol = Symbol.Contact, Width = 48, Height = 48 });
stackPanel.Children.Add(new TextBlock { Text = "Login", VerticalAlignment = VerticalAlignment.Center, Margin = new Thickness(12, 0, 0, 0) });
loginButton.Content = stackPanel;
But I'd like to have a cleaner solution, so I tried to extend HamburgerButtonInfo class:
class MenuItem : HamburgerButtonInfo
{
private Symbol symbol;
private String text;
StackPanel stackpanel = new StackPanel { Orientation = Orientation.Horizontal };
TextBox textbox = new TextBox { VerticalAlignment = VerticalAlignment.Center, Margin = new Thickness(12, 0, 0, 0) };
SymbolIcon symbolicon = new SymbolIcon { Width = 48, Height = 48 };
public MenuItem():base()
{
StackPanel.Children.Add(symbolicon);
StackPanel.Children.Add(textbox);
this.Content = StackPanel;
}
public String Text
{
get { return text; }
set {
textbox.Text = value;
Set(ref text, value);
}
}
public StackPanel StackPanel
{
get { return stackpanel; }
}
public Symbol Symbol
{
get { return symbol; }
set {
symbolicon.Symbol = value;
Set(ref symbol, value);
}
}
}
Putting it all together, I expected to get the same result:
PrimaryButtons.Add(loginButton);
PrimaryButtons.Add(new MenuItem() { PageType=typeof(Views.Login), PageParameter="", ClearHistory=true, Text="Login", Symbol=Symbol.Contact });
But here's the result
Am I missing something? Is that the right approach for this scenario?

Can it be done? Absolutely.
var stackPanel = new StackPanel
{
Orientation = Orientation.Horizontal
};
stackPanel.Children.Add(new SymbolIcon
{
Width = 48,
Height = 48,
Symbol = Symbol.UnSyncFolder
});
stackPanel.Children.Add(new TextBlock
{
Margin = new Thickness(12, 0, 0, 0),
VerticalAlignment = VerticalAlignment.Center,
Text = "UnSync Folder"
});
var button = new HamburgerButtonInfo
{
Content = stackPanel,
ButtonType = HamburgerButtonInfo.ButtonTypes.Toggle,
ClearHistory = false,
PageType = typeof(Views.DetailPage)
};
MyHamburgerMenu.PrimaryButtons.Add(button);
Looks like this (I tried it in the Search sample).
It's more verbose because the XAML syntax is so compact, but you can do it in code-behind if you want to. You might just want to change visibility of an existing button if that is an option.
Best of luck!

WPF - Dynamically add button next to textbox

I am creating Label, Textbox and a button dynamically. I need Button to appear in the same line as textbox to its right.
This is the code i am using:
Label lbl = new Label()
{
Content = "Some Label",
HorizontalAlignment = HorizontalAlignment.Left,
VerticalAlignment = VerticalAlignment.Top,
HorizontalContentAlignment = HorizontalAlignment.Center,
VerticalContentAlignment = VerticalAlignment.Center,
Height = 28,
};
TextBox tb = new TextBox()
{
Text = "Some Text",
IsReadOnly = true,
};
Button btn = new Button()
{
Content = "Click Me",
HorizontalAlignment = HorizontalAlignment.Left
Margin = new Thickness(tb.ActualWidth),
};
I am assigning Button Margin to the Right of TextBox but it still appears in the next line under the textbox.
What am i doing wrong here?

You can use StackPanel to solve your problem:
StackPanel spMain = new StackPanel() { Orientation = Orientation.Vertical };
Label lbl = new Label()
{
Content = "Some Label",
HorizontalAlignment = HorizontalAlignment.Left,
VerticalAlignment = VerticalAlignment.Top,
HorizontalContentAlignment = HorizontalAlignment.Center,
VerticalContentAlignment = VerticalAlignment.Center,
Height = 28,
};
StackPanel spInner = new StackPanel() { Orientation = Orientation.Horizontal };
TextBox tb = new TextBox()
{
Text = "Some Text",
IsReadOnly = true,
};
Button btn = new Button()
{
Content = "Click Me",
HorizontalAlignment = HorizontalAlignment.Left,
Margin = new Thickness(tb.ActualWidth),
};
spInner.Children.Add(tb);
spInner.Children.Add(btn);
spMain.Children.Add(lbl);
spMain.Children.Add(spInner);
You can check following link for more information:
http://msdn.microsoft.com/en-us/library/system.windows.controls.stackpanel.orientation.aspx

It depends on what the page content that you are placing the controls on is, is it a grid or something else?
Why not also create a stackpanel which will properly contain your items in the fashion as needed.

Why don't you place all the created controls in a StackPanel with its Orientation set to Horizontal. This way they will always placed next to eachother.
var stPanel = new StackPanel { Orientation = Orientation.Horizontal };
var button = new Button() { ... }
stPanel.Children.Add(button);
//And so on
Edit: kmatyaszek was ahead of me... :)

i think it would be better if you use the Content methode from the instance of Button
private byte _count;
internal void FillbtnSubCat(Grid grid)
{
var myDefinition = new ColumnDefinition();
var myButton = new Button();
var myBlock = new TextBlock()
{
TextAlignment = TextAlignment.Center,
TextWrapping = TextWrapping.Wrap,
Text = "Some Text",
Margin = new Thickness(5, 10, 5, 10)
};
Grid.SetColumn(myButton, _count);
myButton.Margin = new Thickness(5, 10, 5, 25);
myButton.MinWidth = 30;
myButton.Content = myBlock;
myDefinition.Width = new GridLength(68);
grid.ColumnDefinitions.Add(myDefinition);
grid.Children.Add(myButton);
_count++;
}
XAML
<Grid Name="Grid1" Height="100" Width="auto">
</Grid>