I have a button that I need to change the background and foreground color of when the button is in focus. I have the background color change working, but cannot get the foreground color change (on the label) to work.
I want to do this in XAML only.
My Button:
<Button Style="{StaticResource ModButtonWhite}"
Name="btnConnect"
Height="30"
Click="btnConnect_Click"
Width="75"
Margin="0,0,15,0">
<Label Name ="btnConnectLabel" Content="Re-_Connect" />
</Button>
My Style:
<Style TargetType="Button"
x:Key="ModButtonWhite">
<Setter Property="Foreground"
Value="White" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}"
CornerRadius="5"
BorderThickness="1"
BorderBrush="White">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsFocused"
Value="True">
<Setter Property="Background"
Value="White" />
<Setter Property="Foreground"
Value="DeepSkyBlue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Resources>
<Style TargetType="Label">
<Setter Property="Foreground"
Value="White" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Foreground"
Value="DeepSkyBlue" />
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="White" />
<Setter Property="Opacity"
Value=".4" />
<Setter Property="Foreground"
Value="DeepSkyBlue" />
</Trigger>
</Style.Triggers>
All you need to do is to bind the Label.Foreground to the Button.Foreground. No need of any additional styles defined in the Style.Resources dictionary. Just the plain style to override the Button.Template:
<Window>
<Window.Resources>
<Style TargetType="Button"
x:Key="ModButtonWhite">
<Setter Property="Foreground"
Value="White" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}"
CornerRadius="5"
BorderThickness="1"
BorderBrush="White">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsFocused"
Value="True">
<Setter Property="Background"
Value="White" />
<Setter Property="Foreground"
Value="DeepSkyBlue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Button Style="{StaticResource ModButtonWhite}">
<Label Content="Click me!"
Foreground="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}" />
</Button>
</Window>
Related
I have changed the styles of my Buttons in WPF. All that is working as intended, but is there a way to get the classic hotkey underscore that you display by pressing ALT to display? If I put an underscore in the Button text, it always displays it.
<Style TargetType="Button">
<Setter Property="FontFamily" Value="{StaticResource THFont}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="#f00000" />
<Setter Property="Height" Value="20" />
<Setter Property="Margin" Value="10 0 10 0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border x:Name="border" CornerRadius="10" BorderBrush="#f00000" BorderThickness="1" Background="#f00000">
<Grid>
<TextBlock Name="TextBlock" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="12" Margin="10 0 10 0" Text="{TemplateBinding Button.Content}" />
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border" Value="#BD0000" />
<Setter Property="BorderBrush" TargetName="border" Value="#BD0000" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Your template should include a ContentPresenter:
<Style TargetType="Button">
<Setter Property="FontFamily" Value="{StaticResource THFont}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="#f00000" />
<Setter Property="Height" Value="20" />
<Setter Property="Margin" Value="10 0 10 0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border x:Name="border" CornerRadius="10" BorderBrush="#f00000" BorderThickness="1" Background="#f00000">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" TextElement.FontSize="12" Margin="10 0 10 0"
Focusable="False" RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border" Value="#BD0000" />
<Setter Property="BorderBrush" TargetName="border" Value="#BD0000" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have the below code where I'm trying to change the background color of the button when its disabled. But it still stays at the same background color as it is when its enabled. Its not changing though the button does get disabled. Any help would be much appreciated.
<Button Content="Install" Command="{Binding InstallCommand}" Margin="150,30,30,22" Width="118" FontSize="18" FontWeight="Bold" FontFamily="Segoe UI Light" FontStretch="ExtraExpanded">
<Button.Style>
<Style TargetType="Button">
<Setter Property="IsEnabled" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="#FF4F4F4F"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="1"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="Goldenrod"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding InstallEnabled, Converter={StaticResource BooleanToVisibilityConverter}}" Value="">
<Setter Property="IsEnabled" Value="False" />
<Setter Property="Background" Value="{DynamicResource windowBGBrushBusinessDateChanged}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
I found that in your trigger you are not checking the value .Change your trigger as below.
<Style.Triggers>
<DataTrigger Binding="{Binding InstallEnabled, Converter={StaticResource BooleanToVisibilityConverter}}" Value="False">
<Setter Property="IsEnabled" Value="False" />
<Setter Property="Background" Value="{DynamicResource windowBGBrushBusinessDateChanged}"/>
</DataTrigger>
</Style.Triggers>
You can change the disabled button background by changing the control template of button like below,
<Window.Resources>
<Style x:Key="MyButton2" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Background" Value="MediumAquamarine" />
<Setter Property="Foreground" Value="MediumBlue" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter x:Name="MyContentPresenter"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="Green" />
<Setter Property="Foreground" Value="DeepPink" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button x:Name="disabledButton"
Width="100"
Height="100"
Content="Button State"
IsEnabled="False"
Style="{StaticResource MyButton2}" />
</Grid>
I am trying to create a style for a TabControl to achieve 2 goals:
Display the selected TabItem with a different background color and in bold.
Format the tab header text, bound to a date in the view model, to hours and minutes like "15:45".
I almost succeeded but the header text is also displaying the date part.
Besides it is displaying 03:45 instead of 15:45.
see screenshot here
Here is the XAML code I am using:
<TabControl ItemsSource="{Binding MC}" >
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="#01535F" />
<Setter Property="Foreground" Value="Azure" />
<Setter Property="FontSize" Value="16" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Black" Margin="1,1">
<Grid Name="Panel">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
/>
<!--<HeaderedContentControl Header="{Binding Path=MarketStartTime, StringFormat={}{0:HH:mm}}" />-->
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Panel" Property="Background" Value="#003F44" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="#01535F" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<HeaderedContentControl Header="{Binding Path=MarketStartTime, StringFormat={}{0:HH:mm}}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
</TabControl>
Thanks in advance for any help.
I think this is what you're looking for:
<TabControl ItemsSource="{Binding MC}">
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="#01535F" />
<Setter Property="Foreground" Value="Azure" />
<Setter Property="FontSize" Value="16" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Black" Margin="1,1">
<Grid Name="Panel">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Panel" Property="Background" Value="#003F44" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="#01535F" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=MarketStartTime, StringFormat={}{0:HH:mm}}"></TextBlock>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
The ItemTemplate is for the header area, the ContentTemplate is for what is showing in the content area. That ContentPresenter in the ContentTemplate will instantiate the controls from the ItemTemplate.
i've a Button like this
<Button Content="Add">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal">
<Image x:Name="image" Source="../Resources/Images/Icons/Pruefplan_Add_32_gray.png" Margin="8" />
<TextBlock x:Name="text" Text="ADD" Margin="3,0,3,0" VerticalAlignment="Center"></TextBlock>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="image" Property="Source" Value="../Resources/Images/Icons/Pruefplan_Add_32.png" />
<Setter TargetName="text" Property="Opacity" Value=".5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
This Button has a Styling and a Trigger to change the Image on MouseOver. It works all fine. But i want to use a global Resource for the Button.
<Style x:Key="ButtonsMenue1" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#02FFFFFF" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="1" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="10"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True"
TextBlock.FontFamily="Segoe WP Light"
TextBlock.Foreground="Black"
TextBlock.FontSize="14"
/>
<Rectangle x:Name="border"
SnapsToDevicePixels="True"
IsHitTestVisible="False"
Opacity="0.25"
Width="10" Height="20" VerticalAlignment="Stretch" HorizontalAlignment="Right"
Fill="DarkGray" Margin="15,0,0,0" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="contentPresenter" Property="Opacity" Value="1" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter TargetName="contentPresenter" Property="Opacity" Value=".5" />
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true" />
<Trigger Property="ToggleButton.IsChecked" Value="true" />
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="White" />
</Trigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter TargetName="border" Property="Rectangle.Width" Value="2"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I know i can use
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource ButtonsMenue1}">
But it wont show for example my Rectangle as Separator. And it looks not good. Do you have a nice Solution for me ?
nice Wishes
Manuel
Unfortunately you cannot inherit a ControlTemplate. The template you define for the inherited style will override the template you defined for the base style.
If you want to use a base template and then want to modify it you will have to find a way to do it with properties. You would than have to define a custom control which has a DependencyProperty to handle special requirements. Something like:
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource ButtonsMenue1}">
<Setter Property="ImageForMouseOver" Value="..." />
</Style>
I have a style for button as per below code.
<Style TargetType="Button" x:Key="TransparentButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border HorizontalAlignment="Center" x:Name="borderTemplate"
Background="Transparent">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="borderTemplate"
Property="Border.BorderBrush" Value="Gray" />
<Setter TargetName="borderTemplate"
Property="Border.BorderThickness" Value="1" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="borderTemplate"
Property="Border.BorderBrush" Value="Lime" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I need to set the background of button
1.To gray as soon as “MouseUp“ event occurred.
2.And set it to Default(say white)as soon as Focus Of Button being changed or say Focus Being lost.
Is there any way to solve this using Trigger or EventTrigger??.
See One example for above code with image
Button with Above style.
<Button Background="Black" Style="{StaticResource TransparentButton}"
Content="0123456789" Height="15" HorizontalAlignment="Left"
Name="button2" VerticalAlignment="Top" Margin="70,17,0,0" />
Button will look as per below image after above style being applied.
This can be done by using RadioButton instead of Button
just have a look at this
<Style x:Key="RadioButtonStyle1" TargetType="{x:Type RadioButton}">
<Setter Property="Background" Value="#F4F4F4"/>
<Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border HorizontalAlignment="Center" x:Name="borderTemplate" Background="Transparent" VerticalAlignment="Center">
<ContentPresenter x:Name="contentPresenter" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="borderTemplate" Value="#FFE4E4E4"/>
<Setter Property="HorizontalAlignment" TargetName="contentPresenter" Value="Center"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" TargetName="borderTemplate" Value="#FFA1A1A1"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Grid x:Name="LayoutRoot">
<StackPanel/>
<RadioButton Content="RadioButton" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="116,86.04,0,0" Style="{StaticResource RadioButtonStyle1}"/>
<RadioButton Content="RadioButton" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="116,106,0,0" Style="{StaticResource RadioButtonStyle1}"/>
</Grid>