In my app I am trying to create a grid layout dynamically but not getting expected output:
Below is the code that I tried:
Grid LayoutGrid = new Grid();
//Created Two Columns
ColumnDefinition gridCol1 = new ColumnDefinition();
ColumnDefinition gridCol2 = new ColumnDefinition();
LayoutGrid.ColumnDefinitions.Add(gridCol1);
LayoutGrid.ColumnDefinitions.Add(gridCol2);
Grid Col1Grid = new Grid();
//Create Two Rows
RowDefinition gridRow1 = new RowDefinition();
RowDefinition gridRow2 = new RowDefinition();
Col1Grid.RowDefinitions.Add(gridRow1);
Col1Grid.RowDefinitions.Add(gridRow2);
Grid.SetColumn(Col1Grid, 1);
return LayoutGrid;
The layout I am trying to create is like this:
I added some colors to be easier to understand
private Grid CreateGrid()
{
var LayoutGrid = new Grid { Background = new SolidColorBrush(Colors.Yellow) };
//Created Two Columns
LayoutGrid.ColumnDefinitions.Add(new ColumnDefinition());
LayoutGrid.ColumnDefinitions.Add(new ColumnDefinition());
//Created Two Rows
LayoutGrid.RowDefinitions.Add(new RowDefinition());
LayoutGrid.RowDefinitions.Add(new RowDefinition());
// region 1 - vertical left
var stack1 = new StackPanel {
Background = new SolidColorBrush(Colors.Red)
};
Grid.SetColumn(stack1, 0);
Grid.SetRowSpan(stack1, 2);
LayoutGrid.Children.Add(stack1);
// region 2 - top right
var stack2 = new StackPanel
{
Background = new SolidColorBrush(Colors.Green)
};
Grid.SetColumn(stack2, 1);
LayoutGrid.Children.Add(stack2);
// region 3 - bottom right
var stack3 = new StackPanel
{
Background = new SolidColorBrush(Colors.Blue)
};
Grid.SetColumn(stack3, 1);
Grid.SetRow(stack3, 1);
LayoutGrid.Children.Add(stack3);
return LayoutGrid;
}
Xaml:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Background="Red" Grid.RowSpan="2"></StackPanel>
<StackPanel Background="Blue" Grid.Column="1"></StackPanel>
<StackPanel Background="Green" Grid.Column="1" Grid.Row="1"></StackPanel>
</Grid>
Related
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.
I am trying to add BoxViews in a Grid format using 3 columns and multiple rows. I have defined the grid using xaml and the behaviour
in the c# file. What should happen is a BoxView should be created for the same number of images with 3 images per column.
Thanks,
XAML
<Grid RowSpacing="0" x:Name="scrollBarGrid">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--Where the search bar will go-->
<BoxView BackgroundColor="Aqua" Grid.Row="0"/>
<SearchBar ></SearchBar>
<!--Where the images will go-->
<BoxView BackgroundColor="Gray" Grid.Row="1"/>
<Grid x:Name="imageGrid" RowSpacing="0" Grid.Row="1">
</Grid>
</Grid>
C#
public MainPage()
{
InitializeComponent();
int colMaximum = 3;
int numberOfImages = 15;
//To add three columns
for (int i = 0; i < colMaximum; i++)
{
imageGrid.ColumnDefinitions.Add(new ColumnDefinition()
{
Width = new GridLength(120, GridUnitType.Absolute)
});
}
//To add an array of rows
imageGrid.RowDefinitions = new RowDefinitionCollection();
for (int myCount = 0; myCount <= numberOfImages / colMaximum; myCount++)
{
imageGrid.RowDefinitions.Add(new RowDefinition()
{
Height = new GridLength(120, GridUnitType.Absolute)
});
//To add a new box view for each
for (int newcol = 0; newcol <= colMaximum; newcol++)
{
for (int newrow = 0; newrow <= numberOfImages / colMaximum; newrow++)
{
imageGrid.Children.Add(new BoxView() { BackgroundColor = Color.Red });
}
}
}
}
When you add children to a grid, you have to specify the Row and Col, otherwise they will be added at 0,0.
imageGrid.Children.Add(new BoxView() { BackgroundColor = Color.Red }, newrow, newcol);
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?
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.)
I know that you can set the row height with a "*" in XAML this way:
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
but the same expression in C# returns an error:
new RowDefinition { Height = new GridLength("*", GridUnitType.Auto) },
So my question is how to set the row height of a grid to a "*" in C#?
var grid = new Grid ();
grid.RowDefinitions.Add (new RowDefinition { Height = GridLength.Auto });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
var stacklayout1 = new StackLayout { HeightRequest = 100, BackgroundColor = Color.Red };
var stacklayout2 = new StackLayout { BackgroundColor = Color.Blue };
Grid.SetRow (stacklayout2, 1);
grid.Children.Add (stacklayout1);
grid.Children.Add (stacklayout2);
MainPage = new ContentPage { Content = grid };