Develop Reference

Xamarin page constrution XML and code behind

I am trying to create a menu page where I need to keep a button on screen even if a scroll, like button stops at the edge of the screen, and I have this layout in XML but I needed it in code behind to add some frame dynamic. This is what I made but it's not show up the same. Any suggestions please?
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,20,0,0" />
</OnPlatform>
</Grid.Margin>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="FIXED HEADER DEMO" Margin="12" Grid.Row="0" FontSize="14" />
<Grid x:Name="ContentGrid" RowSpacing="0" ColumnSpacing="0" Grid.Row="1">
<ScrollView x:Name="TheScroll">
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition x:Name="ImageRow" Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image x:Name="BearImage" Source="bear.jpg"
Aspect="AspectFill"
Grid.Row="0" />
<Label LineBreakMode="WordWrap"
Margin="12,5,12,5"
Grid.Row="1">
Text="abc"
</Label>
</Grid>
</ScrollView>
<Label x:Name="TitleText"
Text="Bear found in the wild!"
TextColor="White"
BackgroundColor="#FF264778"
HeightRequest="40"
VerticalOptions="Start" VerticalTextAlignment="Center"
HorizontalTextAlignment="Center" />
</Grid>
</Grid>
My code behind
public void PageConstructor()
{
Grid thirdG = new Grid
{
RowDefinitions =
{
new RowDefinition { Height = new GridLength(1,GridUnitType.Auto) },
new RowDefinition { Height = new GridLength(1,GridUnitType.Star) },
},
};
var image1 = new Image
{
Source = "bear.jpg",
};
var labeltext = new Label
{
LineBreakMode = LineBreakMode.WordWrap,
Text = msg + msg2 + msg3,
};
thirdG.Children.Add(image1, 0, 0);
thirdG.Children.Add(labeltext, 0, 1);
Grid secondG = new Grid
{
};
SecondTitle= new Label { Text = "Second title text", TextColor = Color.Black };
scrollV = new ScrollView { Content = thirdG };
secondG.Children.Add(SecondTitle);
secondG.Children.AddVertical(scrollV);
Grid firstG = new Grid
{
RowDefinitions =
{
new RowDefinition { Height = new GridLength(1,GridUnitType.Auto) },
new RowDefinition { Height = new GridLength(1,GridUnitType.Star) },
},
};
firstG.Children.Add(new Label { Text = "Title" }, 0, 0);
firstG.Children.Add(secondG, 0, 1);
Content = firstG;
}

According to your code, I find you use ScrollView in Grid, it will be covered by label TitleText, so I suggest you can put scrollview outside the grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Margin="12"
FontSize="14"
Text="FIXED HEADER DEMO" />
<ScrollView Grid.Row="1">
<Grid x:Name="ContentGrid">
<Grid.RowDefinitions>
<RowDefinition x:Name="ImageRow" Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image
x:Name="BearImage"
Grid.Row="0"
HeightRequest="50"
Source="a11.jpg"
WidthRequest="50" />
<Label
Grid.Row="1"
Margin="12,5,12,5"
LineBreakMode="WordWrap">
Text="abc"
</Label>
<Label
x:Name="TitleText"
BackgroundColor="#FF264778"
HeightRequest="40"
HorizontalTextAlignment="Center"
Text="Bear found in the wild!"
TextColor="White"
VerticalOptions="Start"
VerticalTextAlignment="Center" />
</Grid>
</ScrollView>
</Grid>
Same effect in code behind:
public Page3()
{
InitializeComponent();
var image1 = new Image
{
Source = "a11.jpg",WidthRequest=70,HeightRequest=70
};
var label1 = new Label
{
Text = "abc"
};
var label2 = new Label
{
Text = "Bear found in the wild!",HeightRequest=20,VerticalTextAlignment=TextAlignment.Center,HorizontalTextAlignment=TextAlignment.Center
};
Grid secondG = new Grid
{
RowDefinitions =
{
new RowDefinition { Height = new GridLength(1,GridUnitType.Auto) },
new RowDefinition { Height = new GridLength(1,GridUnitType.Star) },
},
};
var scrollV = new ScrollView { Content = secondG };
secondG.Children.Add(image1,0,0);
secondG.Children.Add(label1,0,1);
secondG.Children.Add(label2);
Grid firstG = new Grid
{
RowDefinitions =
{
new RowDefinition { Height = new GridLength(1,GridUnitType.Auto) },
new RowDefinition { Height = new GridLength(1,GridUnitType.Star) },
},
};
var labeltext = new Label
{
LineBreakMode = LineBreakMode.WordWrap,FontSize=14,
Text = "FIXED HEADER DEMO"
};
firstG.Children.Add(labeltext, 0, 0);
firstG.Children.Add(scrollV, 0, 1);
Content = firstG;
}
}

Grid with columns inside button in code behind c#

I'm trying to make a Grid (that contains a button and some labels) inside a button in code behind. I already did it with WPF and it works but when i try to convert it to code behind it ignores the columns.
I know that the declaration of the columns is correct because I tried it outside the button and the columns work perfectly. I don't know what to do anymore.
WPF code:
<Button HorizontalContentAlignment="Stretch" Click="OuterClick">
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Button Content="play" Grid.Column="0" Click="InnerClick"/>
<Label Content="Con calma" Grid.Column="1"/>
<Label Content="Daddy Yankee" Grid.Column="2"/>
<Label Content="Album" Grid.Column="3"/>
<Label Content="55" Grid.Column="4"/>
</Grid>
</Button>
result WPF:
Grid waitingListItemPanel = new Grid() { HorizontalAlignment = HorizontalAlignment.Stretch };
Button waitingListItemBar = new Button() { HorizontalAlignment = HorizontalAlignment.Stretch, Content = waitingListItemPanel };
waitingListItemBar.Click += OuterClick;
Button playWaitingListItemButton = new Button() { Content = "Play" };
playWaitingListItemButton.Click += InnerClick;
waitingListItemPanel.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(2, GridUnitType.Star) });
waitingListItemPanel.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(2, GridUnitType.Star) });
waitingListItemPanel.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(2, GridUnitType.Star) });
waitingListItemPanel.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(2, GridUnitType.Star) });
waitingListItemPanel.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(2, GridUnitType.Star) });
waitingListItemPanel.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(30) });
Label name = new Label() { Content = item.Name };
Label artist = new Label() { Content = item.Artist };
Label album = new Label() { Content = "Album" };
Label duration = new Label() { Content = item.Duration };
waitingListItemPanel.Children.Add(playWaitingListItemButton);
Grid.SetColumn(playWaitingListItemButton, 0);
waitingListItemPanel.Children.Add(name);
Grid.SetColumn(name, 1);
waitingListItemPanel.Children.Add(artist);
Grid.SetColumn(artist, 2);
waitingListItemPanel.Children.Add(album);
Grid.SetColumn(album, 3);
waitingListItemPanel.Children.Add(duration);
Grid.SetColumn(duration, 4);
NextUpStackPanel.Children.Add(waitingListItemBar);
result code behind:

I found out what my error is. I am setting the HorizontalAlignment = Stretch for both the grid and the button while the button actually a HorizontalContentAlignment=Stretch need.

How to programmatically maintain aspect ratio of object in wpf

I programmatically add a Border with a certain width and height to a grid. However, I want to get either one of the following:
Make the border keep aspect ratio and fill make it as big as possible inside the grid
Make the border scale whenever the grid scales down or up (so not particularily the biggest possible, more like a percentage of the grid)
At the moment this is the situation when I resize my window:
Color borderColor = (Color)ColorConverter.ConvertFromString(BorderColor);
Color backgroundColor = (Color)ColorConverter.ConvertFromString(BackgroundColor);
Border border = new Border();
border.BorderThickness = new Thickness(BorderSize);
border.CornerRadius = new CornerRadius(TopLeftCornerRadius, TopRightCornerRadius, BottomRightCornerRadius, BottomLeftCornerRadius);
border.BorderBrush = (SolidColorBrush)(new BrushConverter().ConvertFrom(BorderColor));
border.Background = (SolidColorBrush)(new BrushConverter().ConvertFrom(BackgroundColor));
border.Width = Width;
border.Height = Height;
border.Margin = new Thickness(10);
previewgrid.Children.Add(border);
The normal situation:
The scaled situation:
So I would like it to resize properly and stay inside the white rectangle. By the way, the white grid has a margin as you can see ;-)
Thanks in advance!

As lerthe61 suggested, just use a Viewbox with its Stretch property set to Uniform:
Color borderColor = (Color)ColorConverter.ConvertFromString(BorderColor);
Color backgroundColor = (Color)ColorConverter.ConvertFromString(BackgroundColor);
Border border = new Border();
border.BorderThickness = new Thickness(BorderSize);
border.CornerRadius = new CornerRadius(TopLeftCornerRadius, TopRightCornerRadius, BottomRightCornerRadius, BottomLeftCornerRadius);
border.BorderBrush = (SolidColorBrush)(new BrushConverter().ConvertFrom(BorderColor));
border.Background = (SolidColorBrush)(new BrushConverter().ConvertFrom(BackgroundColor));
border.Width = Width;
border.Height = Height;
border.Margin = new Thickness(10);
Viewbox viewBox = new Viewbox();
viewBox.Stretch = Stretch.Uniform;
viewBox.Child = border;
previewgrid.Children.Add(viewBox);
Please, note that this solution does not work if previewgrid is a Canvas.
I hope it can help you.

The simplest way:
<Grid Margin="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Border CornerRadius="50,0,0,50"
Background="Green" />
<Border CornerRadius="0"
Grid.Column="1"
Background="Green" />
<Border CornerRadius="0,50,50,0"
Grid.Column="2"
Background="Green" />
</Grid>
By C#:
myGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(50) });
myGrid.ColumnDefinitions.Add(new ColumnDefinition());
myGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(50) });
Border b1 = new Border
{
Background = new SolidColorBrush(Colors.Blue),
CornerRadius = new CornerRadius(100, 0, 0, 100)
};
Grid.SetColumn(b1, 0);
Border b2 = new Border
{
Background = new SolidColorBrush(Colors.Blue),
};
Grid.SetColumn(b2, 1);
Border b3 = new Border
{
Background = new SolidColorBrush(Colors.Blue),
CornerRadius = new CornerRadius(0, 100, 100, 0),
};
Grid.SetColumn(b3, 2);
myGrid.Children.Add(b1);
myGrid.Children.Add(b2);
myGrid.Children.Add(b3);
Normal:
Resized:
Is it good enough for you?

How to Store User Text Input in Code-Behind From XAML WPF TextBox

my question is fairly simple.
As the title states, I would like to know how to store user text entered into a WPF TextBox from XAML as a string element within the code-behind. The concept is that the user enters the text a TextBox, then, upon clicking the "Finished" button, the values in that TextBox are stored in the code-behind as string elements (which may be entered into an array).
XAML
<Window x:Class = "WpfApplication3.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local = "clr-namespace:WpfApplication3"
mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">
<Grid Background = "White" Margin="0,4,0,-4">
<Grid.RowDefinitions>
<RowDefinition Height = "*" />
<RowDefinition Height = "*" />
<RowDefinition Height = "*" />
<RowDefinition Height = "*" />
<RowDefinition Height = "*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "*" />
</Grid.ColumnDefinitions>
<Label Content = "Employee Info" FontSize = "15"
FontWeight = "Bold" Grid.Column = "0" Grid.Row = "0"/>
<StackPanel Grid.Column = "0" Orientation = "Horizontal" Margin="0,38,0,26" Grid.RowSpan="2">
<Label Content = "Name" VerticalAlignment = "Center" Width = "70"/>
<TextBox Name = "txtName" Text = "Muhammad Ali" VerticalAlignment = "Center"
Width = "200">
</TextBox>
</StackPanel>
<StackPanel Grid.Column = "0" Grid.Row = "1" Orientation = "Horizontal" Margin="0,2,0,62" Grid.RowSpan="2">
<Label Content = "ID" VerticalAlignment = "Center" Width = "70"/>
<TextBox Name = "txtID" Text = "421" VerticalAlignment = "Center"
Width = "50">
</TextBox>
</StackPanel>
<StackPanel Grid.Column = "0" Grid.Row = "1" Orientation = "Horizontal" Margin="0,32" Grid.RowSpan="2">
<Label Content = "Age" VerticalAlignment = "Center" Width = "70"/>
<TextBox Name = "txtAge" Text = "32" VerticalAlignment = "Center"
Width = "50"></TextBox>
</StackPanel>
<StackPanel Grid.Column = "0" Grid.Row = "1" Orientation = "Horizontal" Margin="0,61,0,4" Grid.RowSpan="2">
<Label Content = "Position" VerticalAlignment = "Center" Width = "70"/>
<TextBox Name = "txtPosition" Text = "Programmer" VerticalAlignment = "Center"
Width = "200"></TextBox>
</StackPanel>
<Button Click ="Button_Click" x:Name="button" Content="Finished" HorizontalAlignment="Left" Margin="172,21,0,0" Grid.Row="4" VerticalAlignment="Top" Width="237"/>
</Grid>
CODE-BEHIND
namespace WpfApplication3
{
public partial class MainWindow : Window
string EmpName = "blank";
string EmpID = "blank";
string EmpAge = "blank";
string EmpPosition = "blank";
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
txtName = EmpName; //Here's where I attempt to store the TextBox Information
txtID = EmpID;
txtAge = EmpAge;
txtPosition = EmpPosition;
}
}
}
Thanks for taking a look!

As CShark wrote, you should do some research about assignments and other basic language usage as well. Here is the click event handler:
private void button_Click(object sender, RoutedEventArgs e)
{
EmpName = txtName.Text; // Use the Text property to get the (string) value of the entered text.
EmpID = txtID.Text; // The left hand side of the assignment operator gets assigned the right hand side expression.
EmpAge = txtAge.Text;
EmpPosition = txtPosition.Text;
}
Please note that a lot of other controls store their value in the Property Content (e.g. Label)

Set minimum or maximum Height of Row of Grid in Xaml (Xamarin.Forms)

I need to set minimum height of a RowDefinition of Gridin Xamarin.Forms using Xaml or code behind. I didn't find any property like MinHeight or MaxHeight. There is only Height property for RowDefinition.
<Grid ColumnSpacing="10" Padding="20">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</Grid>

You can do this to set your MinimumHeight:
<Grid ColumnSpacing="10" Padding="20">
<Grid.RowDefinitions>
<RowDefinition Height= "Auto"/>
</Grid.RowDefinitions>
<ContentView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" MinimumHeightRequest="20">
...
</ContentView>
</Grid>
Note: The MinimumHeightRequest will chose the minimum between your requested height and your requested minimum height. Source

I solved the problem the same or similar way as Akash Amin.
In my custom control i added an empty boxview with a fixed height to set the minimum height of the row. The importent label was placed above the transparant boxview. So i did not place anything in the boxview.
I did the code in codebehind in my customcontrol.
var grid = new Grid();
grid.HorizontalOptions = LayoutOptions.Fill;
grid.VerticalOptions = LayoutOptions.Start;
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto, });
var minSizer = new BoxView();
minSizer.HeightRequest = 30;
grid.Children.Add(minSizer, 0, 0);
_label = new Label();
_label.VerticalTextAlignment = TextAlignment.Center;
_label.VerticalOptions = LayoutOptions.Center;
grid.Children.Add(_label, 0, 0);
...
(I think it is annoying that the MinimumWidthRequest and MinimumHeightRequest dont work as the most people expects them to do. In xamarin i mean.)