I am new in WPF.
What the way to change a togglebutton behavior.
to
with black baground and no border.
Is need to use Control Template?
You have to modify the Control Template or Style to change the look and feel of the existing Control available. Have a look at this sample which is some what similar to your requirement. what i have done is i changed the Chrome (default style of windows) and created my own style with Border and content presenter. Then i have created the Triggers for the style. For visualization, in the mouseover and ischecked event i am changing background color of the Border.
<Window.Resources>
<Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="border">
<ContentPresenter
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
RecognizesAccessKey="True" TextElement.Foreground="White" HorizontalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true"/>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Background" TargetName="border" Value="#FF6C6C6C"/>
<Setter Property="CornerRadius" TargetName="border" Value="5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border" Value="#FF282828"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<ToggleButton HorizontalAlignment="Left" Margin="136,59,0,0" Style="{DynamicResource ToggleButtonStyle1}" VerticalAlignment="Top" Width="27" Height="24" Content="-" FontSize="21.333" FontWeight="Bold" HorizontalContentAlignment="Center" Padding="0" VerticalContentAlignment="Center" IsThreeState="True"/>
</Grid>
Yes, you want to use a ControlTemplate to change how the ToggleButton looks. Take a look at the page for the ToggleButton as well as this article:
Customizing the Appearance of an Existing Control by Creating a ControlTemplate
to get you started.
Related
I have three buttons on my Xaml
<Page.Resources>
<Style x:Key="GroupToggleStyle" TargetType="RadioButton" BasedOn="{StaticResource {x:Type ToggleButton}}">
<Setter Property="Background" Value="BlueViolet"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
Value="True">
<DataTrigger.Setters>
<Setter Property="Background" Value="Red"/>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</Page.Resources>
<Grid>
<RadioButton GroupName="LanguageGroup" Command="{Binding LanguageChangeCommand}" IsChecked="{Binding Button0}"
CommandParameter="English" Content="English" Foreground="White" Width="80"
Style="{StaticResource GroupToggleStyle}" FontSize="15" Grid.Row="3" Grid.Column="2" BorderBrush="#0000ffff" Height="30" Margin="8,5,162,21" Grid.ColumnSpan="2" Background="BlueViolet">
<RadioButton.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" Value="Red"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</RadioButton.Resources>
</RadioButton>
<Grid/>
But when I put mouse over my button, button's background changes to default windows gray background.
What's The Problem?
Here is a photo of my buttons
The ToggleButton defines animations inside its ControlTemplate to control the e.g., checked and hover behavior/states. You will have to override the default ControlTemplate in order to implement your custom animations and triggers.
Additionally, you must also move the mouse over trigger to the RadioButton template too.
You can find examples of the default styles and templates at Control Styles and Templates or use the XAML designer (or Blend) to edit a copy of the elements template.
<Style x:Key="GroupToggleStyle"
TargetType="RadioButton"
BasedOn="{StaticResource {x:Type ToggleButton}}">
<Setter Property="Background"
Value="BlueViolet" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border x:Name="Border"
CornerRadius="5"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Background"
Value="Gray" />
</Trigger>
<Trigger Property="IsChecked"
Value="True">
<Setter TargetName="Border"
Property="Background"
Value="Red" />
</Trigger>
<Trigger Property="IsMouseOver"
Value="True">
<!-- Target the border to allow local Background values on the templated control -->
<Setter TargetName="Border"
Property="Background"
Value="Green" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In case you want to change individual buttons only, simply base the individual Style on the common base Style (but note that you have to remove the local Style assignment as the local value has a higher precedence than the implicit Style).
So I have the following style in my Window.Resources:
<Style TargetType="TabItem" x:Key="tiS">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Height="40" Width="186">
<Border Name="tiBorder" Background="Transparent">
<ContentPresenter ContentSource="Header"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextBlock.FontSize="20"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="90"/>
<Setter TargetName="tiBorder" Property="Background" Value="{DynamicResource tiB}"/>
<!--<Setter TargetName="tiBorder" Property="Margin" Value="0,-4,0,-4"/>-->
<Setter TargetName="tiBorder" Property="BorderThickness" Value="0,0,0,1"/>
<Setter TargetName="tiBorder" Property="BorderBrush" Value="{StaticResource tiLineFade}"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Panel.ZIndex" Value="80"/>
<Setter TargetName="tiBorder" Property="BorderThickness" Value="0,0,0,1"/>
<Setter TargetName="tiBorder" Property="BorderBrush" Value="{StaticResource tiLineFade}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This style is used on 5 TabItems, each with a different color given by 'DynamicResource tiB' in the trigger.
In each TabItem I have the following resource placed (Color1 is set in the Window.Resources):
<TabItem.Resources>
<SolidColorBrush x:Key="tiB" Color="{StaticResource Color1}"/>
</TabItem.Resources>
I was wondering, is there an easier way to do this or am I doing it right? This is the first time I'm working with styles in WPF so I want to do it right. (This code is working! Looking for a better (if there is one) solution to my situation.)
Here is the full code: http://pastebin.com/igwxgp6M
I believe this will work
<TabControl ...>
<TabControl.ItemsContainerStyle>
<Style TargetType="TabItem">
//Put triggers here
</Style>
<TabControl.ItemsContainerStyle>
</TabControl>
Button is applied with a Foreground when it is enabled. If it is Set as Disabled, default Button's Disabled Foreground need to apply.
<Button Width="150"
Height="50"
Content="Test"
Foreground="Red"
IsEnabled="False" />
I have Triggers for this button like
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#FFADADAD"/>
</Trigger>
This Foreground is not applied when it is enabled.
Any idea on this?
Need like below,
If you set the properties locally the trigger will not be able to change the value due to precedence.
Move the Foreground and IsEnabled property into the style:
<StackPanel>
<StackPanel.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="IsEnabled" Value="True"/>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#FFADADAD"/>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<Button Width="150"
Height="50"
Content="Test">
</Button>
I am not sure I understand the question properly, because those codes posted in question should work fine. Following is a working sample to produce a Button exactly as the captured image shows. I put the Style as resource in the Button's container control -StackPanel in this case- :
<StackPanel>
<StackPanel.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="Red"/>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#FFADADAD"/>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<Button Width="150"
Height="50"
Content="Test"
IsEnabled="True">
</Button>
</StackPanel>
If you edit Button's default template you can find the following trigger inside control template.
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
<Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/>
</Trigger>
This trigger set Foreground to the content presenter using TargetName. No template binding used here. It directly assigns value. So the values you set for Foreground in Style Triggers will not be applied. You can edit the control template to achieve your requirement. This limitation not only for Foreground, for Background and BorderBrush also have this.
The following code is working for me:
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid x:Name="grid" Background="{StaticResource FlatButtonNavigation}">
<Border Name="ButtonBorder" CornerRadius="5,5,5,5"
BorderBrush="Gray" BorderThickness="2">
<ContentPresenter Name="MyContentPresenter"
HorizontalAlignment="center"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
TextBlock.FontSize="{TemplateBinding FontSize}"
TextBlock.Foreground="{StaticResource LeftPanelFontColor}"
Margin="10"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="ButtonBorder" Property="Background" Value="LightGray"/>
<Setter TargetName="ButtonBorder" Property="BorderBrush" Value="#FFADB2B5"/>
<Setter TargetName="MyContentPresenter" Property="TextBlock.Foreground" Value="White"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Can be worked using styles as mentioned in the other answers, but there is no need to go outside the button to define the style, you can define a style explicitly related to the particular button:
<Button Width="150" Height="50" Content="Test">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="IsEnabled" Value="True"/>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#FFADADAD"/>
</Trigger>
</Style.Triggers>
</Button.Style>
</Button>
</StackPanel>
Does anyone know how to remove that awful and annoying border that appears when you mouseover a menuitem in a menu.
I've messed around with styles and googled around but I can't wrap my head around it.
Example with a button in a menu;
You can find the default style and control template of the MenuItem class in this MSDN article.
The control which shows the border that is annoying you, is the control named "Border" whose background changes in the trigger for the property IsHighlighted.
This border is defined in the ControlTemplate with the key x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}".
Removing the trigger (and for the sake of completeness the border) will let the MenuItem appear as you want it to.
Here is the original control template:
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}" TargetType="MenuItem">
<Border Name="Border">
<Grid>
<ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource NormalBrush}"/>
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
And this is the adjusted template:
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}" TargetType="MenuItem">
<Grid>
<ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I'm trying to do something which I'd think would be pretty simple, but is turning out to be rather complicated.
I'm working with a TabControl that has already been styled by a theme in an included assembly, but I'd like the background color of a TabItem when the TabItem is selected to be different. While I could change this on the theme in the other assembly, I'd rather just override it for my application.
The problem seems to be that setting the background color for selected TabItems involves setting a control template, and in particular, a control template trigger on the IsSelected property. I can't find an easy way to only override that one trigger without fully defining the control template like so (resulting in a bunch of unnecessary copy/pasted code). Here's what I have right now- is there a way to cut this down to target only the part I care about? It doesn't seem like ControlTemplates are inheritable. Thanks for any help you can offer.
<Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border"
Margin="0,0,-4,0"
Background="{DynamicResource {x:Static themes:HarmonyBrushes.BrushDKey}}"
BorderBrush="{DynamicResource {x:Static themes:HarmonyBrushes.BrushDKey}}"
BorderThickness="1,1,1,1"
CornerRadius="3,3,0,0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"
RecognizesAccessKey="True" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border"
Property="Background"
Value="{DynamicResource {x:Static themes:HarmonyBrushes.BrushLightKey}}" />
<Setter TargetName="Border"
Property="BorderBrush"
Value="{DynamicResource {x:Static themes:HarmonyBrushes.BrushLightKey}}" />
<Setter Property="Foreground"
Value="{DynamicResource {x:Static themes:HarmonyBrushes.TextBrushLightKey}}" />
<Setter TargetName="Border"
Property="BorderThickness"
Value="1,1,1,0" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border"
Property="Background"
Value="{DynamicResource {x:Static themes:HarmonyBrushes.BrushDarkKey}}" />
<Setter TargetName="Border"
Property="BorderBrush"
Value="{DynamicResource {x:Static themes:HarmonyBrushes.BrushDarkKey}}" />
<Setter Property="Foreground"
Value="{DynamicResource {x:Static themes:HarmonyBrushes.BrushKey}}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static themes:HarmonyBrushes.TextBrushLightKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I think the simplest way to change the colour is to override the resource:
<Grid>
<Grid.Resources>
<SolidColorBrush x:Key="{x:Static themes:HarmonyBrushes.BrushLightKey}" Color="Green" />
</Grid.Resources>
<TabControl>
<TabItem>Tab One</TabItem>
<TabItem>Tab Two</TabItem>
</TabControl>
</Grid>