只需对Telerik Control进行微小更改即可轻松创建样式

时间:2011-08-11 21:08:30

标签: silverlight xaml telerik

我的项目目前有一个带有图例的PieChart。由于尺寸限制,我被要求进行修改,如果将鼠标悬停在图例中的名称上,它将显示全名(如果它被部分切断)。这向我揭示了一个问题,如果你想在Telerik控件中做一个小的功能改变,你将不得不为它开发一个完整的风格。

我觉得这个问题没有简单的答案,所以我想我会问,看看聪明的人是否聪明一点。我们使用了很多Telerik控件,所以如果我可以用这样的东西控制它们而不必完全重做它们,它会让我对我的界面更高级的功能有很大的控制。

作为一个说明,我们目前正在使用版本2011.1.315.1040,我尝试更新到今天的最新版本,但似乎他们改变了我们经常使用的控件,所以我宁愿不必更新,除非真的这是一个好处,因为需要进行大量的改造。

我可以在telerik网站上找到我试图修改的示例样式here

这是我们正在使用的饼图。

<telerik:RadChart Name="CoreChart" 
                          VerticalAlignment="Top" 
                          PaletteBrushesUseSolidColors="True" 
                          PaletteBrushesRepeat="True" 
                          BorderBrush="Transparent" 
                          Background="Transparent" 
                          BorderThickness="0">
    <telerik:RadChart.PaletteBrushes>
        <SolidColorBrush Color="#93d2ff" />
        <SolidColorBrush Color="#ce0013" />
    </telerik:RadChart.PaletteBrushes>
    <telerik:RadChart.SeriesMappings>
        <telerik:SeriesMapping>
            <telerik:ItemMapping FieldName="Value" DataPointMember="YValue" />
            <telerik:ItemMapping FieldName="Title" DataPointMember="LegendLabel" />
            <telerik:SeriesMapping.SeriesDefinition>
                <telerik:PieSeriesDefinition ShowItemLabels="False"  
                         ShowItemToolTips="True" 
                         ItemToolTipFormat="{Binding ToolTipFormat}">
                    <telerik:PieSeriesDefinition.InteractivitySettings>
                        <telerik:InteractivitySettings SelectionMode="Single"  
                                  SelectionScope="Item" HoverScope="None"/>
                    </telerik:PieSeriesDefinition.InteractivitySettings>
                </telerik:PieSeriesDefinition>
            </telerik:SeriesMapping.SeriesDefinition>
        </telerik:SeriesMapping>
    </telerik:RadChart.SeriesMappings>

    <telerik:RadChart.DefaultView>
        <telerik:ChartDefaultView ChartLegendPosition="Right" >
            <telerik:ChartDefaultView.ChartArea>
                <telerik:ChartArea HorizontalAlignment="Left" LegendName="ChartLegend"
                         BorderBrush="Transparent" EnableAnimations="True" 
                         Background="Transparent" >
                    <telerik:ChartArea.AxisX>
                        <telerik:AxisX AxisLabelsVisibility="Collapsed" />
                    </telerik:ChartArea.AxisX>
                </telerik:ChartArea>
            </telerik:ChartDefaultView.ChartArea>
            <telerik:ChartDefaultView.ChartLegend >
                <telerik:ChartLegend x:Name="ChartLegend" Style="{StaticResource 
                       ChartLegendStyle}" LegendItemMarkerShape="Square" Header="" 
                       BorderThickness="0" Background="Transparent"
                       BorderBrush="Transparent" Width="150" />
            </telerik:ChartDefaultView.ChartLegend>
        </telerik:ChartDefaultView>

    </telerik:RadChart.DefaultView>
</telerik:RadChart>

1 个答案:

答案 0 :(得分:1)

构建控件的方式,您必须为ControlTemplate创建一个ChartLegendItem的样式。在Telerik文档的链接中,有一个名为“PART_TextBlock”的TextBlock。将其更改为如下所示:

<TextBlock x:Name="PART_TextBlock"
           Grid.Column="1"
           Foreground="{TemplateBinding Foreground}"
           Margin="{TemplateBinding Margin}"
           Padding="{TemplateBinding Padding}"
           Text="{TemplateBinding Label}"
           TextTrimming="CharacterEllipsis"
           ToolTipService.ToolTip="{Binding Text, RelativeSource={RelativeSource Self}}" />

ChartLegend

的情况下
<telerik:ChartLegend x:Name="ChartLegend" 
                     .....
                     LegendItemStyle="{StaticResource MyLegendItemStyle}" />

这样可以节省您对Legend

样式的需求

另一个提示,要获得Telerik控件的所有默认样式,请转到c:\Program Files (x86)\Telerik\RadControls for Silverlight Q1 2011\Themes - 那里有一个解决方案,其中包含所有主题的所有样式。