Customizing tooltip

This post shows how to customize the tooltip in silverlight toolkit charts

we need to add references to Microsoft.Windows.Controls.DataVisualization as well as Microsoft.Windows.Controls.DataVisualization dll’s

Grab the Template from the toolkit source
the only change I made was to replace the Tooltip content

original

<ToolTipService.ToolTip>
 <StackPanel>
  <ContentControl Content=”{TemplateBinding FormattedDependentValue}” />
  <ContentControl Content=”{TemplateBinding FormattedRatio}” />
 </StackPanel>
</ToolTipService.ToolTip>

chart_std_tooltip

modified

<ToolTipService.ToolTip>
 <StackPanel Orientation=”Horizontal”>
  <ContentControl Content=”{TemplateBinding IndependentValue }” />
                <TextBlock Text=” – “></TextBlock>
                <ContentControl Content=”{TemplateBinding FormattedDependentValue}” />
                <TextBlock Text=” – “></TextBlock>
                <ContentControl Content=”{TemplateBinding FormattedRatio}” />
 </StackPanel>
</ToolTipService.ToolTip>

chart_custom_tooltip

The chart itself  is declared along with the style as following

<charting:Chart x:Name=”chart1″ >
            <charting:Chart.StylePalette>
                <datavis:StylePalette>
                    <Style TargetType=”charting:PieDataPoint”>                       
                        <Setter Property=”Background”
                                Value=”blue” />
                        <Setter Property=”Template”
                                Value=”{StaticResource PieDataPointTemplate}” />
                    </Style>
                    <Style TargetType=”charting:PieDataPoint”>
                        <Setter Property=”Background”
                                Value=”red” />
                        <Setter Property=”Template”
                                Value=”{StaticResource PieDataPointTemplate}” />
                    </Style>
                    <Style TargetType=”charting:PieDataPoint”>
                        <Setter Property=”Background”
                                Value=”green” />
                        <Setter Property=”Template”
                                Value=”{StaticResource PieDataPointTemplate}” />
                    </Style>
                    <Style TargetType=”charting:PieDataPoint”>
                        <Setter Property=”Background”
                                Value=”yellow” />
                        <Setter Property=”Template”
                                Value=”{StaticResource PieDataPointTemplate}” />
                    </Style>
                </datavis:StylePalette>
            </charting:Chart.StylePalette>
            <charting:Chart.Series>
                <charting:PieSeries  IndependentValueBinding=”{Binding Key}”
                                    DependentValueBinding=”{Binding Path=Value}”>                   
                </charting:PieSeries>
            </charting:Chart.Series>
        </charting:Chart>

you can download the source here

Advertisements

Changing Styles using ImplicitStyleManager-2

In an earlier post we saw it was easy to change styles using ImplicitStyleManager. But TabControl and DataGrid were not used in the sample. Looks like we need to do some additional work to get that to work.

I modified the sample to include a DataGrid, TabControl and DataGrid nested inside a TabControl

Tha change is we have to add a LayoutUpdated eventhandler and have logic like this to set the styles for tabcontrol1 and datagrid2 which is nested inside the tabcontrol

 void Demo_LayoutUpdated(object sender, EventArgs e)
        {
            ImplicitStyleManager.SetApplyMode(tabcontrol1, ImplicitStylesApplyMode.Auto);
            ImplicitStyleManager.Apply(tabcontrol1);

            ImplicitStyleManager.SetApplyMode(datagrid2, ImplicitStylesApplyMode.Auto);
            ImplicitStyleManager.Apply(datagrid2);
        }

you can comment these lines in the above event handler and see the styles are not going to be applied.

if you download the code and run it without any changes and change the style few times. it will start giving random errors. Try refreshing the application and use the same style again(it will work, but fail on some other style).

I am not sure why I get those errors

you can download the code here

Tip:Changing background of AutoCompleteBox

If we want to change the Background of the AutoCompleteBox, we have to make a small change to the template.  Grab the Style for the AutoCompleteBox from the toolkit source and make the following change and set the style of the control to the name give to our style

 <TextBox IsTabStop=”True”
 x:Name=”Text”         Style=”{TemplateBinding TextBoxStyle}”
        Margin=”0″ />

to

 <TextBox IsTabStop=”True”
 x:Name=”Text” Background=”{TemplateBinding Background }”
        Style=”{TemplateBinding TextBoxStyle}”
        Margin=”0″ />

Actually this might be better solution

<controls:AutoCompleteBox ... >
<controls:AutoCompleteBox.TextBoxStyle>
<Style TargetType="TextBox">
<Setter Property="Background" Value="Red" />
</Style>
</controls:AutoCompleteBox.TextBoxStyle>
</controls:AutoCompleteBox>