CODEWITHSUNDEEP
xamarinxamarin.formsxamarin.androidxamarin.ios
A. Vreeswijk
A. Vreeswijk

Reputation: 954

Xamarin Add dividing line into Grid

I have a problem. I want created this ListView using the following code:

<?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="MyApp.HomePage">
    <ContentPage.Content>
        <ListView x:Name="ListViewMain" VerticalOptions="FillAndExpand" BackgroundColor="#212121" SelectionMode="None">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid x:Name="GridMain">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="40" x:Name="Row0_Height"/>
                                <RowDefinition Height="180" x:Name="Row1_Height"/>
                                <RowDefinition Height="180" x:Name="Row2_Height"/>
                                <RowDefinition Height="40" x:Name="Row3_Height"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="40" x:Name="Column0_Width" />
                                <ColumnDefinition Width="*" x:Name="Column1_Width" />
                                <ColumnDefinition Width="40" x:Name="Column2_Width" />
                            </Grid.ColumnDefinitions>
                            <Label Text="{Binding Creator}" TextColor="White" FontSize="Body" FontAttributes="Bold" Grid.Column="1" Grid.Row="0" VerticalOptions="Center" HorizontalOptions="Start"/>
                            <Image Source="VoteUp.png" VerticalOptions="End" HorizontalOptions="Center" Grid.Row="1" Grid.Column="0">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="imgVoteUp_Clicked" />
                                </Image.GestureRecognizers>
                            </Image>
                            <Image Source="VoteDown.png" VerticalOptions="Start" HorizontalOptions="Center" Grid.Row="2" Grid.Column="0">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="imgVoteDown_Clicked" />
                                </Image.GestureRecognizers>
                            </Image>
                            <Image Source="{Binding ImageLocation}" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" BackgroundColor="AliceBlue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
                            <Image Source="Favorite.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="Start">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="imgFavorite_Clicked" />
                                </Image.GestureRecognizers>
                            </Image>
                            <Image Source="Send_Dark.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="End"/>
                            <Image Source="Save_Dark.png" Grid.Row="3" Grid.Column="2" HorizontalOptions="End"/>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

But now I want to add a line above the first Label tag. To create the line I want I use this code:

<Label HeightRequest="1" BackgroundColor="#E3E3E3" />

But I don't know where to put it and how, because it is a Grid. I want to add it before the Grid, but that gives me the error:

The property 'View' is set more than once.

What am I doing wrong and how can I fix this?

Upvotes: 0

Views: 911

Answers (1)

Jason
Jason

Reputation: 89082

I would use a BoxView instead of a Label. You could use this layout, placing the BoxView in the same Row as the Label, but vertically aligned

the other things you could try

  1. add another row to the Grid for the BoxView
  2. place the Grid inside of a StackLayout with the BoxView

Upvotes: 1

Related Questions