Suppose I define a Grid in xaml like:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
then I want to add child control to the grid in column=0, row = 1 in code behind.
How to implement it?
Quite a late response but here you go:
Grid.SetRow(yourControl, 1);
Grid.SetColumn(yourControl, 1);
Grid.SetRow(otherControl, 0);
Grid.SetColumn(otherControl, 0);
The first parameter is the control you've added to your grid. The second parameter is the column/row position you want to add it to.
Related
I'm currently using syncfusion's autocomplete, the mode is set to Token which allows me to select multiple items. As I select more items from my autocomplete, they don't appear once I have multiple selected. I'm wondering how can I get the autocompletebox's height to grow automatically.
I've set the MinimumHeightRequest to 60 and I set vertical options to EndAndExpand and it still doesn't grow, cuts off previously selecteditems.
With 1 item selected
With 2 items selected
With 3 items selected
The behaviour i'm looking for is that the height will grow to accommodate the selected items.
<autocomplete:SfAutoComplete x:Name="autoComplete"
DisplayMemberPath="Location"
MultiSelectMode="Token"
MinimumHeightRequest="60"
VerticalOptions="EndAndExpand"
HorizontalOptions="FillAndExpand"
TokensWrapMode="Wrap"
ItemPadding="20,10,0,0"
IsSelectedItemsVisibleInDropDown="false"
Watermark="Search for Location"
SelectedItem="{Binding SelectedLocation}"
DataSource="{Binding FilteredLocations}"
Text="{Binding SearchLocation, Mode=TwoWay}" >
</autocomplete:SfAutoComplete>
You can do this by nesting Grid in the outer layer like this :
<Grid Grid.Row="1"
Margin="10,0,10,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<autocomplete:SfAutoComplete>
......
</autocomplete:SfAutoComplete>
</Grid>
You can refer to this ：https://blog.syncfusion.com/post/overview-of-the-autocomplete-control-in-xamarin-forms.aspx
Something similar to this:
<Grid Background="Yellow" Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="0"/>
</Grid.RowDefinitions>
</Grid>
But this would change the whole Grid. I just want to change the background color of specific row. How?
Add another Grid inside the Grid like this:
<Grid Background="Yellow" Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="0"/>
</Grid.RowDefinitions>
<Grid Background="Blue" Grid.RowSpan="2" Grid.Column="0"/>
</Grid>
I know that We can use a view box to simulate a line in xaml
<BoxView
VerticalOptions="Fill"
HorizontalOptions="Center"
WidthRequest="1"
Color="Black"/>
That would create a vertical line, however I want to create something like:
I wonder if a grid would be enough to create something like that
How to use a viewbox to draw the vertical line from bottom to top until middle, and then use other view box to middle to right
I was thinking on using a stacklayout instead of a grid and then use
StackOrientation.Vertical and LayoutOptions.Center but I don´t know exactly how to proceed.
What would be the best or easiest way to do it?
I have created something similar that you are looking for:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Grid.RowSpan="2" BorderBrush="Black" BorderThickness="4">
</Border>
<Border Grid.Column="2" Grid.Row="2" BorderBrush="Black" BorderThickness="4">
</Border>
</Grid>
PS: Just make sure that the controls inside the first border do not cross the first column of the second row inside the grid as the second border is overlapping the first one.
I am trying to create a UI in XAML for Xamarin Forms in which I have a frame (though I assume the answer would be the same for any type of view) inside of a grid. I want the frame to use full width available to it in the grid cell that it occupies, but I want to force it to be square in shape. So, I want the width to size automatically, and have the height set to match its actual width.
Here's what I have so far:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="6*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="13*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="1"/>
<Button Grid.Row="1" Grid.Column="1"/>
<Button Grid.Row="2" Grid.Column="1"/>
<Frame Grid.Row="0" Grid.Column="3" Grid.RowSpan="3" OutlineColor="Silver" HorizontalOptions="Fill">
<Image />
</Frame>
</Grid>
Currently, the frame correctly fills the available width, but the height is about the same as the total height of the 3 buttons to the left of it combined.
I was thinking that I maybe needed to bind the frame's HeightRequest to its actual width, but I don't know if that's possible, or how to do it if it is. If not, any other options?
Since you're setting the RowSpan of the frame to 3, even if you explicitly set the frame's HeightRequest to some small value, the frame will still take up the entire grid's height. So first you have to prevent that from happening. You could do that by containing the frame inside some other view.
Now to make the frame's height and width the same as it scales, you could use the container's SizeChanged event and set the frame's height and width requests accordingly.
Also note that Frame by default has a padding of 20.
Here's the sample code for the xaml:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="6*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="13*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="1"/>
<Button Grid.Row="1" Grid.Column="1"/>
<Button Grid.Row="2" Grid.Column="1"/>
<StackLayout x:Name="frmContainer" Grid.Row="0" Grid.Column="3" Grid.RowSpan="3" BackgroundColor="Orange">
<Frame x:Name="frm" OutlineColor="Silver" VerticalOptions="Center" HorizontalOptions="Center" Padding="0" BackgroundColor="Green"/>
</StackLayout>
</Grid>
And here's the constructor in the code-behind:
InitializeComponent();
frmContainer.SizeChanged += (s, e) =>
{
frm.HeightRequest = frmContainer.Width;
if (frmContainer.Width > frmContainer.Height)
{
frm.WidthRequest = frmContainer.Height;
}
else
{
frm.WidthRequest = frmContainer.Width;
}
};
I am creating an application for Windows Phone 8.1 (non-SilverLight). I want to put a grid class in a canvas class with XAML like below:
I wish to position the Grid in the middle of the Canvas that means that distance between the top of the grid and the top of the canvas is the same as that between the bottom of the grid and the bottom of the canvas. Similarly, the distance between the left of the grid and the left of the canvas should be the same as that between the right of the grid and the right of the canvas.
How do I do that and ensure that the layout is consistent on all types of screen resolution on different phones?
So far, I have this:
<Canvas Grid.Row="1" Grid.Column="1">
<Grid Width="300" Height="200" Canvas.Left="40" Canvas.Top="40">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
</Canvas>
It is not what I wanted when I deploy to my phone and I know fixing the problem by adjusting the height and width manually is not a good solution.
I am a new in this area and sorry if I used the wrong terminologies.
Please help and guide me >.<
You have two basic options to solve this, you can either use a single grid with a lot of margins, so the grid would not touch the edge of the screen. Or you can use a grid within a gird. A canvas should only be used for graphics work, when you want the controls to have a fixed position no matter the screen size.
For your case, I'd use a grid within a grid. A grid centers everything within it, so that solves your problem. But since you said you wanted to add extra info in the margins, I'd do something like this:
<Grid x:Name="Outer>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.ColumnDefinitions>
<Grid x:Name="Inner" Grid.Column="1" Grid.Row="1"/>
</Grid>
That would give you a structure something like this:
Outer
-----------
| | | |
-----------
| | | |
| |inner| |
| | | |
-----------
| | | |
-----------
And a place to add more controls in the outer grid.
Note that a grid is a relatively expensive control, so try to avoid placing it when you can you another control, but that shouldn't deter you when it is useful.
I don't know why you are using a canvas to position your content grid. You can achieve the layout using the below code if canvas is not mandatory.
<Grid Grid.Row="1" Grid.Column="1">
<Grid Width="300" Height="200" HorizontalAllignment="Center" VerticalAllignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
</Grid>