We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Scrolling problem with sfchart

Thread ID:

Created:

Updated:

Platform:

Replies:

126969 Oct 19,2016 09:53 AM UTC Oct 21,2016 03:47 AM UTC UWP 3
loading
Tags: SfChart
Dilip Jangid
Asked On October 19, 2016 09:53 AM UTC

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 [Syncfusion]
Replied On October 20, 2016 09:36 AM UTC

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
Replied On October 20, 2016 01:06 PM UTC

Thanks Devi. Thanks a lot .
It worked properly

Devi Aruna Maharasi Murugan [Syncfusion]
Replied On October 21, 2016 03:47 AM UTC

Hi Dilip, 
  
Thanks for your update. 
  
Please let us know, if you need any further assistance. 
  
Regards, 
Devi 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;