I am currently working on creating a theme for charts.
Beside other things, I want to make the bars in BarSeries have a flat look(without borders).
I want to make it to work with implicit styling so I added a Style to BarDataPoint(without a Key because it needs to work by implicit styling) but it is not applied.
Any idea why is it is not applied?
Is it because of DataPointStyle style from Palette which is applied instead?
What I am trying to do is to change the look of the BarDataPoint but still have the colors from the palette applied. And also try to make this work by pure XAML(if possible).
In order to make this work, the only way I see is by changing DataPointStyle(in each ResourceDictionary from Chart.Palette) to have TargetType set to BarDataPoint and Template set to my template implementation:
<toolkit:Chart.Palette>
<toolkit:ResourceDictionaryCollection>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="toolkit:BarDataPoint" BasedOn="{StaticResource BarDataPointStyle}">
<Setter Property="Background" Value="Yellow" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
</ResourceDictionary>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="toolkit:BarDataPoint" BasedOn="{StaticResource BarDataPointStyle}">
<Setter Property="Background" Value="Red" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
</ResourceDictionary>
</toolkit:ResourceDictionaryCollection>
</toolkit:Chart.Palette>
But since this is for implicit style for Chart control, how would that work if I have a Char control with a different type of series, for example a Chart with ColumnSeries? I don't think the DataPointStyle will work in this case because it is targeting the BarDataPoint type(I suppose the app will crash).
Am I forced to create different Chart styles with different keys(each style having DataPointStyle changed to target different control template)?
But then, how will that work for a Chart control with several different series?
I also tried to use an implicit style for toolkit:BarDataPoint in the palette's resource dictionary like this, but without success:
<Setter Property="Palette">
<Setter.Value>
<toolkit:ResourceDictionaryCollection>
<ResourceDictionary>
<SolidColorBrush x:Key="Background"
Color="#FFCA294D" />
<Style TargetType="toolkit:BarDataPoint">
<Setter Property="Template"
Value="{StaticResource BarDataPointTemplate}" />
<Setter Property="Background"
Value="{StaticResource Background}" />
</Style>
I tried to look to themes like JetPack but they don't seem to do what I want.
Thanks!
sorry for late update.
check this solution. may help others too
Silverlight 4: Chart Toolkit Color Set
Related
I had asked this question before, in regards to the AxisPanel:
Implicit styles not working in SciCharts WPF?
I'm starting to notice that there are more issues further down... not sure if this was fixed in the "last" update or not.
If I create an implicit style, say...
<Style TargetType="{x:Type SciCharts:SciChartSurface}" BasedOn="{x:Type SciCharts:SciChartSurface}">
<Setter Property="BorderBrush" Value="Red" />
</Style>
That the style is completely ignored. It's placed above the actual SciChart in the scheme of all things, such that my hierarchy is:
<SomeControl>
<SomeControl.Resources>
Implicit Styles Here
</SomeControl.Resources>
<Some Other Control />
<SciChartSurface />
</SomeOtherControl>
The BorderBrush itself is pulling from the DefaultStyle, supposedly (checking with Snoop) and not the ImplicitStyle (Snoop does a marvelous job of telling us which it pulls from -- but not where that Style is located). The BorderBrush is bound to the DefaultStyle and completely ignores whatever is set in the Implicit Style.
I'm not sure if there is something I'm missing, but the end result is that we have some application-wide settings we'd like to make to all of our SciCharts and very little support to do it, aside from literally having to specify a style on every element.
I'm curious if, per my last question (linked above), that this was a "large" issue for more than just AxisPanel and extended to all of the SciChart's controls/elements -- and more than just AxisPanel was updated to support DefaultStyleKey?
Thanks in Advance!
I found the error, in this case it appears to be between keyboard and chair :P
You need
<Style TargetType="{x:Type s:SciChartSurface}" BasedOn="{StaticResource {x:Type s:SciChartSurface}}">
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="Margin" Value="10"/>
<Setter Property="BorderThickness" Value="10"/>
</Style>
not
<Style TargetType="{x:Type s:SciChartSurface}" BasedOn="{x:Type s:SciChartSurface}">
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="Margin" Value="10"/>
<Setter Property="BorderThickness" Value="10"/>
</Style>
I put together an example showing how to set implicit styles on SciChartSurface, NumericAxis and AxisPanel here..
This contains how to set the style on the AxisPanel implicitly:
AxisBase.AxisPanelStyle was added in build v5.1.0.11306 as mentioned here.
I have created a WPF application that uses styles extensively, and in particulare style inheritance (using BasedOn) to describe its appearance. So, throughout the application's main files (in <Application.Resources> and <Control.Resources>) I have defined styles such as the following:
<Color x:Key="MusicTextColor">Red</Color>
<SolidColorBrush x:Key="MusicTextColorBrush" Color="{DynamicResource MusicTextColor}" />
<Style x:Key="MusicText" TargetType="TextBlock">
<Setter Property="FontSize" Value="14" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Foreground" Value="{DynamicResource MusicTextColorBrush}" />
</Style>
<Style x:Key="MusicTitle" BasedOn="{StaticResource MusicText}" TargetType="TextBlock">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="40" />
</Style>
And in the UI I would use it normally like this to theme contents:
<TextBlock Style="{DynamicResource MusicTitle}">Artist:</TextBlock>
<Rectangle Background="{DynamicResource MusicTextColorBrush}" />
Now to theme the application, I am loading a theme.xaml file containing the theme changes in a <ResourceDictionary> at runtime and merge its resource dictionary with the application resources. The file might e.g. contain the following, which is supposed to change the color and font for all "music" labels:
<ResourceDictionary ... >
<Color x:Key="MusicTextColor">Green</Color>
<Style x:Key="MusicText" TargetType="TextBlock">
<Setter Property="FontSize" Value="14" />
<Setter Property="FontFamily" Value="Consolas" />
<Setter Property="Foreground" Value="{DynamicResource MusicTextColorBrush}" />
</Style>
</ResourceDictionary>
The problem is, this does not work. Neither the color change nor the font change is picked up. Note that the font IS actually changed (and this confirms that a resource merge takes place) if I use any of the redefined styles directly (e.g. "MusicText"), but not the derived one. The explanation is most likely that the BasedOn attribute uses a StaticResource binding, so it will not find the redefined styles, even after the merge. As I learned, BasedOn does not allow a DynamicResource binding that I would need here.
To me this looks like a common problem - theming an application with style inheritance at runtime, but I have not found a realistic solution until now.
Of course I could stop using style inheritance at all, but that would result in a lot of redunant code.
Also, I could copy ALL derived styles into the theme, but that would be error-prone and prevent further application updates (without manually updating each theme with each change).
Did I miss something or is there really no convenient solution for this?
I'm testing wpf applications using MahApp.Metro.
Somehow I'm not able to change the style of the ToggleSwitch. I just want to change simple properties like foreground or background of the switch. What am I doing wrong?
Mainwindow.xaml
<Style x:Key="flyoutToggleSwitchStyle" TargetType="{x:Type Controls:ToggleSwitch}" BasedOn="{StaticResource {x:Type Controls:ToggleSwitch}}">
<Setter Property="BorderBrush" Value="WhiteSmoke"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="Yellow"/>
<Setter Property="OnLabel" Value="Yes"/> <!--<<<---THIS WORKS!!-->
<Setter Property="OffLabel" Value="No"/>
</Style>
<Controls:ToggleSwitch Style="{StaticResource flyoutToggleSwitchStyle}">
<Controls:ToggleSwitch.Header>
<TextBlock>
Test
</TextBlock>
</Controls:ToggleSwitch.Header>
</Controls:ToggleSwitch>
Now there is a new ToggleSwitch property called SwitchForeground which allows changing the colour for ON position (tested on v0.14).
Example:
<controls:ToggleSwitch SwitchForeground="{StaticResource MyGreen}" />
The problem is that in the Mahapps.Metro ToggleSwitch most of the properties can not be changed within a style, because there is no TemplateBinding or Key defined in the original template definition.
So the style can only be changed by creating a new template. For this the ToggleSwitch and the ToggleSwitchButton templates have to be changed.
Issue on GitHub
Source of the templates
I have a simple 1 column ListView and I need to disable the mouse over effect for the GridViewColumnHeader.
I tried grabbing the style from here: http://msdn.microsoft.com/en-us/library/ms788747.aspx
However that gave my header a purple gradient so I guess it was the wrong style. I do notice it has a
<VisualState x:Name="MouseOver">
But I have no idea how to remove that without finding and including the correct GridViewColumnHeader style and then removing it.
I tried the following, but it doesn't do anything (The VisualState overrides?) and wouldn't work anyway as setting the background to null wouldn't be what I want.
<Style x:Key="hcs" TargetType="{x:Type GridViewColumnHeader}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
The problem is, like you said yourself, in MouseOver visual state and its Storyboard. I think it`s better to get rid from redundant functionality than try to override it later. So we basically just need the same style but without that storyboard. For bare minimum we need to have following things (can be found on MSDN via the link you provided):
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>
<Style x:Key="GridViewColumnHeaderGripper"
TargetType="Thumb">
<!-- Full GridViewColumnHeaderGripper style here -->
</Style>
<Style TargetType="GridViewColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewColumnHeader">
<!-- Standard template but with redundant Storyboard removed -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The last Style doesn`t have a key so it applies to all GridViewColumnHeader on page \ application (depends on where it is defined). Or you can set the key and use it only in specific grids.
That`s bare minimum so for more customizable approach it may be better to copy other parts of default style too.
I am trying to make the column header of my WPF Datagrid to be transparent.
I am able to set it to a color without problem, but I can't have it transparent. Here is what I tried:
<Style x:Key="DatagridColumnHeaderStyle" TargetType="{x:Type tk:DataGridColumnHeader}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="#C2C4C6" />
</Style>
<Style x:Key="DashboardGridStyle" TargetType="{x:Type tk:DataGrid}">
<Setter Property="ColumnHeaderStyle" Value="{StaticResource DatagridColumnHeaderStyle}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="RowBackground" Value="Transparent" />
</Style>
<tk:DataGrid Style="{StaticResource DashboardGridStyle}" >
...
</tk:DataGrid>
With this code, it seems to take the default brush.
What am I missing?
I used Snoop to take a look at what was happening. It seems that another DataGridColumnHeader is always created behind the one you can modify, and it's not affected by changes on styles. When you set a transparent background, in fact is being correctly applied, so what you see is that ghost header behind (which has the usual grey background).
If you apply a coloured background and play with Opacity, you will see how the two colours are mixed. I don't know if this can be solved.
With the answer from Natxo (thanks!), I was able to find a solution. And it is a simple one too!
Knowing that there was another DataGridColumnHeader behind the one we can modify through the ColumnHeaderStyle, I just had to set a style that will affect all DataGridColumnHeader:
<Style TargetType="{x:Type tk:DataGridColumnHeader}">
<Setter Property="Background" Value="Transparent" />
</Style>