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>
Related
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);
};
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.
Hi i have a weird problem.
I defined few labels and textbox for data entry purpose using xamarin.forms.
I wrapped them into scroll view so that when keyboard appears, they should scroll.
It is working fine. The control which has focus scroll to top and the keyboard appears when it get focus. but i also have couple of buttons at the bottom of my form. Now, the problem is, whenever keyboard appears, my bottom buttons are also scrolled. which looks weird. As button are for submit or cancel, it should be stay there in bottom.
following is my code:
var firstNameLabel = new Label { HorizontalOptions = LayoutOptions.Fill };
firstNameLabel.Text = "First Name";
var firstName = new Entry() { HorizontalOptions = LayoutOptions.FillAndExpand };
firstName.SetBinding (Entry.TextProperty,MyViewModel.FirstNamePropertyName);
var lastNameLabel = new Label { HorizontalOptions = LayoutOptions.Fill};
lastNameLabel.Text = "Last Name";
var lastName = new Entry() { HorizontalOptions = LayoutOptions.FillAndExpand };
lastName.SetBinding (Entry.TextProperty, MyViewModel.LastNamePropertyName);
---- other fields
Button btnSubmit = new Button
{
HorizontalOptions = LayoutOptions.Fill,
BackgroundColor = Color.FromHex("#22498a"),
TextColor = Color.White,
Text = "Submit"
};
var cancelButton = new Button { Text = Cancel", BackgroundColor = Color.FromHex("0d9c00"), TextColor = Color.White };
contactUsButton.Clicked += (object sender, EventArgs e) =>
{
// cancel operation
};
var cotrolStakeLayout = new StackLayout () {
Padding = new Thickness(Device.OnPlatform(5, 5, 5),0 , Device.OnPlatform(5, 5, 5), 0), //new Thickness(5,0,5,0),
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.Fill,
Orientation = StackOrientation.Vertical,
Children = { firstNameLabel, firstName, lastNameLabel, lastName, -- and other fields}
};
var scrollableContentLayout = new ScrollView (){
Content = cotrolStakeLayout,
Orientation = ScrollOrientation.Vertical,
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill
};
var buttonLayout = new StackLayout (){
Padding = new Thickness(Device.OnPlatform(5, 5, 5),0 , Device.OnPlatform(5, 5, 5), 0), //new Thickness(5,0,5,0),
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill,
Orientation = StackOrientation.Vertical,
Children= { btnSubmit , cancelButton }
};
var nameLayout = new StackLayout()
{
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill,
Orientation = StackOrientation.Vertical,
Children = {scrollableContentLayout,buttonLayout}
};
return nameLayout;
Any ideas what is wrong with it?
You have to change your layout to reach your target:
- Define a "Main-StackLayout"
- Create a "Button-StackLayout" for your Buttons (that should stay on top)
- Add your Buttons to the "Button-StackLayout"
- Add the "button-StackLayout to the "Main-StackLayout"
- Add the ScrollView to to "Main-StackLayout"
- Set content of the page to the "Main-StackLayout"
This should work: buttons stays on top, where (only) the ScrollView can be scrolled.
public void myTextBlock1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
StackPanel mystack = new StackPanel() { Height = 100, Width = 200 };
TextBlock myTextBlock1 = new TextBlock()
{ Text = "Text Block", Width = 350, Height = 40, FontSize = 20,
VerticalAlignment = VerticalAlignment.Center,
TextAlignment = TextAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center, };
mystack.Children.Add(myTextBlock1);
}
for (int r = 0; r < m; r++)
{
TextBlock myTextBlockr = new TextBlock()
{ Text = "Text Block", Width = 350, Height = 40, FontSize = 20,
VerticalAlignment = VerticalAlignment.Center,
TextAlignment = TextAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center };
if (r == 0)
{
myTextBlockr.Tap += new
EventHandler<GestureEventArgs> (myTextBlock1_Tap);
}
stack1.Children.Add(myTextBlockr);
myTextBlockr.Text = a[r];
}
I want to trigger an event dynamically when a text block is created.There are no errors generated but the tap (or tapped for UWP) event doesn't trigger the function.
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
int m = 3;
InitializeComponent();
for (int r = 0; r < m; r++)
{
TextBlock myTextBlock = new TextBlock()
{
Text = "Text Block",
Width = 350,
Height = 40,
FontSize = 20,
VerticalAlignment = VerticalAlignment.Center,
TextAlignment = TextAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center
};
//If tap event required for all text box
myTextBlock.Tap += myTextBlock1_Tap;
//According to your code here you have triggered tap event
//only for the first textblock
if (r == 0)
{
myTextBlock.Tap += new
EventHandler<GestureEventArgs>(myTextBlock1_Tap);
}
// Adding to the parent Stackpanel
stack1.Children.Add(myTextBlock);
myTextBlock.Text = "My textblock "+r;
}
}
public void myTextBlock1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
StackPanel mystack = new StackPanel() { Height = 100, Width = 200 };
TextBlock myTextBlock1 = new TextBlock()
{
Text = "Text Block",
Width = 350,
Height = 40,
FontSize = 20,
VerticalAlignment = VerticalAlignment.Center,
TextAlignment = TextAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center,
};
mystack.Children.Add(myTextBlock1);
// Adding to the parent Stackpanel
stack1.Children.Add(mystack);
}
}
This code is working , have executed and checked the same
I have some problems with new Metro design in Windows 8. I'm building simple e-reader app, and want to use two-column pages. So, my choice is FlipView and RichTextBlock with overflows. But after adding two pages, overflow doesn't have overflow content! So I have only three pages. But text is very large.
I have such code:
private async void CreatePages()
{
_pages = new List<UIElement>();
_pageCount = 1;
_lastOverflow = AddOnePage(null, _pageCount);
while (_lastOverflow.HasOverflowContent) //It's here!!
{
_pageCount++;
_lastOverflow = AddOnePage(_lastOverflow, _pageCount);
View.UpdateLayout();
}
for (var i = 1; i <= _pageCount; i++)
{
var scrollViewer = new ScrollViewer
{
Margin = new Thickness(10, 30, 10, 30),
HorizontalContentAlignment = HorizontalAlignment.Stretch,
ZoomMode = ZoomMode.Enabled,
VerticalScrollMode = ScrollMode.Enabled,
HorizontalScrollMode = ScrollMode.Disabled,
Name = "Scroll" + i
};
var snappedBlock = new RichTextBlock
{
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center,
TextWrapping = TextWrapping.Wrap,
IsTextSelectionEnabled = true
};
foreach (var text in new string[0])
{
var paragraph = new Paragraph();
paragraph.Inlines.Add(new Run { Text = text });
snappedBlock.Blocks.Add(paragraph);
}
scrollViewer.Content = snappedBlock;
SnappedView.Items.Add(scrollViewer);
}
}
private RichTextBlockOverflow AddOnePage(RichTextBlockOverflow lastOverflow, int pageNumber)
{
// Create a grid which represents the page
var grid = new Grid
{
Name = "Grid" + pageNumber
};
grid.ColumnDefinitions.Add(new ColumnDefinition
{
Width = new GridLength(1, GridUnitType.Star)
});
grid.ColumnDefinitions.Add(new ColumnDefinition
{
Width = new GridLength(1, GridUnitType.Star)
});
var grid1 = new Grid
{
Name = "Grid1_" + pageNumber
};
var grid2 = new Grid
{
Name = "Grid2_" + pageNumber
};
grid1.SetValue(Grid.ColumnProperty, 0);
grid2.SetValue(Grid.ColumnProperty, 1);
grid.Children.Add(grid1);
grid.Children.Add(grid2);
View.Items.Add(grid);
// If lastRTBOAdded is null then we know we are creating the first page.
var isFirstPage = lastOverflow == null;
RichTextBlockOverflow richTextBlockOverflow = null;
if (isFirstPage)
{
var overflow = new RichTextBlockOverflow
{
Margin = new Thickness(20, 30, 70, 30),
Name = "SecondBlock" + pageNumber,
OverflowContentTarget = new RichTextBlockOverflow(),
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center
};
overflow.SetValue(Grid.ColumnProperty, 1);
_textBlock = new RichTextBlock
{
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center,
Margin = new Thickness(70, 30, 20, 30),
TextWrapping = TextWrapping.Wrap,
IsTextSelectionEnabled = true,
Name = "FirstBlock" + pageNumber,
OverflowContentTarget = overflow
};
_textBlock.SetValue(Grid.ColumnProperty, 0);
foreach (var text in _content.Trim('\n', ' ', '\t').Split('\n'))
{
var paragraph = new Paragraph();
paragraph.Inlines.Add(new Run { Text = text });
_textBlock.Blocks.Add(paragraph);
}
grid1.Children.Add(_textBlock);
grid2.Children.Add(overflow);
_textBlock.Measure(grid1.RenderSize);
overflow.Measure(grid2.RenderSize);
_pages.Add(grid);
richTextBlockOverflow = overflow;
}
else
{
// This is not the first page so the first element on this page has to be a
// RichTextBoxOverflow that links to the last RichTextBlockOverflow added to
// the previous page.
if (lastOverflow.HasOverflowContent)
{
var overflowSecond = new RichTextBlockOverflow
{
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center,
Margin = new Thickness(20, 30, 70, 30),
Name = "SecondBlock" + pageNumber
};
overflowSecond.SetValue(Grid.ColumnProperty, 1);
var overflowFirst = new RichTextBlockOverflow
{
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center,
Margin = new Thickness(70, 30, 20, 30),
Name = "FirstBlock" + pageNumber,
OverflowContentTarget = overflowSecond
};
overflowFirst.SetValue(Grid.ColumnProperty, 0);
lastOverflow.OverflowContentTarget = overflowFirst;
grid1.Children.Add(overflowFirst);
grid2.Children.Add(overflowSecond);
overflowFirst.Measure(grid1.RenderSize);
overflowSecond.Measure(grid2.RenderSize);
_pages.Add(overflowFirst);
_pages.Add(overflowSecond);
richTextBlockOverflow = overflowSecond;
}
}
_pages.Clear();
LayoutRoot.UpdateLayout();
return richTextBlockOverflow;
}
In LoadState() I call CreatePages() method.
My XAML:
<Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootStyle}" Background="#FFDEDEDE">
<FlipView x:Name="View" HorizontalAlignment="Stretch" VerticalAlignment="Center" Foreground="Black" SelectionChanged="ViewOnSelectionChanged" FontSize="18" >
</FlipView>
<FlipView x:Name="SnappedView" HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="Black" SelectionChanged="SnappedViewOnSelectionChanged" FontSize="12" Visibility="Collapsed">
</FlipView>
<ProgressBar x:Name="LoadProgressBar" HorizontalAlignment="Stretch" VerticalAlignment="Top" IsIndeterminate="True" Foreground="#007ACC"/>
</Grid>
Thanks to all! I hope, that someone knows, how to solve this problem..