Scrolling problem with sfchart

[Dilip Jangid]

I used syncfusion,'s sf chart in my uwp project.

On the first page there is  two elements

1 is chart and 

2 is a list of say 100 items

I put this page in scrollviewer control

The problem statement is 

when i scroll this page by touching the chart, scrolling is not happens 

but apart from the chart area,  by touching anywhere i able to scroll the page. so please suggest me

I attach the xaml and cs file

<Page

    x:Class="GestureDemo.View.BlankPage1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:GestureDemo.View"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:chart="using:Syncfusion.UI.Xaml.Charts"

    mc:Ignorable="d">

    <Grid>

        <ScrollViewer VerticalScrollMode="Enabled" IsVerticalRailEnabled="True" IsZoomChainingEnabled="True">

            <Grid>

                

                <Grid.RowDefinitions>

                    <RowDefinition Height="30*"/>

                    <RowDefinition Height="5*"/>

                    <RowDefinition Height="30*"/>

                    <RowDefinition Height="5*"/>

                    <RowDefinition Height="30*"/>

                </Grid.RowDefinitions>

                <ListView ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.IsVerticalRailEnabled="True" ScrollViewer.IsVerticalScrollChainingEnabled="True">

                <Grid Grid.Row="0" Background="#8a40af" IsHitTestVisible="True" ScrollViewer.IsScrollInertiaEnabled="True" ScrollViewer.IsVerticalRailEnabled="True" ScrollViewer.IsVerticalScrollChainingEnabled="True">

                    <chart:SfChart x:Name="LineChart" Background="#2a334f" Margin="2">

                        <chart:SfChart.PrimaryAxis>

                            <chart:CategoryAxis Header="Date" Foreground="White"/>

                        </chart:SfChart.PrimaryAxis>

                        <chart:SfChart.SecondaryAxis>

                            <chart:NumericalAxis Header="Score" Foreground="White"/>

                        </chart:SfChart.SecondaryAxis>

                        <chart:SfChart.AreaBorderBrush>

                            <SolidColorBrush Color="White"/>

                        </chart:SfChart.AreaBorderBrush>

                        <chart:SfChart.Legend>

                            <ControlTemplate>

                                <ScrollViewer Margin="30" IsDeferredScrollingEnabled="True" IsEnabled="True" IsHitTestVisible="True" IsHorizontalRailEnabled="True" IsScrollInertiaEnabled="True" IsVerticalRailEnabled="True" IsVerticalScrollChainingEnabled="True"  VerticalScrollMode="Enabled" HorizontalScrollMode="Enabled" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">

                                    <ItemsPresenter>

                                    </ItemsPresenter>

                                </ScrollViewer>

                            </ControlTemplate>

                        </chart:SfChart.Legend>

                        <chart:SplineSeries x:Name="splineSeries" YBindingPath="newsScore" XBindingPath="date" ShowTooltip="True" Foreground="White">

                            <chart:SplineSeries.AdornmentsInfo>

                                <chart:ChartAdornmentInfo x:Name="lineChartAdornmentInfo"  Foreground="White"/>

                            </chart:SplineSeries.AdornmentsInfo>

                        </chart:SplineSeries>

                    </chart:SfChart>

                </Grid>

                <Grid Grid.Row="2">

                    <ListView x:Name="ListView_News">

                        <ListView.ItemTemplate>

                            <DataTemplate>

                                <Grid Height="100">

                                    <Grid.RowDefinitions>

                                        <RowDefinition Height="95*"/>

                                        <RowDefinition Height="5*"/>

                                    </Grid.RowDefinitions>

                                    <Grid Grid.Row="0">

                                        <Grid.RowDefinitions>

                                            <RowDefinition Height="60*"/>

                                            <RowDefinition Height="40*"/>

                                        </Grid.RowDefinitions>

                                        <Grid Grid.Row="0">

                                            <Grid.ColumnDefinitions>

                                                <ColumnDefinition Width="90*"/>

                                                <ColumnDefinition Width="10*"/>

                                            </Grid.ColumnDefinitions>

                                            <TextBlock Grid.Column="1" Text="{Binding Score}" Foreground="#d6d6d6" FontSize="20" FontWeight="Medium" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center"/>

                                            <TextBlock Grid.Row="0" Text="{Binding TwitterTitle}" Foreground="#d6d6d6" FontSize="20" FontWeight="Medium" TextWrapping="Wrap" VerticalAlignment="Bottom"/>

                                        </Grid>

                                        <Grid Grid.Row="1">

                                            <Grid.ColumnDefinitions>

                                                <ColumnDefinition Width="35*"/>

                                                <ColumnDefinition Width="65*"/>

                                            </Grid.ColumnDefinitions>

                                            <TextBlock Grid.Column="0" Text="{Binding TwitterDate}" Foreground="#848484" FontSize="14" FontStyle="Italic" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Center"/>

                                            <TextBlock Grid.Column="1" Text="{Binding PublisherName}" Foreground="#848484" FontSize="14" FontStyle="Italic" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Center"/>

                                        </Grid>

                                    </Grid>

                                    <Grid Grid.Row="1" Background="#333333" Height="1"/>

                                </Grid>

                            </DataTemplate>

                        </ListView.ItemTemplate>

                        <ListView.ItemContainerStyle>

                            <Style TargetType="ListViewItem">

                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

                                <Setter Property="VerticalContentAlignment" Value="Stretch"/>

                            </Style>

                        </ListView.ItemContainerStyle>

                    </ListView>

                </Grid>

                <Grid Grid.Row="4">

                    <Grid Grid.Row="0" Background="#8a40af">

                        <chart:SfChart x:Name="LineChart2" Background="#2a334f" Margin="2">

                            <chart:SfChart.PrimaryAxis>

                                <chart:CategoryAxis Header="Date" Foreground="White"/>

                            </chart:SfChart.PrimaryAxis>

                            <chart:SfChart.SecondaryAxis>

                                <chart:NumericalAxis Header="Score" Foreground="White"/>

                            </chart:SfChart.SecondaryAxis>

                            <chart:SfChart.AreaBorderBrush>

                                <SolidColorBrush Color="White"/>

                            </chart:SfChart.AreaBorderBrush>

                            <chart:SplineSeries x:Name="splineSeries2" YBindingPath="newsScore" XBindingPath="date" ShowTooltip="True" Foreground="White">

                                <chart:SplineSeries.AdornmentsInfo>

                                    <chart:ChartAdornmentInfo x:Name="lineChartAdornmentInfo2"  Foreground="White"/>

                                </chart:SplineSeries.AdornmentsInfo>

                            </chart:SplineSeries>

                        </chart:SfChart>

                    </Grid>

                </Grid>

                </ListView>

            </Grid>

        </ScrollViewer>

    </Grid>

</Page>

and in cs 

                            i added a list of required elements to both chart

                        lineChartAdornmentInfo.Series.ItemsSource = list_Binding;

                        lineChartAdornmentInfo2.Series.ItemsSource = list_Binding;

                        for listview i added a list of 20 items

                            ListView_News.ItemsSource = list2.TwitterList;

output is same as i want only the scrolling issue is there

So please suggest me

[Devi Aruna Maharasi Murugan]

Hi Dilip, 

  

Thanks for contacting Syncfusion Support. 

  

We are able to swipe the chart while placing the chart inside the scroll viewer, by setting ManipulationMode property of the chart as System as shown in below code snippet.  

  

  <chart:SfChart  ManipulationMode="System" > 

   </chart:SfChart> 

 

 

  

We have prepared a demo sample based on your requirement and it can be downloaded from below link, 

  

Sample: ScrollingUWP 

  

Regards, 

Devi 

 

[Dilip Jangid]

Thanks Devi. Thanks a lot .

It worked properly

[Devi Aruna Maharasi Murugan]

Hi Dilip, 

  

Thanks for your update. 

  

Please let us know, if you need any further assistance. 

  

Regards, 

Devi