Styling the Oxyplot tooltip and showing on mouse hover ( WPF)

While using chart controls for one of my WPF projects, I had to use Oxyplot graph controls. I came across an issue as to how to style the tooltip and show the tooltip on mouse hover . Below is the solution.

How to style the tooltip and show it on mouse hover of the series ? 

I am styling a plot which shows line series with X and Y axis.The two line series are bound to ObservableCollection<DataPoint> . All the dynamicresource and staticresource bindings of styles are present in a common resourcedictionary. You’ll can add your own style . Below is the style shown for OxyPlot plot which styles the tracker element and tooltip .

1. Define it either in resourcedictionary or in usercontrol.resources section.
2. xmlns:oxy=”clr-namespace:OxyPlot.Wpf;assembly=OxyPlot.Wpf” Add this namespace.
3. <Style
   x:Key=”PlotStyle”
   TargetType=”{x:Type oxy:Plot}”>
   <Setter Property=”DefaultTrackerTemplate”>
   <Setter.Value>
   <ControlTemplate>
   <oxy:TrackerControl
   Background=”Black”
   LineExtents=”{Binding PlotModel.PlotArea}”
   LineStroke=”Gray”
   Position=”{Binding Position}”><Border
   Margin=”2″
   Style=”Gray”>
   <Grid Margin=”6″>
   <Grid.RowDefinitions>
   <RowDefinition />
   <RowDefinition />
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
   <ColumnDefinition />
   <ColumnDefinition />
   </Grid.ColumnDefinitions>
   <TextBlock
   Grid.Column=”0″
   Grid.Row=”0″
   Margin=”2″
   Style=”{StaticResource NormalTextStyle}”
   Text=”X :” />
   <TextBlock
   Grid.Column=”1″
   Grid.Row=”0″
   Margin=”2″
   Style=”{StaticResource NormalTextStyle}”
   Text=”{Binding
   DataPoint.X,
   StringFormat={}{0:0.##}}” />
   <TextBlock
   Grid.Column=”0″
   Grid.Row=”1″
   Margin=”2″
   Style=”{StaticResource NormalTextStyle}”
   Text=”Y :” />
   <TextBlock
   Grid.Column=”1″
   Grid.Row=”1″
   Margin=”2″
   Style=”{StaticResource NormalTextStyle}”
   Text=”{Binding
   DataPoint.Y,
   StringFormat={}{0:0.##}}” />

   </Grid>
   </Border>

   </oxy:TrackerControl>
   </ControlTemplate>

   </Setter.Value>
   </Setter>
   </Style>

4. XAML for oxplot graph which shows line series bound to collections and styled with resources declared in our common file.
5. <oxy:Plot
   x:Name=”PlotPlane”
   Grid.Column=”0″
   Grid.Row=”1″
   Margin=”-25,15,25,-30″
   Background=”Transparent”
   PlotAreaBorderColor=”Transparent”
   Style=”{StaticResource PlotStyle}”
   TextColor=”{DynamicResource UI.ColoursDefault}”>
   <oxy:Plot.Series>
   <oxy:LineSeries
   Color=”{DynamicResource UI.ColoursOrange}”
   ItemsSource=”{Binding
   DataSeriesToDisplay1,
   UpdateSourceTrigger=PropertyChanged}”
   MarkerFill=”{DynamicResource UI.ColoursOrange}”
   MarkerSize=”3″
   MarkerType=”Circle” />
   <oxy:LineSeries
   Color=”{DynamicResource UI.ColoursBlue}”
   ItemsSource=”{Binding
   DataSeriesToDisplay2,
   UpdateSourceTrigger=PropertyChanged}”
   MarkerFill=”{DynamicResource UI.ColoursBlue}”
   MarkerSize=”3″
   MarkerType=”Circle” />
   </oxy:Plot.Series>
   <oxy:Plot.Axes>
   <oxy:LinearAxis
   Title=”{Binding
   AxisName1,
   UpdateSourceTrigger=PropertyChanged}”
   AxislineColor=”{DynamicResource UI.ColoursDefault}”
   AxislineStyle=”Solid”
   MajorStep=”150″
   PositionAtZeroCrossing=”True”
   TicklineColor=”{DynamicResource UI.ColoursDefault}” />
   <oxy:LinearAxis
   Title=”{Binding
   AxisName2,
   UpdateSourceTrigger=PropertyChanged}”
   AxislineColor=”{DynamicResource UI.ColoursDefault}”
   AxislineStyle=”Solid”
   MajorStep=”150″
   Position=”Bottom”
   PositionAtZeroCrossing=”True”
   TicklineColor=”{DynamicResource UI.ColoursDefault}” />
   </oxy:Plot.Axes>
   </oxy:Plot>
6. To show the tooltip on mouse hover below is code written in code-behind.
7. this.PlotPlane.ActualController.UnbindMouseDown(OxyMouseButton.Left);
   this.PlotPlane.ActualController.BindMouseEnter(PlotCommands.HoverSnapTrack);

8. 

   An oxyplot graph with styled series , styled tooltip shown on mouse hover. The tracker is also styled.

Service Method hits twice. On client side you get “Bad request ” HTTP request…

Why?

You send the correct parameters to your asynchronous post operation, you verify all the parameters are set. You debug the method giving “Bad request error” message and find , the debug point is being hit , but it is being hit twice ..

You check all the service method calls, but at every place, they are called only once.. So what’s the reason of service method being hit twice…

When writing contracts for your services, do check for these two important points.

1) KnownType Attribute  – Incase your result is a user defined class with collection of more user defined classes, include all the classes and their collections using this attribute. If any type is missed the service method cannot recognize the type and gets hit twice .

2) Every class being passed in service method should be decorated with DataContract. If not you might face above issue.

ASP.NET MVC4 and jQuery Mobile.

With the ever increasing number of devices native application development for every device has become time-consuming and costly. The need of hour is to have a single codebase that can target multiple platforms. The session below shows how you can leverage ASP.NET MVC 4 and jQuery Mobile to build applications ready for mobile devices .
To get started you need :
1) Visual Studio 2010 with Service Pack 1 or Visual Studio 2012
2) ASP.NET MVC 4
3) jQuery Mobile
4) Opera Mobile Emulator for Windows
5) Default agent switcher for Mozilla Firefox

References :
ASP.NET MVC4 in Action
Pro jQuery Mobile

http://www.hanselman.com/blog/MakingASwitchableDesktopAndMobileSiteWithASPNETMVC4AndJQueryMobile.aspx

http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features

http://jquerymobile.com/