CODEWITHSUNDEEP
xamlxamarinxamarin.forms
TheDeveloper
TheDeveloper

Reputation: 1217

xamarin forms: views and list views in the same page

In my xamarin forms page, I want to display a chart(sync fusion) and a list view on the same page. Is it possible?

<ScrollView>
    <StackLayout>

        <chart:SfChart x:Name="Chart" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    <chart:SfChart.BindingContext>
      <local:ReportPageViewModel/>
    </chart:SfChart.BindingContext>

    <chart:SfChart.Legend>
      <chart:ChartLegend />
    </chart:SfChart.Legend>

    <chart:SfChart.Title>
      <chart:ChartTitle Text="Chart"/>
    </chart:SfChart.Title>

   <chart:SfChart.PrimaryAxis>
      <chart:CategoryAxis LabelRotationAngle="-45" >
        <chart:CategoryAxis.Title>
          <chart:ChartAxisTitle Text="Name"/>
        </chart:CategoryAxis.Title>
      </chart:CategoryAxis>
    </chart:SfChart.PrimaryAxis>

     <chart:SfChart.SecondaryAxis>
      <chart:NumericalAxis>
        <chart:NumericalAxis.Title>
          <chart:ChartAxisTitle Text="Height (in cm)"/>
        </chart:NumericalAxis.Title>
      </chart:NumericalAxis>
    </chart:SfChart.SecondaryAxis>

   <chart:SfChart.Series>
      <chart:ColumnSeries ItemsSource="{Binding Data}" Label="Heights" XBindingPath="Name" YBindingPath="Height" EnableTooltip="True">
        <chart:ColumnSeries.DataMarker>
          <chart:ChartDataMarker/>
        </chart:ColumnSeries.DataMarker>
      </chart:ColumnSeries>
    </chart:SfChart.Series>
  </chart:SfChart>
    <ListView>
    <ListView.ItemsSource>
        <x:Array Type="{x:Type Cell}">
            <EntryCell Text="{Binding Phone}" />
            <EntryCell Text="{Binding Code}" />
            <TextCell Text="LOGIN" Command="{Binding Login}"/>
        </x:Array>
    </ListView.ItemsSource>
  </ListView>
            </StackLayout>
    </ScrollView>

This results in displaying only the list view but not the chart. Is it possible to accommodate list view along with other views ?

Upvotes: 0

Views: 625

Answers (2)

Luis David De La Cruz Bautista
Luis David De La Cruz Bautista

Reputation: 1

I had the same problem today and I was looking for one solution.

I wanted a Picker above my Chart and put the elements into a Grid was the solution in the next way:

 <ScrollView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Picker x:Name="Picker" Grid.Row="0"/>

             <chart:SfChart Grid.Row="1" >
               My chart...
             </chart:SfChart>
       </Grid>
 </ScrollView>

and it looks like the next images Picker above the chart

Using the picker

Using the picker

Upvotes: 0

Adam
Adam

Reputation: 16199

As Jason stated, using a ScrollView around a ListView is not the best approach, as it can cause many scrolling issues, because the ListView has its own scrolling mechanism.

One way to do this, is to put the Charts in the ListView Header.

// Add this to your page
x:Name="this"

// Use the HeaderTemplate
<ListView x:Name="listView" Header="{Binding this.BindingContext}">
   <ListView.HeaderTemplate>
     <DataTemplate>
        ...
     </DataTemplate>
  </ListView.HeaderTemplate>     
  <ListView.ItemTemplate>
    <DataTemplate>
     ...
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

Upvotes: 1

Related Questions