I have loaded the views inside a grid as below,
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Entry x:Name="SearchTextBox"
Grid.Row="0"
HorizontalOptions="Fill"
Placeholder="Search"
VerticalOptions="Fill" />
<ListView x:Name="listView"
Grid.Row="1"
HorizontalOptions="Fill"
VerticalOptions="Fill" />
<local:CustomListView x:Name="customView"
Grid.Row="0"
ItemsSource="{Binding Items}">
</local:CustomListView >
</Grid>
Out of 3 views in the above code snippet, first two views are rendered properly. But the 3rd view(custom view) not rendered. CustomViews are not rendered only if I set RowDefinition as "Auto". So, anyone please tell why the custom view is not loaded if I set "Auto".
your CustomListView probably doesn't request a minimum size correctly, and as the middle row has a height of *, it takes all of the available space minus the minimum size requests.
Related
I have a grid inside a CollectionView and I need to change the layout based on a certain condition, changing dynamically the size of the columns and rows and hiding/showing some specific columns.
The datasource of the collectionView is always the same.
Basically, I want to achieve something like this:
Default layout:
Alternative layout:
I saw that maybe I could use the DataTemplateSelectors, but is that the best way or is there another method?
You can use the Grid in the Collectionview and set the Grid format.
First, you can set the CollectionView ItemsLayout. Here is the example.
<CollectionView ItemsSource="{Binding Items}"
ItemsLayout="VerticalGrid, 3">
it will divide the CollectionView list into three vertical parts.
Second, you can make a Grid to preserve the data.
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Row="1"
Text="{Binding Location}" />
</Grid>
This query is the continuation of this post Scroll view scrolling not works when the it is translated in y position such that bottom part gets hidden in xamarin forms
Now scroll view works fine, in some cases I used to define like below, I can either use the content of the absolute layout with scroll view or else directly.
When used directly as in below snippet, after translation by setting layout bounds, all the box view were arranged in the specified height.
But previously it will crop at the bottom after translation. I need the same behavior when scroll view is not used. How to achieve this.
<AbsoluteLayout x:Name="layout" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="1">
<Grid x:Name="scrollView" AbsoluteLayout.LayoutFlags="SizeProportional" AbsoluteLayout.LayoutBounds="0,0,1,1" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<BoxView Grid.Row="0" BackgroundColor="Red"></BoxView>
<BoxView Grid.Row="1" BackgroundColor="Black"></BoxView>
<BoxView Grid.Row="2" BackgroundColor="Blue"></BoxView>
<BoxView Grid.Row="3" BackgroundColor="Gray"></BoxView>
<BoxView Grid.Row="4" BackgroundColor="Green"></BoxView>
<BoxView Grid.Row="5" BackgroundColor="Red"></BoxView>
<BoxView Grid.Row="6" BackgroundColor="Black"></BoxView>
<BoxView Grid.Row="7" BackgroundColor="Blue"></BoxView>
<BoxView Grid.Row="8" BackgroundColor="Gray"></BoxView>
<BoxView Grid.Row="9" BackgroundColor="Green"></BoxView>
</Grid>
In this case When I set layout bounds it gets arranged as in second image, but I need as in first image.
If you don't have ScrollView, like you had in this question then just put 1 as a last parameter of your Rectangle constructor.
I don't know how the rest of your code looks like, but you can bind different rectangles with different AbsoluteLayout.LayoutBounds. For example, in a case without ScrollView you can put like this
<AbsoluteLayout x:Name="layout" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="1">
<Grid AbsoluteLayout.LayoutBounds="{Binding rectNoScroll}"...
rectNoScroll = new Rectangle(0, 250, 1, 1);
and when you have ScrollView you can do like in here.
Say I create the following shared XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Text="One" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Text="Two First" />
<Button Grid.Column="1" Text="Two Second" />
</Grid>
<Button Grid.Row="2" Text="Three" />
</Grid>
I then run this on an Android device and run the TalkBack screen reader. As I swipe forward through the UI, TalkBack moves from button "One", to button "Three", and then to buttons "Two First" and "Two Second". This doesn't match the order in which I've defined the UI, so is this expected? I get what I consider the expected navigation of moving through the buttons in order of "One"->"Two First"->"Two Second"->"Three", when running the same UI as a Xamarin.UWP app and using the Narrator screen reader.
I've found I can avoid the unexpected TalkBack navigation if I update the UI such that certain parts of the UI are balanced in how deep the UI is defined in the XAML hierarchy. For example, if I wrap button "Three" in a Grid, then I get the expected navigation path.
I can also avoid the unexpected TalkBack navigation if I add a TabIndex to everything that I want TalkBack to reach, but that'll need maintaining as the app UI evolves over time, and as I understand things, not all types of Xamarin.Forms control support TabIndex.
not sure if it's a problem from designs of Grid .From shared code , I think Grid maybe set the second Row as the low level of priority .Because the second Row define the Column individually .
If that is the logic about the design of Grid . You can have a try with define the Row and Column at the same level of priority .
Code as follow :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0"
Grid.ColumnSpan="2"
Text="One" />
<Button Grid.Row="1"
Grid.Column="0"
Text="Two First" />
<Button Grid.Row="1"
Grid.Column="1"
Text="Two Second" />
<Button Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"
Text="Three" />
</Grid>
I have no idea what I'm doing wrong here. I've tried explicitly setting heights, column definitions, but I cannot get the sizing here to be correct.
I tried setting two columns with one row, with and without explicit heights and sizes.
What do I have to do?
something like this should work
<ViewCell>
<!-- need to specify an overall height -->
<Grid HeightRequest="200">
<Grid.RowDefinitions>
<!-- two rows equal height -->
<RowDefinition Height="50*" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
<Grid.ColumnDefintions>
<!-- two cols equal width -->
<ColumnDefintions Width="50*" />
<ColumnDefintions Width="50*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="Location" />
<Label Grid.Row="0" Grid.Column="1" Text="Amount" />
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="Created" />
</Grid>
</ViewCell>
I have a grid with the following row definitions...
<Grid.RowDefinitions>
<RowDefinition Height="5*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
When the user presses a button, how do I remove the bottom two rows and have the top row (including the view within it) stretch to the bottom of the grid?
I kept all the rows and did this...
mainGrid.RowDefinitions[2].Height = new GridLength(1, GridUnitType.Star);
mainGrid.ForceLayout();
I would like to animate the change in height.
Try something like this:
The grid
<Grid x:Name="grid">
<Grid.RowDefinitions>
<RowDefinition Height="5*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
x:Name="stkOne"
BackgroundColor="Red"/>
<StackLayout Grid.Row="1"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
x:Name="stkTwo"
BackgroundColor="Green"/>
<StackLayout Grid.Row="1"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
x:Name="stkThree"
BackgroundColor="Blue"/>
<Button Text="Expand One"
HorizontalOptions="EndAndExpand"
Command="ExpandCommand"/>
</Grid>
The code behind
// Create the command and set it up to execute this method:
void ExecuteExpand()
{
stkTwo.IsVisible=false;
stkThree.IsVisible=false;
Grid.SetRowSpan(stkOne, 3);
grid.ForceLayout();
}
I'm not sure if it will work as you need, but make a try.