Forum Xamarin.Forms

Wrap into frame

CrudarCrudar Member ✭✭

I would want to wrap this into something like this

There is code of the side. How it should be done ?

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="DLZOBY.View.VsetkyDlhy"
             xmlns:viewmodel="clr-namespace:DLZOBY.ViewModel"
             x:Name="DLHY_ADMIN_VIEW"
             xmlns:model="clr-namespace:DLZOBY.Model"
             BackgroundColor="{DynamicResource PageBackgroundColor}">
    <ContentPage.BindingContext>
        <viewmodel:VsetkyDlhy_viewModel/>
    </ContentPage.BindingContext>
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="VYMAŽ" Command="{Binding VymažCommand}" />
        <ToolbarItem Text="Nastavenia" Command="{Binding NastaveniaCommand}" Order="Secondary"/>
    </ContentPage.ToolbarItems>
    <StackLayout>
        <ActivityIndicator IsVisible="{Binding IsBusy}" IsRunning="{Binding IsBusy}" Color="Blue"/>
        <SearchBar Text="{Binding HladanyText}" TextColor="{DynamicResource PrimaryTextColor}" CancelButtonColor="{DynamicResource PrimaryTextColor}" PlaceholderColor="{DynamicResource PrimaryTextColor}" BackgroundColor="{DynamicResource SearchBackground}"/>
        <CollectionView     IsGrouped="True"
                                ItemsSource="{Binding DLHY_VYPIS}"
                                SelectionMode="Multiple"
                                SelectionChanged="CollectionView_SelectionChanged">
            <CollectionView.GroupHeaderTemplate>
                <DataTemplate>
                    <Label FontAttributes="Bold" Text="{Binding VyslednaSuma}" TextColor="{DynamicResource RedText}" />
                </DataTemplate>
            </CollectionView.GroupHeaderTemplate>
            <CollectionView.Header>
                <Grid RowSpacing="10" ColumnSpacing="10" VerticalOptions="FillAndExpand" HorizontalOptions="Center">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="55"/>
                        <ColumnDefinition Width="55"/>
                        <ColumnDefinition Width="45"/>
                        <ColumnDefinition Width="75"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" Text="KTO" FontAttributes="Bold" TextColor="{DynamicResource PrimaryTextColor}" />
                    <Label Grid.Row="0" Grid.Column="1" Text="KOMU" FontAttributes="Bold" TextColor="{DynamicResource PrimaryTextColor}"/>
                    <Label Grid.Row="0" Grid.Column="2" Text="KOĽKO" FontAttributes="Bold" TextColor="{DynamicResource PrimaryTextColor}"/>
                    <Label Grid.Row="0" Grid.Column="3" Text="KEDY" FontAttributes="Bold" TextColor="{DynamicResource PrimaryTextColor}"/>
                    <Label Grid.Row="0" Grid.Column="4" Text="POPIS" FontAttributes="Bold" TextColor="{DynamicResource PrimaryTextColor}"/>
                </Grid>
            </CollectionView.Header>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid RowSpacing="10" ColumnSpacing="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="55"/>
                            <ColumnDefinition Width="55"/>
                            <ColumnDefinition Width="45"/>
                            <ColumnDefinition Width="75"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <!--<Label Grid.Row="1" Grid.Column="0" Text="KTO" FontAttributes="Bold"/>
                            <Label Grid.Row="1" Grid.Column="1" Text="KOMU" FontAttributes="Bold"/>
                            <Label Grid.Row="1" Grid.Column="2" Text="KOĽKO" FontAttributes="Bold"/>
                            <Label Grid.Row="1" Grid.Column="3" Text="KEDY" FontAttributes="Bold"/>
                            <Label Grid.Row="1" Grid.Column="4" Text="POPIS" FontAttributes="Bold"/>-->
                        <Label Grid.Row="0" Grid.Column="0" Text="{Binding KTO}" Margin="0" TextColor="{DynamicResource PrimaryTextColor}" BackgroundColor="{DynamicResource PageBackgroundColor}"/>
                        <Label Grid.Row="0" Grid.Column="1" Text="{Binding KOMU}" Margin="0" TextColor="{DynamicResource PrimaryTextColor}" BackgroundColor="{DynamicResource PageBackgroundColor}"/>
                        <Label Grid.Row="0" Grid.Column="2" Text="{Binding KOĽKO,StringFormat='{0:N}€'}" Margin="0" TextColor="{DynamicResource PrimaryTextColor}" BackgroundColor="{DynamicResource PageBackgroundColor}"/>
                        <Label Grid.Row="0" Grid.Column="3" Text="{Binding KEDY}" Margin="0" TextColor="{DynamicResource PrimaryTextColor}" BackgroundColor="{DynamicResource PageBackgroundColor}"/>
                        <Label Grid.Row="0" Grid.Column="4" Text="{Binding Popis}" Margin="0" TextColor="{DynamicResource PrimaryTextColor}" BackgroundColor="{DynamicResource PageBackgroundColor}"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

Answers

  • WendyZangWendyZang Member, Xamarin Team Xamurai

    Based on my test, we could set the frame or boxview in DataTemplate. But it would wrap into frame for each items. Do not find the good way for frame of all items.

    It is not a wise way, but could get what you want vis BoxView. Hope it would be helpful.

     <ContentPage.Content>
        <StackLayout Orientation="Vertical" BackgroundColor="Green">
            <CollectionView
                BackgroundColor="Black"
                IsGrouped="True"
                ItemsSource="{Binding list}">
                <CollectionView.Header>
                    <Grid
                        ColumnSpacing="10"
                        HorizontalOptions="Center"
                        RowSpacing="10"
                        VerticalOptions="FillAndExpand">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="3" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="3" />
                            <ColumnDefinition Width="55" />
                            <ColumnDefinition Width="55" />
                            <ColumnDefinition Width="45" />
                            <ColumnDefinition Width="75" />
                            <ColumnDefinition Width="55" />
                            <ColumnDefinition Width="3" />
                        </Grid.ColumnDefinitions>
                        <Label
                            Grid.Row="0"
                            Grid.Column="1"
                            FontAttributes="Bold"
                            Text="KTO"
                            TextColor="White" />
                        <Label
                            Grid.Row="0"
                            Grid.Column="2"
                            FontAttributes="Bold"
                            Text="KOMU"
                            TextColor="White" />
                        <Label
                            Grid.Row="0"
                            Grid.Column="3"
                            FontAttributes="Bold"
                            Text="KOĽKO"
                            TextColor="White" />
                        <Label
                            Grid.Row="0"
                            Grid.Column="4"
                            FontAttributes="Bold"
                            Text="KEDY"
                            TextColor="White" />
                        <Label
                            Grid.Row="0"
                            Grid.Column="5"
                            FontAttributes="Bold"
                            Text="POPIS"
                            TextColor="White" />
                        <BoxView
                            Grid.Row="1"
                            Grid.ColumnSpan="7"
                            BackgroundColor="Accent" />
                    </Grid>
                </CollectionView.Header>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid
                            BackgroundColor="Black"
                            ColumnSpacing="10"
                            RowSpacing="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="3" />
                                <ColumnDefinition Width="55" />
                                <ColumnDefinition Width="55" />
                                <ColumnDefinition Width="45" />
                                <ColumnDefinition Width="75" />
                                <ColumnDefinition Width="55" />
                                <ColumnDefinition Width="3" />
                            </Grid.ColumnDefinitions>
                            <BoxView
                                Grid.Row="0"
                                Grid.Column="0"
                                BackgroundColor="Accent" />
                            <Label
                                Grid.Row="0"
                                Grid.Column="1"
                                Margin="0"
                                Text="{Binding KTO}"
                                TextColor="White" />
                            <Label
                                Grid.Row="0"
                                Grid.Column="2"
                                Margin="0"
                                Text="{Binding KOMU}"
                                TextColor="White" />
                            <Label
                                Grid.Row="0"
                                Grid.Column="3"
                                Margin="0"
                                Text="{Binding KOĽKO, StringFormat='{0:N}€'}"
                                TextColor="White" />
                            <Label
                                Grid.Row="0"
                                Grid.Column="4"
                                Margin="0"
                                Text="{Binding KEDY}"
                                TextColor="White" />
                            <Label
                                Grid.Row="0"
                                Grid.Column="5"
                                Margin="0"
                                Text="{Binding Popis}"
                                TextColor="White" />
                            <BoxView
                                Grid.Row="0"
                                Grid.Column="6"
                                BackgroundColor="Accent" />
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
                <CollectionView.Footer>
                    <Grid
                        ColumnSpacing="10"
                        HorizontalOptions="Center"
                        RowSpacing="10"
                        VerticalOptions="FillAndExpand">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="3" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="3" />
                            <ColumnDefinition Width="55" />
                            <ColumnDefinition Width="55" />
                            <ColumnDefinition Width="45" />
                            <ColumnDefinition Width="75" />
                            <ColumnDefinition Width="55" />
                            <ColumnDefinition Width="3" />
                        </Grid.ColumnDefinitions>
                        <BoxView
                            Grid.Row="0"
                            Grid.ColumnSpan="7"
                            BackgroundColor="Accent" />
                    </Grid>
                </CollectionView.Footer>
            </CollectionView>
    
        </StackLayout>
    </ContentPage.Content>
    

Sign In or Register to comment.