Control Behaviors With Data Trigger

[Brad]

I have a chart that has two plots on it. I also have a ribbon bar with a few buttons that I'd like to use to control the pan and zoom behaviors of the chart. I'd like to accomplish this exclusively in the XAML file using data triggers. Please excuse the long code snip, but I'd like to provide a complete picture.

 

001.<Grid>
002.        <TabControl ItemsSource="{Binding TotalGradeProfile}">
003.
004.            <TabControl.ItemTemplate>
005.                <DataTemplate>
006.                    <TextBlock Text="{Binding Name}"/>
007.                </DataTemplate>
008.            </TabControl.ItemTemplate>
009.
010.            <TabControl.ContentTemplate>
011.                <DataTemplate>
012.                    <Grid>
013.                        <Grid.RowDefinitions>
014.                            <RowDefinition Height="Auto"/>
015.                            <RowDefinition Height="*"/>
016.                        </Grid.RowDefinitions>
017.
018.                        <Grid.ColumnDefinitions>
019.                            <ColumnDefinition Width="*"/>
020.                            <ColumnDefinition Width="Auto"/>
021.                        </Grid.ColumnDefinitions>
022.
023.                        <Ribbon Grid.Row="0"
024.                                Grid.ColumnSpan="2">
025.
026.                            <RibbonTab Header="Home" KeyTip="H">
027.                                <RibbonGroup x:Name="ZoomAndPanGroup"
028.                                             Header="Zoom and Pan">
029.
030.                                    <RibbonButton Label="Zoom"
031.                                                  Name="zoomButton"/>
032.
033.                                    <RibbonButton Label="Pan"
034.                                                  Name="panButton"/>
035.                                </RibbonGroup>
036.                            </RibbonTab>
037.                        </Ribbon>
038.
039.                        <telerik:RadCartesianChart x:Name="gradePlot"
040.                                                   Grid.Row="1"
041.                                                   Grid.Column="0"
042.                                                   Margin="2">
043.
044.                            <telerik:RadCartesianChart.Behaviors>
045.                                <telerik:ChartTrackBallBehavior ShowIntersectionPoints="True"
046.                                                                ShowTrackInfo="True"
047.                                                                SnapMode="AllClosePoints"/>
048.
049.                                <telerik:ChartPanAndZoomBehavior ZoomMode="Both"
050.                                                                 PanMode="None"
051.                                                                 x:Name="zoomBehavior"/>
052.
053.                            </telerik:RadCartesianChart.Behaviors>
054.
055.                            <telerik:RadCartesianChart.HorizontalAxis>
056.                                <telerik:LinearAxis SmartLabelsMode="SmartStepAndRange"
057.                                                    IsStepRecalculationOnZoomEnabled="True"
058.                                                    RangeExtendDirection="None"/>
059.                            </telerik:RadCartesianChart.HorizontalAxis>
060.
061.                            <telerik:RadCartesianChart.VerticalAxis>
062.                                <telerik:LinearAxis SmartLabelsMode="SmartStepAndRange"
063.                                                    IsStepRecalculationOnZoomEnabled="True"
064.                                                    RangeExtendDirection="None"/>
065.                            </telerik:RadCartesianChart.VerticalAxis>
066.
067.                            <!-- Plot 1 -->
068.                            <telerik:ScatterSplineSeries XValueBinding="Mp"
069.                                                            YValueBinding="RegionGrade"
070.                                                            ItemsSource="{Binding GradeProfiles}"
071.                                                            Stroke="Blue"
072.                                                            StrokeThickness="1">
073.
074.                                <telerik:ScatterSplineSeries.LegendSettings>
075.                                    <telerik:SeriesLegendSettings Title="Region"/>
076.                                </telerik:ScatterSplineSeries.LegendSettings>
077.
078.                                <telerik:ScatterSplineSeries.TrackBallInfoTemplate>
079.                                    <DataTemplate>
080.                                        <StackPanel Orientation="Vertical">
081.                                            <TextBlock Text="{Binding DataPoint.XValue, StringFormat=Milepost: {0}}"/>
082.                                            <TextBlock Text="{Binding DataPoint.YValue, StringFormat=Region Grade: {0:0.000}}"
083.                                                        Foreground="Blue"/>
084.                                        </StackPanel>
085.                                    </DataTemplate>
086.                                </telerik:ScatterSplineSeries.TrackBallInfoTemplate>
087.
088.                                <telerik:ScatterSplineSeries.RenderOptions>
089.                                    <telerik:BitmapRenderOptions/>
090.                                </telerik:ScatterSplineSeries.RenderOptions>
091.
092.                            </telerik:ScatterSplineSeries>
093.
094.                            <!-- Plot 2 -->
095.                            <telerik:ScatterSplineSeries XValueBinding="Mp"
096.                                                            YValueBinding="SubdivGrade"
097.                                                            ItemsSource="{Binding GradeProfiles}"
098.                                                            Stroke="Red"
099.                                                            StrokeThickness="1">
100.
101.                                <telerik:ScatterSplineSeries.LegendSettings>
102.                                    <telerik:SeriesLegendSettings Title="Subdivision"/>
103.                                </telerik:ScatterSplineSeries.LegendSettings>
104.
105.                                <telerik:ScatterSplineSeries.TrackBallInfoTemplate>
106.                                    <DataTemplate>
107.                                        <TextBlock Text="{Binding DataPoint.YValue, StringFormat=Subdivision Grade: {0:0.000}}"
108.                                                    Foreground="Red"/>
109.                                    </DataTemplate>
110.                                </telerik:ScatterSplineSeries.TrackBallInfoTemplate>
111.
112.                                <telerik:ScatterSplineSeries.RenderOptions>
113.                                    <telerik:BitmapRenderOptions/>
114.                                </telerik:ScatterSplineSeries.RenderOptions>
115.
116.                            </telerik:ScatterSplineSeries>
117.                        </telerik:RadCartesianChart>
118.
119.                        <telerik:RadLegend Items="{Binding LegendItems, ElementName=gradePlot}"
120.                                           BorderBrush="Black"
121.                                           BorderThickness="1"
122.                                           HorizontalAlignment="Right"
123.                                           VerticalAlignment="Top"
124.                                           Margin="0, 0, 2, 0"
125.                                           Grid.Row="1"
126.                                           Grid.Column="0"
127.                                           Background="White"/>
128.
129.                        <DataGrid Grid.Row="1"
130.                                  Grid.Column="1"
131.                                  ItemsSource="{Binding GradeProfiles}"
132.                                  AutoGenerateColumns="True"
133.                                  IsReadOnly="True">
134.                        </DataGrid>
135.                    </Grid>
136.
137.                    <DataTemplate.Triggers>
138.                        <DataTrigger Binding="{Binding ElementName=panButton, Path=IsToggle}"
139.                                     Value="True">
140.                            <Setter TargetName="zoomBehavior"
141.                                    Property="ZoomMode"
142.                                    Value="None"/>
143.                            <Setter TargetName="zoomBehavior"
144.                                    Property="PanMode"
145.                                    Value="Both"/>
146.                        </DataTrigger>
147.                    </DataTemplate.Triggers>
148.                </DataTemplate>
149.            </TabControl.ContentTemplate>
150.        </TabControl>
151.    </Grid>

[Martin Ivanov]

Hello Brad,

There are two issues in the provided code.

• The RibbonButton control doesn't have a IsToggle property. Instead use RibbonToggleButton and its IsChecked property.
• The chart's behaviors collection is not in the object graph of the XAML parse processor so setting TargetName cannot find the name 'zoomBehavior'.

To achieve your requirement you can bind the ZoomMode and PanMode property to the IsChecked property of RibbonToggleButton using a custom IValueConverter. For example:

<telerik:ChartPanAndZoomBehavior ZoomMode="{Binding ElementName=panButton, Path=IsChecked, Converter={StaticResource BoolToZoomPanModeConverter}}" />

I hope this helps.

Regards,
Martin Ivanov
Progress Telerik