i am using Xamarin to realize a listView that is filled dynamically with a list of object.
The main problem is that even i use a static list of 2 elements (for example) there is, in the view, a blank space belonging the listView.
The inherent code is the following:
SfidePage.xaml
<ListView
Grid.Row="2"
x:Name="sfideLanciate"
HasUnevenRows="true"
SeparatorVisibility="None"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid
BackgroundColor="{StaticResource OpzioniTitleBackgroundColor}"
Margin="0,1,0,0"
RowSpacing="0"
ColumnSpacing="10"
VerticalOptions="Start"
Padding="5"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ci:CircleImage Source="avatar" Aspect="AspectFill"
HorizontalOptions="Center" VerticalOptions="Start"
HeightRequest="70" WidthRequest="70"
BorderColor="{StaticResource OpzioniLineDividerBackground}" BorderThickness="3"
Grid.Row="0"></ci:CircleImage>
<Grid RowSpacing="0" ColumnSpacing="0" Grid.Column="1" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Text="In attesa di Kyle Cain" FontSize="16" Grid.Row="0" TextColor="Black" FontAttributes="Bold"></Label>
<Label Text="Ardeatina Roma 70" Grid.Row="1" TextColor="Black"></Label>
<Label Text="10 DOMANDE - Argomento: Pannelli integrativi" Grid.Row="2" TextColor="{StaticResource LightGreyInfo}"></Label>
</Grid>
<Label Text="1h" Grid.Column="2" Grid.Row="0" TextColor="{StaticResource LightGreyInfo}" HorizontalTextAlignment="Center"></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
SfidePage.xaml.cs
public partial class SfidePage : ContentPage
{
public SfidePage ()
{
InitializeComponent ();
sfideLanciate.ItemsSource = new List<int> { 1, 2 };
}
}
The output is the following:
https://i.imgur.com/jQ40JCr.png
"SFIDE COMPLETATE" is a Stack Layout after the listView, so the blank space is part of the listView.
How can i adapt the height of listView to its elements?
It might be related to the padding property, have you tried removing it?
Also, you set the Margin-Top as 1, this could probably create the Space too.
You set the top margin to 1 in your code: Margin="0,1,0,0" change that to Margin="0" and the space should be gone...
In the Listview, add and set the property "HasUnevenRows = true".
If it doesn't have that property it doesn't bind items to the uneven rows, but still displays them as blank rows.
Related
I need to inject a ContentPage into Frame element ?
Is this possible to be done ?
I have update my description and I have added the below code
XAML Code
<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer"
DrawerWidth ="400"
Position="Right"
BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}"
DrawerHeaderHeight="160">
<navigationdrawer:SfNavigationDrawer.ContentView>
<Grid x:Name="mainContentView" BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackLayout BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}" Orientation="Horizontal">
<controls:IconButton Text="{i18n:TransIcn HamburgerMenu}" FontSize="30" x:Name="SyncIcon" HorizontalOptions="Start" Clicked="hamburgerButton_Clicked" BackgroundColor="Transparent" TextColor="#FFFFFF" ></controls:IconButton>
<Label x:Name="headerLabel" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="" FontSize="16"/>
</StackLayout>
<ScrollView Grid.Row="1" Margin="0" Padding="0">
<Frame x:Name="contentViewFrame" >
</Frame>
</ScrollView>
</Grid>
</navigationdrawer:SfNavigationDrawer.ContentView>
<navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
<Grid BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<!--<Image Source="icon.png" HeightRequest="110" BackgroundColor="#1aa1d6" VerticalOptions="Center" HorizontalOptions="Center"/>-->
<Label Text="James Pollock" Grid.Row="1" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="20" TextColor="White"/>
</Grid>
</navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
<navigationdrawer:SfNavigationDrawer.DrawerContentView>
<ListView x:Name="listView"
FlowDirection="RightToLeft"
ItemsSource="{Binding Items}"
BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}"
ItemSelected="listView_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Margin="0,8,0,0" BackgroundColor="{DynamicResource DashboardItemsDarkSurface}">
<Label Text="{Binding IconText}" HorizontalOptions="Start" FontSize="30" Style="{StaticResource EventaIconStyle}" ></Label>
<Label Text="{Binding Title}" HorizontalOptions="Start" Style="{StaticResource MainHeaderLabel}"></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</navigationdrawer:SfNavigationDrawer.DrawerContentView>
<navigationdrawer:SfNavigationDrawer.DrawerFooterView>
<Grid BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}" >
<StackLayout VerticalOptions="Center"
`enter code here` HorizontalOptions="Center">
<Label Text="Footer View"/>
</StackLayout>
</Grid>
</navigationdrawer:SfNavigationDrawer.DrawerFooterView></navigationdrawer:SfNavigationDrawer>
Please Let me know if you need more information.
The issue is that I cannot add a ContentPage Object into the ContentView item so could please provide me with some workarounds that I might go for ?
As they have been mentioning in the comments about a content VIEW vs content page, that should work for you with a slight bit of alteration. When I wrote my first Xamarin app, I had several other applications over time that have had nested controls in controls and did not want to find myself in similar.
So, what I did was to create simple user controls with all the stuff I needed on them. So when I was creating a page, I would just add my user control where it physically needed to be placed. This way, should I need to alter the layout of that one user control, it doesn't change the functionality the rest of the way through. Binding was the same because the binding context was the same level, regardless of the VISUAL depth of controls.
So, if you were to create a new Navigation drawer user control of its own context, then slap that in your content page should work for you.
I have a problem.I want to turn off a Group header in SfListView.I read on the forums to turn off IsStickyGroupHeader,I did it but IsStickyGroupHeader="False" does not work.Maybe I understand something wrong.Please help me.Thank you
<syncfusion:SfListView
x:Name="listView"
Grid.Row="0"
ItemSize="40"
IsStickyGroupHeader="False"
ItemsSource="{Binding contactsinfo}"
SelectionMode="None">
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout
Grid.Column="1"
HorizontalOptions="StartAndExpand"
Orientation="Vertical"
VerticalOptions="Center">
<Label
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
LineBreakMode="WordWrap"
Text="{Binding ContactName}"
TextColor="#474747"
VerticalOptions="Center"
VerticalTextAlignment="Center" />
</StackLayout>
</Grid>
<StackLayout BackgroundColor="LightGray" HeightRequest="1" />
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
You can hide the GroupHeader by using the GroupHeaderSize as 0. Please refer to the following code snippets,
<ListView:SfListView
x:Name="listView"
Grid.Row="0"
ItemSize="40"
GroupHeaderSize="0"
ItemsSource="{Binding ContactsInfo}"
SelectionMode="None">
You can also refer to our user guidance document regarding the same,
UG link: https://help.syncfusion.com/xamarin/listview/grouping#height-customization
Also, if you are using SfListView.AutoFitMode as Height or DynamicHeight, then the items size will be calculated based on the template elements. Hence, you can customize the GroupHeaderTemplate with Height 0.
<ListView:SfListView
x:Name="listView"
Grid.Row="0"
AutoFitMode="DynamicHeight"
ItemsSource="{Binding ContactsInfo}"
SelectionMode="None">
<ListView:SfListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="0"/>
</DataTemplate>
</ListView:SfListView.GroupHeaderTemplate>
Refer the following documentation regarding the same,
UG link: https://help.syncfusion.com/xamarin/listview/grouping#group-header-customization
I've been going trhough all the articles and codes i found here, but most of them seem to be outdated, or make use of external tools.
I'd need to create a miniature gallery, with two columns, and scrollable.
my aproach would be to use a collectionview, or a listview with a grid in each element.
But not sure that this is the proper aproach.
What would a current good solution be to create a 2 column scrollable miniature gallery with the current tools available in xamarin?
You can only use CollectionView to implement it.
There is a layout property of CollectionView : Span
Span, of type int, that represents the number of columns or rows to display in the grid. The default value of this property is 1, and its value must always be greater than or equal to 1.
You can follow the bellow code :
Vertical list : CollectionView can display its items in a vertical grid by setting its ItemsLayout property to a GridItemsLayout object whose Orientation property is set to Vertical:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<!--<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold"
LineBreakMode="TailTruncation" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
LineBreakMode="TailTruncation"
FontAttributes="Italic"
VerticalOptions="End" />-->
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
The model binded in ContentPage :
public partial class VerticalGridPage : ContentPage
{
public VerticalGridPage()
{
InitializeComponent();
BindingContext = new MonkeysViewModel();
}
}
About the MonkeysViewModel.cs , you can havev a look at this official sample link .
The effect :
I have a collection of objects that has a property like "ValueType", based on this property I invoke a DataTemplateSelector class that would return type of control to be displayed for that object.
<control:ControlDataTemplateSelector x:Key="personDataTemplateSelector"
RangeTemplate="{StaticResource rangeControl}"
EnumTemplate="{StaticResource pickControl}"
DateTemplate="{StaticResource dateControl}"/>
<DataTemplate x:Key="rangeControl">
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<control:ScreenLabel Grid.Row="0" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" Text="{Binding Path=TraitDescription}" />
<Entry Grid.Row="1" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" />
</Grid>
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="dateControl">
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<control:ScreenLabel Grid.Row="0" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" Text="{Binding Path=TraitDescription}" />
<DatePicker Grid.Row="1" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}"></DatePicker>
</Grid>
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="pickControl">
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<control:ScreenLabel Grid.Row="0" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" Text="{Binding Path=TraitDescription}" />
<Picker Grid.Row="1" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" />
</Grid>
</ViewCell>
</DataTemplate>
I am having issue displaying these in grid with two column format, for example if there are 9 objects in the collection need to display a tabular view with 4 rows of 2 columns each and a 5th row that has one column.
With my current code, i get a zig zag kind of layout. But I need Like thisNeed some suggestions
Am looking for solution that would need to work in iOS and Droid
I would use StackLayouts instead of Grids inside of your ViewCells.
You can do:
<StackLayout VerticalOptions="FillAndExpand" >
<control:ScreenLabel Text="{Binding Path=TraitDescription}" />
<Entry />
</StackLayout>
Are you sure your Bindings are coming back properly? I haven't seen a comma separated Markup Extension setting on attribute.
Any one looking for answer, we resolved it by using FLowlist view control. It provides options to have side-by-side view
I'm trying to put a label inside of my image, I couldn't use a Margin property, because some reason it's not working, untill now I have this :
And what I want is this :
XAML :
<StackLayout Orientation="Vertical">
<Label HorizontalOptions="Center" Text="something" TextColor="Black"/>
<Image HorizontalOptions="Center" Source="spin.png"/>
</StackLayout>
You need a Grid instead of a StackLayout (notice how both the Label and the Image are in the same row and column):
<Grid HorizontalOptions="Center"
VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image HorizontalOptions="Center"
Source="spin.png"
Grid.Row="0"
Grid.Column="0"/>
<Label HorizontalOptions="Center"
Text="something"
TextColor="Black"
Grid.Row="0"
Grid.Column="0"/>
</Grid>
Because the Label is listed beneath the Image in the XAML code above, the Label will be drawn on top of the Image.
You also could have used an AbsoluteLayout, which is another layout that is good at layering things.