Problem when using 'ScrollMode'

[Kibeom]

Hi

I've implemeted a chart. It is everythings OK when using ScrollMode-None. But it has problem when using ScrollMode-ScrollOnly or ScrollAndZoom mode. Textbox or any controls are lost focus when using ScrollMode-'ScrollOnly or ScrollAndZoom'.

<UserControl x:Class="CGS.UX.PlotDisplay.Example"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:example="clr-namespace:CGS.UX.PlotDisplay"
    Loaded="UserControl_Loaded" Unloaded="UserControl_Unloaded">

    <UserControl.DataContext>
        <example:ExampleViewModel />
    </UserControl.DataContext>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBox Grid.Row="0" Width="100"></TextBox>
        <Border Grid.Row="1" >
            <telerik:RadChart x:Name="rdChart" ItemsSource="{Binding Data}">
                <telerik:RadChart.DefaultView>
                    <telerik:ChartDefaultView>
                        <telerik:ChartDefaultView.ChartArea>
                            <telerik:ChartArea LegendName="ChartLegend1"
                                               NoDataString="Waiting for data..."
                                               EnableAnimations="False">
                                <telerik:ChartArea.ZoomScrollSettingsX>
                                    <telerik:ZoomScrollSettings ScrollMode="ScrollAndZoom"></telerik:ZoomScrollSettings>
                                </telerik:ChartArea.ZoomScrollSettingsX>
                                <telerik:ChartArea.AxisX>
                                   
                                        <telerik:AxisX DefaultLabelFormat="#VAL{hh:mm:ss}" LabelStep="2"
                                                   LayoutMode="Normal" Title="Time" AutoRange="False"
                                                   MinValue="{Binding AxisXMinValue}"
                                                   MaxValue="{Binding AxisXMaxValue}"
                                                   Step="{Binding AxisXStep}"
                                                  
                                                   >
                                       
                                    </telerik:AxisX>
                                </telerik:ChartArea.AxisX>
                                <telerik:ChartArea.AxisY>
                                    <telerik:AxisY DefaultLabelFormat="#VAL" Title="CPU Utilization in %"
                                                   AutoRange="True"  />
                                </telerik:ChartArea.AxisY>
                              
                            </telerik:ChartArea>
                        </telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartDefaultView.ChartLegend>
                            <telerik:ChartLegend x:Name="ChartLegend1" />
                        </telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartDefaultView.ChartTitle>
                            <telerik:ChartTitle Content="Server Load" />
                        </telerik:ChartDefaultView.ChartTitle>
                    </telerik:ChartDefaultView>
                </telerik:RadChart.DefaultView>
            </telerik:RadChart>
        </Border>
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Windows.Controls;
using System.Windows.Threading;
using Telerik.Windows.Controls.Charting;
using System.Collections.ObjectModel;
using Telerik.Windows.Controls;
using System.Windows;

namespace CGS.UX.PlotDisplay
{
    /// <summary>
    /// Interaction logic for Example.xaml
    /// </summary>
    public partial class Example : UserControl
    {
        private int             _collectionIdx = 0;
       
        public Example()
        {
            InitializeComponent();

            //this.SetUpRadChart();
           
            //this.SetUpXAxis();

            List<string> mnemonics = new List<string>();

            mnemonics.Add( "AAA" );
            mnemonics.Add( "BBB" );

            SetUpSeriesMapping( mnemonics );

        }

        public void SetupMnemonic( List<string> mnemonics )
        {
            this.rdChart.SeriesMappings.Clear();
            this.SetUpSeriesMapping(mnemonics);

        }

        private void UserControl_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {
            (this.DataContext as ExampleViewModel).StartTimer();
        }

        private void UserControl_Unloaded(object sender, System.Windows.RoutedEventArgs e)
        {
            (this.DataContext as ExampleViewModel).StopTimer();
        }

      
        private void SetUpSeriesMapping(List<String> mnemonics)
        {
            foreach (string mnemonic in mnemonics)
            {
                (this.DataContext as ExampleViewModel).TmData.Add( new ObservableCollection<TMData>() );
                //Series mapping for the collection with index 0
                SeriesMapping seriesMapping = new SeriesMapping();
                seriesMapping.CollectionIndex = _collectionIdx;
                seriesMapping.LegendLabel = mnemonic;
                seriesMapping.SeriesDefinition = new LineSeriesDefinition();
                seriesMapping.SeriesDefinition.ShowItemLabels = false;
                (seriesMapping.SeriesDefinition as LineSeriesDefinition).ShowPointMarks = false;

                //seriesMapping.SeriesDefinition.EmptyPointBehavior = EmptyPointBehavior.Gap;

                ItemMapping itemMapping;

                itemMapping = new ItemMapping();
                itemMapping.DataPointMember = DataPointMember.XValue;
                itemMapping.FieldName = "Time";
                seriesMapping.ItemMappings.Add(itemMapping);

                itemMapping = new ItemMapping();
                itemMapping.DataPointMember = DataPointMember.YValue;
                itemMapping.FieldName = "EU";
                seriesMapping.ItemMappings.Add(itemMapping);

                this.rdChart.SeriesMappings.Add(seriesMapping);
                _collectionIdx++;

               
            }

        }
    }
}

[Evgenia]

Hi Kibeom,

If you want  your TextBox to be focused when the Chart is Loaded you can add the following code line after the InitializeComponent constructor:

Dispatcher.BeginInvoke(() => { txtBox.Focus();});

For more information about the Dispatcher's methods take a look at this msdn topic.

Best wishes,
Evgenia
the Telerik team

[Shlomi]

Hi,

We are in the middle of an evaluation of your WPF controls.

I'm having the same problem when using ZoomScrollSettings in my charts.
When I'm updating the data on the chart, the chart takes the focus. If I have an open window, it looses focus every chart update !

I tested it on your examples:"RadControls for WPF Q3 2011 Demos" in the project "Live Data"
 (in folder ~\Telerik\RadControls for WPF Q3 2011\Demos\Examples\Chart\LiveData)

I've added only these following lines to the xaml (in your demo):

  <telerik:ChartArea.ZoomScrollSettingsX >
                    <telerik:ZoomScrollSettings x:Name="zoomSettings" ScrollMode="ScrollAndZoom" MinZoomRange="0.005" />                </telerik:ChartArea.ZoomScrollSettingsX>

Now, if I have a button that opens a window and the zoom ScrollMode is not set to "None", every data update the chart takes focus.

We need an answer ASAP.

Thanks.

[Giuseppe]

Hi Shlomi,

As mentioned in the support ticket you have opened on the same topic this is a bug and we can suggest you as a temporary workaround to handle the RadChart.Loaded event like this:

private void RadChart1_Loaded(object sender, RoutedEventArgs e)
        {
            this.RadChart1.ChildrenOfType<RadSlider>().FirstOrDefault().Focusable = false;
        }


Best wishes,
Giuseppe
the Telerik team