I am trying to change the background color of Expanders by using style triggers and it works but it changes all the original style of Expander.
I am using Material design in XAML expander and when i just try to change background color of Expander, it changes the Expander style completely .
please help me how i can change only one style and not all the styles of an element when using style triggers.
Style Trigger
<Style x:Key="ExpenderColor" TargetType="Expander">
<Setter Property="Background" Value="black"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Aqua"/>
</Trigger>
</Style.Triggers>
</Style>
Applying Style
<Expander Style="{DynamicResource ExpenderColor}" Margin="0 5 0 0"
HorizontalAlignment="Stretch">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Home" />
<TextBlock Margin="15 0 0 0">DASHBOARD</TextBlock>
</StackPanel>
</Expander.Header>
</Expander>
Images
Original Material Design Expander
After adding style property
Try setting BasedOn="{StaticResource {x:Type Expander}}" to your ExpenderColor style.
<Style x:Key="ExpenderColor" TargetType="Expander"
BasedOn="{StaticResource {x:Type Expander}}">
<Setter Property="Background" Value="black"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Aqua"> </Setter>
</Trigger>
</Style.Triggers>
</Style>
Related
I am creating a ControlTemplate for a TabItem and I am trying to set the foreground color of the usercontrol contained in the ContentPresenter used in the template. I can not set it on the ContentPresenter itself because a ContentPresenter does not have the Foreground Property.
The reason why I want to set it on the ContentPresenter (or the user control in the ContentPresenter), and not on the TabItem itself is because changing the TabItem Foreground color causes the object in the TabItem's Content Property to also inherit the foreground color, and not just the header, which is not intended. Basically I only wan't to change the TabItems Header object Foreground color, which is represented by the Content Presenter.
This is what my code looks like:
<Style TargetType="TabItem"
BasedOn="{StaticResource {x:Type TabItem}}">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid x:Name="Root">
<ContentPresenter x:Name="Presenter" HorizontalAlignment="Center"
VerticalAlignment="Center"
ContentSource="Header"
Margin="10 20" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Panel.ZIndex"
Value="100" />
<Setter TargetName="Presenter"
Property="UserControl.Foreground"
Value="#90E53935" />
</Trigger>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Panel.ZIndex"
Value="100" />
<Setter TargetName="Presenter"
Property="UserControl.Foreground"
Value="#E53935" />
<Setter TargetName="Root"
Property="Background"
Value="{StaticResource TransparentWheat}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I already tried to substitute UserControl for the exact name of the user control, which also appears to not work.
I am using Material Design XAML and I am trying to set a togglebutton icon and background color to something else when checked.
RED BOX CODE
<ToggleButton ToolTip="MaterialDesignFlatPrimaryToggleButton"
IsChecked="False"
Grid.Column="2"
Margin="78,58,99,52"
Grid.Row="1">
<Style TargetType="ToggleButton"
BasedOn="{StaticResource MaterialDesignFlatPrimaryToggleButton}">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="Green" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton>
GREEN BOX CODE
<ToggleButton Style="{StaticResource MaterialDesignFlatPrimaryToggleButton}"
ToolTip="MaterialDesignFlatPrimaryToggleButton"
IsChecked="False"
Grid.ColumnSpan="2"
Grid.Column="3"
Margin="205,58,188,52"
Grid.Row="1">
<md:PackIcon Kind="WindowClose"
Foreground="Red"
Height="21"
Width="21"/>
</ToggleButton>
I was thinking I could use the basedon attribute to reserve the style with material design...if possible.
I am trying reserve the style and change the icon and set background color when checked to look like this:
How would I do this?
You are currently setting the Style as the ToggleButton.Content.
You've got to define the Style nested into the ToggleButton.Style property:
<ToggleButton ToolTip="MaterialDesignFlatPrimaryToggleButton"
IsChecked="False"
Grid.Column="2"
Margin="78,58,99,52"
Grid.Row="1">
<ToggleButton.Style>
<Style TargetType="ToggleButton"
BasedOn="{StaticResource MaterialDesignFlatPrimaryToggleButton}">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="Green" />
<Setter Property="Content">
<Setter.Value>
<md:PackIcon Kind="SmileyHappy" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
i have a style that will make the textblock on mouse over underligned can we change the forecolor on mouse over of this textblock using WPF or i will need to change it programmatically ? here the style that i have
<TextBlock Text="Hurrah">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="TextDecorations" Value="Underline" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
Just add following line in your trigger
<Setter Property="Foreground" Value="CadetBlue"/>
The control is a button and if I set the properties : Content and Background in design ,then the DataTrigger won't work at all(DataTrigger is to set the content and background properties)
And if I remove the properties value I set in the design,when I run the program and change the state property that will fire the trigger,the datatrigger works fine.
How could that be?
Here is my Xaml:
<Style x:Key="DealBTN" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
..........
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding state, Converter={StaticResource Enum2string}}" Value="accepted">
<Setter Property="Background" Value="#BDC3C7"></Setter>
<Setter Property="Content" Value="Dealed"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding state, Converter={StaticResource Enum2string}}" Value="rejected">
<Setter Property="Background" Value="#C0392B"></Setter>
<Setter Property="Content" Value="Canceled"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
<Button Style="{StaticResource DealBTN}" DataContext="{Binding}" Content="Deal" Background="#FF1ABC9C" />
(the state property has INotifyPropertyChanged interface)
I'm trying to customize my ToggleButtons so that when checked they say 'Yes' in green and when not checked, say 'No' in red.
I've created the following style which is sitting in my Styles resource dictionary.
<!-- ToggleButtons -->
<Style x:Key="YesNoToggleStyle" TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="SpringGreen" />
<Setter Property="Content">
<Setter.Value>
<TextBlock Text="Yes"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background" Value="Crimson" />
<Setter Property="Content">
<Setter.Value>
<TextBlock Text="No"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
This works ... sort of. If the ToggleButton is the last one of either value, then it displays correctly. All previous buttons with the same value are blank. The height was also shrinking, but I fixed that with the 'Height' Setter above the triggers. To illustrate, when a new record is being created it looks like:
and after I've clicked buttons 1, 2, and 3 and 1 again:
I originally had the style referenced from the surrounding grid:
<Grid>
...
<Grid.Resources>
<Style BasedOn="{StaticResource YesNoToggleStyle}" TargetType="{x:Type ToggleButton}" />
</Grid.Resources>
But changing that so each ToggleButton references the style individually (<ToggleButton Style="{StaticResource YesNoToggleStyle}" ... />) hasn't made a difference.
I looked at Customizing the toggle state of a toggle button in wpf, and Override ToggleButton Style where the effect is the same, but they talk about external images, and my issues is all within wpf.
I also looked at the second answer to: i want to change backcolor of toggle button when toggle button ischecked and viceversa in WPF but a) I only have the blend + sketchflow preview that comes with VS2012, and b) i'm a total noob with blend and can't get from Select the "Checked State" to Reset the Background Color instruction in the answer (plus i'd be surprised if this task requires the blend tool).
Can anyone show me what to do to get multiple ToggleButtons to use the same style properly?
This works for me. Somewhere in Dictionary1.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="YesNoToggleStyle" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource {x:Static ToolBar.ToggleButtonStyleKey}}">
<Style.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background" Value="Crimson" />
<Setter Property="Content" Value="No"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="SpringGreen" />
<Setter Property="Content" Value="Yes"/>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
Note, that style is based on ToolBar.ToggleButtonStyle.
<Grid>
<Grid.Resources>
<ResourceDictionary Source="pack://application:,,,/Dictionary1.xaml"/>
</Grid.Resources>
<ItemsControl ItemContainerStyle="{StaticResource YesNoToggleStyle}">
<ToggleButton />
<ToggleButton />
<ToggleButton />
</ItemsControl>
</Grid>
try to replace Content property to ContentTemplate:
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="Yes"/>
</DataTemplate>
</Setter.Value>
</Setter>
In my case I wanted to have a "Locked" ToggleButton in a common dll defined and reused across my Apps.
Here's my result, which worked for me. Maybe someone find it useful (put this in a Resourcedictionary.xaml):
<BitmapImage x:Key="LockedLock"
UriSource="/...;component/Resources/Lock_closed_16p.png" />
<BitmapImage x:Key="OpenLock"
UriSource="/...;component/Resources/Lock_open_16p.png" />
<Style x:Key="LockButton"
TargetType="ToggleButton">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="{DynamicResource OpenLock }"
Width="12"
Height="12"
Name="contentimage" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton , AncestorLevel=1, Mode=FindAncestor }, Path=IsChecked}"
Value="True">
<Setter Property="Image.Source"
TargetName="contentimage"
Value="{DynamicResource LockedLock }" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Credits to:
Setting Button's Content to <Image> via Styles
Setter Target Name not recognized