no xaml dll question

[Amit]

I downloaded wpf example for RadCartesian from telerik.com site and since we are already using no xaml version of dlls, I need help generating Styles for this example, I want something to start with so that I can see the chart, right now I can see anything:

 

<local:ChannelsControlBase.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI" />
        </Style>
        <SolidColorBrush x:Key="AccentBrush" Color="#FF8EC441" />
    </local:ChannelsControlBase.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="3*" />
            <RowDefinition Height="2*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid Grid.ColumnSpan="2" Margin="0,0,0,15">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <TextBlock Text="Messages Sent / Received" FontSize="16" Margin="5,0,0,0" />
            <!--<telerik:RadButton Content="hello" Width="100" Height="100" Background="Black" BorderBrush="Red" Visibility="Visible"></telerik:RadButton>-->
            <telerik:RadCartesianChart Grid.Row="1" >
                <telerik:LineSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding Data}"  />
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:DateTimeContinuousAxis MajorStepUnit="Second"
                                                LabelInterval="5"
                                                LabelFormat="HH:mm:ss.f" FontFamily="Segoe UI"
                                                PlotMode="OnTicks" />
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis Minimum="500" 
                                    MajorStep="500"
                                    Maximum="2000" FontFamily="Segoe UI" />
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="Y" MajorYLineDashArray="3,4" />
                </telerik:RadCartesianChart.Grid>
            </telerik:RadCartesianChart>
        </Grid>
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <TextBlock Text="Site Activity by Time of Day" FontSize="16" Margin="5,0,0,0" />
            <telerik:RadCartesianChart Grid.Row="1" Palette="Windows8" Margin="0,0,40,0">
                <telerik:RadCartesianChart.Behaviors>
                    <telerik:ChartTrackBallBehavior ShowIntersectionPoints="True" />
                </telerik:RadCartesianChart.Behaviors>
                <telerik:AreaSeries CategoryBinding="Category" Fill="#7F8EC441" Stroke="#FF8EC441" StrokeThickness="2" ValueBinding="Value" ItemsSource="{Binding Data2}">
                    <telerik:AreaSeries.TrackBallInfoTemplate>
                        <DataTemplate>
                            <StackPanel Margin="3" Orientation="Horizontal">
                                <TextBlock Text="{Binding DataPoint.Category, StringFormat='Online users at {0:HH}h:'}" Margin="0,0,3,0" />
                                <TextBlock Text="{Binding DataPoint.Value}" FontWeight="Bold" />
                            </StackPanel>
                        </DataTemplate>
                    </telerik:AreaSeries.TrackBallInfoTemplate>
                </telerik:AreaSeries>
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:DateTimeContinuousAxis MajorStepUnit="Hour"
                                                LabelFormat="H\h" 
                                                LabelInterval="2" FontFamily="Segoe UI"
                                                PlotMode="OnTicks" />
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis Minimum="3000" 
                                    MajorStep="200"
                                    Maximum="4200" FontFamily="Segoe UI">
                    </telerik:LinearAxis>
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="Y" MajorYLineDashArray="3,4" />
                </telerik:RadCartesianChart.Grid>
            </telerik:RadCartesianChart>
        </Grid>
        <Grid Grid.Row="1" Grid.Column="1" Width="300">
            <Grid Margin="0,28,0,25" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="100" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Path Stretch="Fill" Data="M608.5,187 L351.5,187 L331.5,238 L608.49994,238 z" Fill="{StaticResource AccentBrush}" Grid.ColumnSpan="2" Margin="40,3,-6,3" />
                <TextBlock FontSize="36" Margin="0,0,6,0" Foreground="White" FontFamily="Segoe UI" Text="{Binding MessagesPerSecond}" HorizontalAlignment="Right" VerticalAlignment="Center" />
                <TextBlock Grid.Column="1" Margin="0,2,6,0" FontSize="12" FontFamily="Segoe UI" Text="AVG Messages per second" TextWrapping="Wrap" HorizontalAlignment="Right" VerticalAlignment="Center" />
                <Path Grid.Row="1" Stretch="Fill" Data="M608.5,187 L337.55035,187 L317.55035,238 L608.49994,238 z" Fill="{StaticResource AccentBrush}" Grid.ColumnSpan="2" Margin="25,3,-6,3"/>
                <TextBlock Grid.Row="1" Margin="0,0,6,0" FontSize="36" FontFamily="Segoe UI" Foreground="White" Text="{Binding MessagesPerMinute}" HorizontalAlignment="Right" VerticalAlignment="Center" />
                <TextBlock Grid.Row="1" Margin="0,2,6,0" Grid.Column="1" FontSize="12"  FontFamily="Segoe UI" Text="AVG Messages per minute" TextWrapping="Wrap" HorizontalAlignment="Right" VerticalAlignment="Center" />
                <Path Grid.Row="2" Stretch="Fill" Data="M608.5,187 L323.60071,187 L303.60071,238 L608.49994,238 z" Fill="{StaticResource AccentBrush}" Grid.ColumnSpan="2" Margin="10,3,-6,3"/>
                <TextBlock Grid.Row="2" Margin="0,0,6,0" FontSize="36" FontFamily="Segoe UI" Foreground="White" Text="3,729,600" HorizontalAlignment="Right" VerticalAlignment="Center" />
                <TextBlock Grid.Row="2" Margin="0,2,6,0" Grid.Column="1" FontSize="12" FontFamily="Segoe UI" Text="AVG Messages per hour" TextWrapping="Wrap" HorizontalAlignment="Right" VerticalAlignment="Center" />
            </Grid>
        </Grid>
    </Grid>

[Sia]

Hello Amit,

When you use implicit styles, you need to merge all needed resource dictionaries in your application's resources as described in our help. When you use RadCartesianChart, you need to merge:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Telerik.Windows.Themes.VisualStudio2013;component/Themes/Telerik.Windows.Controls.xaml"/>
            <ResourceDictionary Source="/Telerik.Windows.Themes.VisualStudio2013;component/Themes/Telerik.Windows.Controls.Chart.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Please find attached the same demo project with the right references. Also please have in mind that if you set custom style, you need to base it on ours.

Regards,
Sia
Telerik

 

 

[Amit]

Thanks a lot Sia, That really helped.

[Amit]

Hi, even though the code you sent worked in standalone application but when I add this code to my existing application I can not see the chart.

Existing application already use other telerik controls and we have our resource files with custom styles for all the controls and we have those resource files in the merge dictionary and now I am also adding the above 2 resource dictionaries with our custom resource files.

 

example: 

<ResourceDictionary.MergedDictionaries>              
                <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.Chart.xaml"/>
                <ResourceDictionary Source="Resources/TypographyLayout.xaml"/>
                <ResourceDictionary Source="Styles/RadDataVisualization.xaml" />
                <ResourceDictionary Source="Styles/RadInput.xaml" />                
                <ResourceDictionary Source="Resources/gear.xaml" />
                <ResourceDictionary Source="Resources/theme.xaml" />
                <ResourceDictionary Source="Resources/nextArrow.xaml" />
                <ResourceDictionary Source="Resources/prevArrow.xaml" />
                <ResourceDictionary Source="Resources/toggle.xaml" />
                <ResourceDictionary Source="Resources/keyboard.xaml" />
                <ResourceDictionary Source="Resources/tabNavigation.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>

Not sure if there is any different way when we have our custom resource files and also want to add above 2 for implicit styles? .

[Pavel R. Pavlov]

Hi Amit,

I am not sure how you have defined your customized styles. This is why I want to point out that each one of your custom styles should be BasedOn our default styles. You can see how this can be done in the Setting Implicit Styles for RadComboBox Example section of the already referenced article. 

Please ensure that all styles are BasedOn ours and let us know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Amit]

finally I got that working, here is another issue I am having, we are still using older version of dlls and in the below code, I want to have XAxis shows data for last 10 minutes, so I am setting Minimum value to DateTime.Now.AddMinutes(-10) and it shows correctly to start with but the start time is not moving, it does not change the minimum value even if i try to change it in code behind, it start at showing 10 minutes and keep adding minutes even though I want to only see last 10 minutes, I want to make sure that XAxis flow with time and data.. I tried to use TickOrigin property but it does not exist in older version, we have limitation and can not use new version right now.. please advice

 

<telerik:RadCartesianChart Grid.Row="1" >
                <telerik:LineSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding Data}" />             
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:DateTimeContinuousAxis MajorStepUnit="Second" MajorStep="12"  MaximumTicks="10"  Minimum="{Binding StartTime}"
                                                LabelInterval="5" LabelFitMode="Rotate" LabelRotationAngle="-45"
                                                LabelFormat="HH:mm" 
                                                PlotMode="BetweenTicks" FontFamily="Segoe UI"    />
                                                 
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis Minimum="500" 
                                    MajorStep="500"
                                    Maximum="2000" FontFamily="Segoe UI" />
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="Y" MajorYLineDashArray="3,4" />
                </telerik:RadCartesianChart.Grid>
            </telerik:RadCartesianChart>

[Pavel R. Pavlov]

Hi,

The behavior that you report is the designed and expected one. The binding of the Minimum property is evaluated once. Please keep in mind that that the RadChartView component is a data visualization tool. It visualized the populated data. This means that your requirement can be implemented on application data level. In other words it can be implemented in the ViewModels of the application.

To achieve your requirement please take a look at our Live Data demo project. I believe it demonstrates what you need to achieve.

Also I will kindly ask you to open new support thread if you have any further questions. This will help you to easily find your questions and also will help us to better handle your requests.

Regards,
Pavel R. Pavlov
Telerik