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
Related
this is a simple grid with a tiny button in it:
<!--ReverseButton-->
<Grid Grid.Row="1" RowSpacing="0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ImageButton
Source="btn_reversed_unpressed"
x:Name="btn_reverse_list_mainmenu"
BackgroundColor="#00000000"
Grid.Column="1"
Clicked="ReverseListForSwipeView"
/>
</Grid>
The size of this Row (row 1) is set here:
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="0.17*" />
<RowDefinition Height="4.5*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
I set the value to 0.17* to have the button always be very tiny. If i would set the row to "auto" the icon would become much bigger (since the source image is bigger in size)
If I make the size to, lets say 0.25* instead of 0.17* the row and therefore the button both get bigger and everything is fine. (Except now it is too big)
But with size 0.17* it is just about right... Well except for this:
It is quite hard to see, but the icon at the bottom is cut of slightly. The border is not as big as it is on the top.
This I have noticed quite some time now.
I tried setting the rowspacing to 0 or even negative values, but nothing worked.
Why is the icon cut off.
The top part isnt cut and both parts (top and bottom) touch the row end and beginning pixel perfect.
An answer based on my comment above. I suggest setting the HeightRequest of the ImageButton to the size you want the icon to be and then just set the row height to Auto and let the layout manager do the rest. See my example where I create a Grid with 3 rows set to Auto size and then just use the HeightRequest property to have it draw at the correct size. I left the grey background of the button in so you can see how the row sizes dynamically.
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="50"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="0" />
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="75"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="1" />
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="100"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="2" />
</Grid>
</ContentPage.Content>
Gives the following:
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 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>
I have created 3 x 4 Grid in XAML in Landscape view mode. Means 3 rows and 4 columns. Now on view change to portrait i want to make it 4 x 3 means 4 rows and 3 columns. How to do it.
Plz help me to do it.
Thank you in advance...
I am not really sure as to what you are meaning by how to do it, but to define new grid rows and columns would be:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
</Grid>
This creates a 4x3 grid panel where the widths and heights could be changed to a predetermined size or a *. If this isn't what you are looking for let me know.
Finally i solve it using code behind.
I made two grids one with 3 * 4 and one with 4 * 3
and on size_changed event of page identify the applicationViewstate and show hide the required grid
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.