CODEWITHSUNDEEP
c#xamarin.forms
dotnetdevcsharp
dotnetdevcsharp

Reputation: 3980

Styling on the collection view component

Uisng the carsoule view I am trying to list planes for the msfs community however the image is very small.

<CollectionView x:Name="addOnList" Margin="0,40,0,0" Grid.Row="1"  SelectionMode="Single" 
     VerticalScrollBarVisibility="Never">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical" VerticalItemSpacing="20" HorizontalItemSpacing="20" Span="2"/>
     </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
   <DataTemplate>
 <Grid Padding="10" BackgroundColor="#131313" WidthRequest="145" HeightRequest="160">
       <Grid.RowDefinitions>
           <RowDefinition Height="*"/>
           <RowDefinition Height="*"/>
           <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
                    <Image Aspect="Fill"  Source="{Binding ThumbNail}"  Margin="10" WidthRequest="200" HeightRequest="200" 
                           HorizontalOptions="Center" VerticalOptions="Center"/>
                    <Label Grid.Row="1" Text="{Binding Name}" TextColor="#F9B522" FontFamily="ThemeFont" 
                           VerticalOptions="End" HorizontalOptions="Start"/>
                    <Label Grid.Row="1" Text="{Binding Version}" TextColor="White" FontFamily="ThemeFont"
                           VerticalOptions="End" HorizontalOptions="End"/>
                    <Button Grid.Row="3"  x:Name="btnSetReminder" Text="Add to Favourites"></Button>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
        <CollectionView.Footer>
            <Grid HeightRequest="0"/>
        </CollectionView.Footer>
</CollectionView>

What I want is Image Name over the image then I want a button to say add to favourites which would be a heart and then a the version number to the right something like this but I would like the title to be over the image and the image to be slightly bigger

enter image description here

Upvotes: 0

Views: 52

Answers (2)

nevermore
nevermore

Reputation: 15816

The whole Grid has a HeightRequest 160 and you image can't get the HeightRequest="200".

Also the Button should in Grid.Row 2.

I would recommend you to layout this way:

<CollectionView.ItemTemplate>
    <DataTemplate>
        <Grid Padding="10" BackgroundColor="#131313" WidthRequest="145" HeightRequest="160">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="20"/>
                <RowDefinition Height="50"/>
            </Grid.RowDefinitions>
            <Image Aspect="Fill"  Source="sample.jpg" 
                   HorizontalOptions="Center" VerticalOptions="Center"/>
            <Label Grid.Row="1" Text="Name" TextColor="#F9B522" FontFamily="ThemeFont" 
                   VerticalOptions="End" HorizontalOptions="Start"/>
            <Label Grid.Row="1" Text="Version" TextColor="White" FontFamily="ThemeFont"
                   VerticalOptions="End" HorizontalOptions="End"/>
            <Button Grid.Row="2"  x:Name="btnSetReminder" Text="Add to Favourites"></Button>
        </Grid>
    </DataTemplate>
</CollectionView.ItemTemplate>

Here is the result:

enter image description here

Update:

<CollectionView.ItemTemplate>
    <DataTemplate>
        <Grid Padding="10" BackgroundColor="#131313" WidthRequest="145" HeightRequest="160">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="20"/>
                <RowDefinition Height="50"/>
            </Grid.RowDefinitions>
            <Image Aspect="Fill"  Source="sample.jpg" 
                   HorizontalOptions="Center" VerticalOptions="Center"/>
            <Label Grid.Row="1" Text="Name" TextColor="#F9B522" FontFamily="ThemeFont" 
                   VerticalOptions="End" HorizontalOptions="Start"/>
            <Label Grid.Row="1" Text="Version" TextColor="White" FontFamily="ThemeFont"
                   VerticalOptions="End" HorizontalOptions="End"/>

            <StackLayout Grid.Row="2" Orientation="Horizontal">

                <Button  Text="left" FontSize="8" HorizontalOptions="Start" WidthRequest="50"></Button>
                <Button  x:Name="btnSetReminder" FontSize="8" Text="Add to Favourites" HorizontalOptions="FillAndExpand"></Button>
                <Button  Text="right" FontSize="8" HorizontalOptions="End" WidthRequest="50"></Button>

            </StackLayout>

        </Grid>
    </DataTemplate>
</CollectionView.ItemTemplate>

Upvotes: 1

Shaw
Shaw

Reputation: 929

  1. To enlarge the image and make the text and button overlay:
<Image Grid.RowSpan="3" ... />
  1. For a heart-favourite button, please try ImageButton:
<ImageButton Source="heart.png" ... />

Upvotes: 1

Related Questions