locked
GridItemsLayout in CollectionView to be flexible and Frame or border around collectionview item RRS feed

  • Question

  • User391465 posted

    Question 1. - Is there a way to get the Frames to be flexible ? I mean to get the frames in the bottom line to be closer to the upper line to close the gap.

    Question 2. - Is there a way to get the collectionview items to separate frames or to get them a border like the frames has ?

    xml <CollectionView IsGrouped="True" ItemsSource="{Binding DLHY_VYPIS}"> <CollectionView.ItemsLayout> <GridItemsLayout Orientation="Vertical" Span="4" /> </CollectionView.ItemsLayout> <CollectionView.GroupHeaderTemplate> <DataTemplate> <Label x:Name="vyslednasuma" FontAttributes="Bold" Text="{Binding VyslednaSuma}" TextColor="{DynamicResource PrimaryTextColor}"> <Label.Triggers> <DataTrigger TargetType="Label" Binding="{Binding Bool_farba_textu}" Value="True"> <Setter Property="TextColor" Value="{DynamicResource RedText}"/> </DataTrigger> </Label.Triggers> </Label> </DataTemplate> </CollectionView.GroupHeaderTemplate> <CollectionView.ItemTemplate> <DataTemplate> <StackLayout VerticalOptions="FillAndExpand"> <Frame CornerRadius="10" OutlineColor="{DynamicResource PrimaryTextColor}" Padding="5" Margin="5"> <StackLayout BackgroundColor="{DynamicResource PageBackgroundColor}" Padding="5"> <Label Text="{Binding Popis}" Margin="0" TextColor="{DynamicResource PrimaryTextColor}" BackgroundColor="{DynamicResource PageBackgroundColor}"/> <Label Text="{Binding KEDY}" Margin="0" TextColor="{DynamicResource PrimaryTextColor}" BackgroundColor="{DynamicResource PageBackgroundColor}"/> <Label Text="{Binding KOLKO,StringFormat='{0:N}€'}" Margin="0" TextColor="{DynamicResource PrimaryTextColor}" BackgroundColor="{DynamicResource PageBackgroundColor}"/> <!--<Button Text="DELETE" Command="{Binding Source={x:Reference DLHY_USER_}, Path=BindingContext.TEST}" CommandParameter="{Binding ID}"/>--> <Image Source="delete_bin_icon" WidthRequest="15" HeightRequest="15" HorizontalOptions="End"> <Image.GestureRecognizers> <TapGestureRecognizer Command="{Binding Source={x:Reference DLHY_USER_}, Path=BindingContext.TEST}" CommandParameter="{Binding ID}"/> </Image.GestureRecognizers> </Image> </StackLayout> </Frame> </StackLayout> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView>

    Wednesday, June 10, 2020 5:33 PM

All replies

  • User371688 posted

    You can try to adjust the property HorizontalItemSpacing and VerticalItemSpacing to value 0.

     <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical" Span="4" HorizontalItemSpacing="0" VerticalItemSpacing="0" />
     </CollectionView.ItemsLayout>
    
    Thursday, June 11, 2020 8:41 AM
  • User391465 posted

    No that doesn't help. Maybe I found a way to do this through FlexLayout and BindableLayout but there is another problem. Bindable Layout doesn't support Grouping like CollectionView does.

    xaml <FlexLayout AlignContent="Start" AlignItems="Start" AlignSelf="Start" BindableLayout.ItemsSource="{Binding DLHY_VYPIS}" Direction="Column" JustifyContent="Start" Wrap="Wrap"> <BindableLayout.ItemTemplate> <DataTemplate> <StackLayout> <Label Text="{Binding VyslednaSuma}" TextColor="{DynamicResource PrimaryTextColor}"/> <yummy:PancakeView CornerRadius="10,10,10,10" HorizontalOptions="FillAndExpand" BorderThickness="2" BorderColor="{DynamicResource PrimaryTextColor}" Padding="5" Margin="5" > <StackLayout BackgroundColor="{DynamicResource PageBackgroundColor}" Padding="5"> <Label Text="{Binding Dlhy.Popis}" Margin="0" TextColor="{DynamicResource PrimaryTextColor}" BackgroundColor="{DynamicResource PageBackgroundColor}"/> <Label Text="{Binding Dlhy.KEDY}" Margin="0" TextColor="{DynamicResource PrimaryTextColor}" BackgroundColor="{DynamicResource PageBackgroundColor}"/> <Label Text="{Binding Dlhy.KOLKO,StringFormat='{0:N}€'}" Margin="0" TextColor="{DynamicResource PrimaryTextColor}" BackgroundColor="{DynamicResource PageBackgroundColor}"/> <Button Text="DELETE" Command="{Binding Source={x:Reference DLHY_USER_}, Path=BindingContext.TEST}" CommandParameter="{Binding ID}"/> <Image Source="{DynamicResource DeleteBinIcon}" WidthRequest="15" HeightRequest="15" HorizontalOptions="End"> <Image.GestureRecognizers> <TapGestureRecognizer Command="{Binding Source={x:Reference DLHY_USER_}, Path=BindingContext.TEST}" CommandParameter="{Binding ID}"/> </Image.GestureRecognizers> </Image> </StackLayout> </yummy:PancakeView> </StackLayout> </DataTemplate> </BindableLayout.ItemTemplate> </FlexLayout>

    Thursday, June 11, 2020 9:00 AM
  • User371688 posted

    Yes, FlexLayout doesn't support Grouping like CollectionView does.

    This requires you to make functional trade-offs based on the importance of the development requirements. Then select the appropriate control,CollectionView or FlexLayout .

    Thursday, June 11, 2020 9:14 AM
  • User371688 posted

    Hi @Crudar , have you resolved your question?

    Wednesday, July 1, 2020 9:29 AM
  • User391465 posted

    Yes, I decided to go with CollectionView because it is better for what I'm trying to achieve. I hope that maybe they will add this feature in future. I found a thread where it was suggested to add to xamarin. https://github.com/xamarin/Xamarin.Forms/issues/8234

    Tuesday, July 7, 2020 1:08 PM