Control Behaviors With Data Trigger

2 posts, 0 answers
  1. Brad
    Brad avatar
    4 posts
    Member since:
    Mar 2016

    Posted 01 Nov Link to this post

    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>
  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1475 posts

    Posted 06 Nov Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top