CODEWITHSUNDEEP
c#google-mapsxamarinxamarin.forms
Idev Dev
Idev Dev

Reputation: 184

Xaml display map on half page , another half information in xamarin forms

I'm trying to create the following view. my view

I don't seem to achieve this, I tried different approaches but it did not work. Is this even possible in xamarin forms? This is what I have: My view:

<StackLayout>
    <local:CustomMap x:Name="customMap" 
                     MapType="Satellite" 
                     WidthRequest="{x:Static local:App.ScreenWidth}" 
                     HeightRequest="{x:Static local:App.ScreenHeight}" />

    <ListView x:Name="listviewname"
              HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Padding="20, 10">
                        <Label  Text="{Binding Information}"
                                 FontSize="15" 
                                HorizontalOptions="Start"/>
                        <Label  Text="{Binding More Information}"
                                 FontSize="15"/>
                        <Label  Text="{Binding MoreInformation}"
                                FontSize="15"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

But this it only shows my map. Some help would be appreciated. Thanks :)

Upvotes: 2

Views: 1195

Answers (1)

SushiHangover
SushiHangover

Reputation: 74209

You can use a Grid to split the Page into 2 segments. something like should get you started:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <maps:Map Grid.Row="0" />
    <ListView Grid.Row="1" x:Name="listviewname" HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Padding="20, 10">
                        <Label  Text="{Binding Information}" FontSize="15" HorizontalOptions="Start"/>
                        <Label  Text="{Binding More Information}" FontSize="15"/>
                        <Label  Text="{Binding MoreInformation}" FontSize="15"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>            
</Grid>

Upvotes: 2

Related Questions