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
Related
I am new XAML however I am given the task to override some styles for certain elements within an existing application.
In my custom Theme, I am attempting to override the style of a BORDER control.
From what I can tell (using Snoop) to inspect the application, the element I want to change is just a plain border.
The border also seems to have a Name of "SubMenuBorder". Please see the image below.
Here is the latest iteration of my style snippet in which I am trying to set the border control's Background, BorderBrush and BorderThickness BUT ONLY if the control has a name of "SubMenuBorder"
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="Name" Value="SubMenuBorder">
<Setter Property="Background" Value="Red"></Setter>
<Setter Property="BorderBrush" Value="Red"></Setter>
<Setter Property="BorderThickness" Value="20"></Setter>
</Trigger>
</Style.Triggers>
</Style>
Unfortunately the above does NOT work.
The style trigger does not seem to fire/apply to the intended control.
If I simplify things further and just style ALL borders with the following snippet, then it seems to work and the border control I want to change, is styled, but so is every other border control in the application.
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="Red"></Setter>
<Setter Property="BorderBrush" Value="Red"></Setter>
<Setter Property="BorderThickness" Value="20"></Setter>
</Style>
Further Findings
I attempted to use a DataTrigger... which unfortunately doesn't work either.
Snoop shows below that the data trigger is being satisfied, however on the second image below you can see that the property of the background and borderbrush are still from the parenttemplate.
Any ideas please?
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Name}" Value="SubMenuBorder">
<Setter Property="Background" Value="Red"></Setter>
<Setter Property="BorderBrush" Value="Red"></Setter>
<Setter Property="BorderThickness" Value="20"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
You cannot use triggers to modify a Border that is defined in a ControlTemplate, with the exception of using an implicit Style that applies to all elements of the type specified by the TargetType property of the implicit Style.
You will either have to modify the ControlTemplate itself, or programmatically find the Border element in the visual tree and then change its runtime property values. The first approach, i.e. modifying or creating a custom template, is the recommended approach.
The name "SubMenuBorder" is only known and applicable within that Border element's namescope.
I have a CustomControl and want to have the default value of TextBox default style definition. I don't know if it that is even possible.
This is what I have tried so far without success. But here you can see what I have in mind.
My default implementation to change the default style of the TextBox (in for example app.xaml to apply it global)
<Style TargetType="TextBox">
<Setter Property="BorderThickness" Value="2"/>
</Style>
Here I want to get the value of '2'.
<Style TargetType="controls:CustomControl">
<Setter Property="BorderThickness" Value="{Binding Source={x:Static TextBox.BorderThicknessProperty}}"/>
</Style>
The default value of the BorderThickness property of a TextBox is defined in the default style of the TextBox which is eventually applied to an instance of a TextBox at runtime.
So you cannot do something like this:
<Style TargetType="controls:CustomControl">
<Setter Property="BorderThickness" Value="{Binding Source={x:Static TextBox.BorderThicknessProperty}}"/>
</Style>
...unless you bind to an actual instance of a TextBox that uses the default style.
You could look at the default template of the TextBox and simply copy its default BorderThickness property value of 1 though:
<Style TargetType="controls:CustomControl">
<Setter Property="BorderThickness" Value="1"/>
</Style>
Obviously you can also bind to a property of a class from more than one Style, e.g.:
<Style TargetType="controls:CustomControl">
<Setter Property="BorderThickness" Value="{Binding Thickness, Source={StaticResource settings}}"/>
</Style>
In an application that I am working I need to have all of my next buttons look the same. So my plan was to make a style called next button style and apply as needed. However I need to set some dependency properties on the button to be the same.
Here is the xmal for the style
<Style x:Key="NextButtonStyle" TargetType="diControls:DIButton">
<Setter Property="Margin" Value="5"></Setter>
<Setter Property="DIButtonStyle" Value="DIGreenImageButtonWithText_Medium"></Setter>
<Setter Property="Image" Value="RightArrowIcon_Gray"></Setter>
<Setter Property="HoverImage" Value="RightArrowIcon_White"></Setter>
<Setter Property="Command" Value="{Binding Path=NextPressedCommand}"></Setter>
</Style>
The custom properties DIButtonStyle,Image and HoverImage all say an exception has been thrown by the target of an invocation. Is there any way around this error?
Thanks!
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
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>