Recently
all the sites and apps have started following the Metro UI. Even I like it as it looks
elegant and simple. So I thought of giving my old Telerik chart application a
metro theme. However, as the site says, I did not had the Telerik.Windows.Themes.Metro.dll, I could not add the theme just by writing one line of code. So I
thought of creating it on my own. At
first it looked tough for me to rip down the super glossy, rich and otherwise
super cool UI of Telerik Charts into Solid fills and non glossy UI to match the
Metro standards. Not because it was difficult but it was hard for me to disturb
the richness of the Telerik charts :) Phew! This is how I finally did it...
All you have to do
is delete the gloss in the charts. This is usually done by adding an extra
basic UI element with a partially transparent gradient fill. For eg. If you
take the Pie chart...this is the extra circle that gives the gloss effect.
You may not be able
to able to remove this layer by styling the entire Pie chart. For this you will
have to style a single Pie Element or Slice. You may search in the Assets panel
of your expression Blend for a Pie slice or may add this
<telerikCharting:Pie
HorizontalAlignment="Left" Height="100"
VerticalAlignment="Top" Width="100"/>
Once added right click
on the Pie and select the Edit Template->Edit a copy option. Once the
template for the Pie opens up you will see the basic elements of style used in
the slice. You will find that there is an ellipse on top of the
“PART_DefiningGeometry”. This ellipse must be having the transparent gradient.
Remove this ellipse or collapse this ellipse.
Now apply this style to your SeriesDefinition...your metro UI will be applied.
To apply the style from code behind use this
Code:
SeriesMapping pieSeries = new SeriesMapping();
pieSeries.SeriesDefinition = new PieSeriesDefinition();
pieSeries.SeriesDefinition.ItemStyle = App.Current.Resources["PieStyle1"] as Style;
Here is what the end product will look like. I have added few bright
colours in the PalleteBrushes collection to match the dark background.
Here is the complete code to this style,
Code:
<RadialGradientBrush x:Key="PieMaskBrush" GradientOrigin="0.5,0.5">
<GradientStop Color="#33FFFFFF" Offset="0.88"/>
<GradientStop Color="#00FFFFFF" Offset="0.65"/>
<GradientStop Offset="0.89"/>
</RadialGradientBrush>
<Style x:Key="PieStyle1" TargetType="telerik:Pie">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:Pie">
<Canvas x:Name="PART_MainContainer">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" ScaleX="0"/>
<TranslateTransform x:Name="PART_ExplodeTransform"/>
</TransformGroup>
</Canvas.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="HoverStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Hovered">
<Storyboard>
<DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation Duration="0.00:00:00.15" To="0.15" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<DoubleAnimation Duration="0.00:00:00.2" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="PART_ExplodeTransform"/>
<DoubleAnimation Duration="0.00:00:00.2" To="0" Storyboard.TargetProperty="Y" Storyboard.TargetName="PART_ExplodeTransform"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0.00:00:00.2" Storyboard.TargetProperty="X" Storyboard.TargetName="PART_ExplodeTransform"/>
<DoubleAnimation Duration="0.00:00:00.2" Storyboard.TargetProperty="Y" Storyboard.TargetName="PART_ExplodeTransform"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse Clip="{TemplateBinding FigurePath}" Height="{TemplateBinding ItemActualHeight}" Style="{TemplateBinding ItemStyle}" StrokeThickness="0" Width="{TemplateBinding ItemActualWidth}"/>
<Path x:Name="PART_DefiningGeometry" Data="{TemplateBinding FigurePath2}" Fill="Transparent" Style="{TemplateBinding ItemStyle}" Stroke="{x:Null}"/>
<Ellipse Clip="{TemplateBinding FigurePath3}" Fill="{StaticResource PieMaskBrush}" Height="{TemplateBinding ItemActualHeight}" Width="{TemplateBinding ItemActualWidth}" Visibility="Collapsed"/>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
0 comments:
Post a Comment