WPF Style Foreground of RadioButton not applied - wpf

I have a style for my textblocks, and a style for my radio button.
When I add my radio buttons, they ignore the style for my foreground. The textblock style seems to have precedence and I can't get it the way I want it.
<Style TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
<Setter Property="FontFamily" Value="Daytona Light"/>
<Setter Property="FontSize" Value="22"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Foreground" Value="White"/>
</Style>
<Style x:Key="Radio" TargetType="RadioButton" BasedOn="{StaticResource {x:Type ToggleButton}}">
<Setter Property="Foreground" Value="#1a3281"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="#1a3281" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I create my radio buttons in a stack panel
<StackPanel Grid.Column="1" Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="RadioButton" BasedOn="{StaticResource Radio}">
<Setter Property="Margin" Value="50, 0, 0, 20"/>
<Setter Property="Width" Value="250"/>
<Setter Property="Height" Value="60"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</StackPanel.Resources>
<RadioButton GroupName="MainSelection" Command="{Binding ShowVideoCommand}" Content="Video">
</RadioButton>
<RadioButton GroupName="MainSelection" Command="{Binding ShowPresentationCommand}" Content="Presentation">
</RadioButton>
<RadioButton GroupName="MainSelection" Command="{Binding ShowSimulatorCommand}" Content="Simulator">
</RadioButton>
</StackPanel>
When I run my app, I see the radio buttons as full white rectangles. When the RadioButton is checked, the style for the background works fine (becomes blue, with text still white).
What am I doing wrong for my foreground style? Why is the textblock style always wins over my radio button style?
Even when I set Foreground="Red" in my RadioButton as follows
<RadioButton Foreground="Red" GroupName="MainSelection" Command="{Binding ShowVideoCommand}" Content="Video">
it won't show up. Text is always white.

Related

How to change image on mouseover on a button with stackpanel having an Image and a Textblock XAML

I'm kinda new to WPF/XAML
I have this Button that holds a stack panel which is having an Image and a Textbox Control to it.
I have styled the button in a StaticResource
How can I achieve an image change on MouseOver?
I have accomplished changing the Background color, and the Foreground color (text) to change on mouseover, but I can't get the image change to work
This is my Button:
<Button Style="{StaticResource mainMenuHomeBtn}">
<StackPanel
Orientation="Horizontal"
HorizontalAlignment="Left">
<Image Name="hjemImage" Margin="5" Height="30" Source="/Images/fal-home-lg-alt.png"/>
<TextBlock Margin="10" VerticalAlignment="Center" Text="Hjem"/>
</StackPanel>
</Button>
And this is my Button Styling:
<Style x:Key="mainMenuHomeBtn" TargetType="{x:Type Button}">
<Setter Property="Width" Value="auto"/>
<Setter Property="Height" Value="auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Padding" Value="-2"/>
<Setter Property="Foreground" Value="#e3e3e3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="#cccccc" BorderThickness="0">
<ContentPresenter HorizontalAlignment="Left"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#696969"/>
<Setter Property="Background" Value="#d9d9d9"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#e3e3e3"/>
</Trigger>
</Style.Triggers>
</Style>
Your Style/ControlTemplate doesn't know anything about the StackPanel that happens to be in the element that is currently set as the Content of the Button element that the Style is currently applied to.
You could move the contents to the template and use a trigger so change the Source of the Image element in the template:
<Style x:Key="mainMenuHomeBtn" TargetType="{x:Type Button}">
<Setter Property="Width" Value="auto"/>
<Setter Property="Height" Value="auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Padding" Value="-2"/>
<Setter Property="Foreground" Value="#e3e3e3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="#cccccc" BorderThickness="0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Name="hjemImage" Margin="5" Height="30" Source="/Images/fal-home-lg-alt.png"/>
<TextBlock Margin="10" VerticalAlignment="Center" Text="Hjem"/>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="hjemImage" Property="Source" Value="pic.png" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#696969"/>
<Setter Property="Background" Value="#d9d9d9"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#e3e3e3"/>
</Trigger>
</Style.Triggers>
</Style>
Then there is no point of setting the Content property since there is no ContentPresenter in the Style:
<Button Style="{StaticResource mainMenuHomeBtn}" />
The other option is to keep your Style as-is and add a DataTrigger that binds to the IsMouseOver property of the Button to an element in the content:
<Button Style="{StaticResource mainMenuHomeBtn}">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left">
<Image Name="hjemImage" Margin="5" Height="30">
<Image.Style>
<Style TargetType="Image">
<Setter Property="Source" Value="/Images/fal-home-lg-alt.png" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button}}"
Value="True">
<Setter Property="Source" Value="pic.png" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<TextBlock Margin="10" VerticalAlignment="Center" Text="Hjem"/>
</StackPanel>
</Button>

Multiple Style Resource in WPF Metro Button

I am trying to achieve my save button to reusable button and original button style is like this=>
<Button Margin="5"
Padding="0"
Width="98"
Cursor="Hand"
x:Name="btnSave"
Click="btnSave_Click">
<StackPanel Orientation="Horizontal" Height="25" Width="90">
<Image Source="\Image\Other\Save.ico" Width="20" Margin="3 0"></Image>
<TextBlock VerticalAlignment="Center" Margin="15 0">Save</TextBlock>
</StackPanel>
</Button>
Just text and image. So I just want to use this button as a reusable button. So I move this button to App.xaml Like this=>
<Style TargetType="Button" x:Key="SaveButton" BasedOn="{StaticResource MetroButton}">
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Width" Value="98"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontSize" Value="12"/>
<Style.Resources>
<Style TargetType="StackPanel">
<Setter Property="Orientation" Value="Horizontal"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Width" Value="90"/>
<Setter Property="Background" Value="Red"/>
<Style.Resources>
<Style TargetType="Image">
<Setter Property="Source" Value="/Image/Other/Save.ico"/>
<Setter Property="Width" Value="20"/>
<Setter Property="Margin" Value="3 0"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="15 0"/>
<Setter Property="Text" Value="Save"/>
</Style>
</Style.Resources>
</Style>
</Style.Resources>
</Style>
But after moving that, This button is not working anymore. Please let me know why this one is not working.
You said you wanted to reuse styles, so you shouldn't nest them. The right thing to do is:
<Style x:Key="SaveButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal" Height="25" Width="90" Background="Red">
<Image/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to define the StackPanel somewhere and set the Button's Content property to it. You may define the StackPanel as a non-shared resource next to the Style in App.xaml like this:
<StackPanel x:Key="sp" x:Shared="False" Orientation="Horizontal" Height="25" Width="90">
<Image Source="screen.png" Width="20" Margin="3 0"></Image>
<TextBlock VerticalAlignment="Center" Margin="15 0">Save</TextBlock>
</StackPanel>
<Style TargetType="Button" x:Key="SaveButton">
<Style.Resources>
</Style.Resources>
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Width" Value="98"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Content" Value="{StaticResource sp}" />
</Style>

Set button hover or onmouseover background color

I am struggling to find a solution to this. Every other one i;ve tried is not working. Maybe I am missing something.
I want to change the background color of a Button when I hover over it with the mouse.
This is my XAML:
<Window x:Class="Recruitment_Manager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="374" Width="940">
<Window.Resources>
<Style TargetType="Button" x:Key="NavigationButtonStyle">
<Setter Property="Height" Value="35"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="StackPanel" x:Key="NavigationButtonContentStyle">
<Setter Property="Orientation" Value="Horizontal"/>
</Style>
<Style TargetType="Image" x:Key="NavigationButtonImageStyle">
<Setter Property="Width" Value="35"/>
</Style>
<Style TargetType="Label" x:Key="NavigationButtonLabelStyle">
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="15"/>
</Style>
</Window.Resources>
<Grid>
<StackPanel HorizontalAlignment="Left" Width="200">
<StackPanel.Background>
<SolidColorBrush Color="#404040"/>
</StackPanel.Background>
<Button Style="{StaticResource ResourceKey=NavigationButtonStyle}">
<StackPanel Style="{StaticResource ResourceKey=NavigationButtonContentStyle}">
<Image Style="{StaticResource ResourceKey=NavigationButtonImageStyle}">
</Image>
<Label Style="{StaticResource ResourceKey=NavigationButtonLabelStyle}">
Settings
</Label>
</StackPanel>
</Button>
</StackPanel>
</Grid>
But it looks like the trigger never executes?
What am I missing or how can I get what I want?
Thank you in advance.
To remove the default MouseOver behaviour on the Button you will need to modify the ControlTemplate. Changing your Style definition to the following should do the trick:
<Style TargetType="{x:Type Button}" x:Key="NavigationButtonStyle">
<Setter Property="Height" Value="35"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
Try following code
<Style TargetType="Button" x:Key="NavigationButtonStyle">
...
<Trigger Property="Control.IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</Style>

Background color is not changing in DataTrigger

I have some problem while changing background color of Button using datatrigger but it is not happen.
My code is this
<Window x:Class="DataBinding.DataTrigger2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DataTrigger2" Height="300" Width="300">
<Button Height="50" Name="btn">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Control.Background" Value="YellowGreen"></Setter>
<Setter Property="Control.Foreground" Value="Brown"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=btn, Path=IsPressed}" Value="True">
<Setter Property="Control.Background" Value="Purple"></Setter>
<Setter Property="Control.Foreground" Value="Red"></Setter>
<Setter Property="Control.FontSize" Value="20"></Setter>
<Setter Property="Control.FontWeight" Value="Light"></Setter>
<Setter Property="Control.Width" Value="150"></Setter>
<Setter Property="Control.Height" Value="50"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
<Button.Content>
The Gaming World Inc.
</Button.Content>
</Button>
The reason why you don't see the Button.Background colour change when you click the mouse is because of the default ControlTemplate that defines what the it should look like in different states, eg. pressed, disabled. etc. These are defined in the VisualStateManager.VisualStateGroups section of the ControlTemplate and they potentially override your Background changes.
As simple proof of this, we can provide a basic ControlTemplate for the Button without the VisualStateManager.VisualStateGroups section and then you will see your Background colour change. Try this:
<Button Height="50" Name="btn">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Control.Background" Value="YellowGreen"></Setter>
<Setter Property="Control.Foreground" Value="Brown"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=btn, Path=IsPressed}" Value="True">
<Setter Property="Control.Background" Value="Purple"></Setter>
<Setter Property="Control.Foreground" Value="Red"></Setter>
<Setter Property="Control.FontSize" Value="20"></Setter>
<Setter Property="Control.FontWeight" Value="Light"></Setter>
<Setter Property="Control.Width" Value="150"></Setter>
<Setter Property="Control.Height" Value="50"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
<Button.Content>
The Gaming World Inc.
</Button.Content>
</Button>
You can find the original/default ControlTemplate for the Button control in the Button Styles and Templates page on MSDN... you may want to copy more of that ControlTemplate into your one to make your Button look more like the original one.

Apply style to multiple controls when a style trigger fires in xaml

When the user enters info I want all the controls to look and act the same way, as a result I have done the following.
The label and textbox controls are in a stackpanel as:
<StackPanel Style="{StaticResource ResourceKey=myInput}" HorizontalAlignment="Left">
<Label Content="Label" Name="label1" />
<TextBox Name="textBox1" ></TextBox>
</StackPanel>
the style "myInput" is:
<Style x:Key="myInput" TargetType="{x:Type StackPanel}">
<Style.Resources>
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource {x:Type Label}}">
<Setter Property="FontSize" Value="12" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Margin" Value="5,-5,2,2"></Setter>
<Setter Property="Height" Value="23"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Style.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" Value="Blue" >
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
Now every time that I apply that style to a stackpanel that has a label and a textbox the background of the textbox changes to blue when it receives focus.
How could I set the label's fontweight to bold also when that event fires? I will like to do this with xaml.
Use a DataTrigger on your Label which looks to see if the keyboard focus is inside of the parent StackPanel that contains both objects
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource {x:Type Label}}">
<Setter Property="FontSize" Value="12" />
<Style.Triggers>
<DataTrigger Value="True" Binding="{Binding IsKeyboardFocusWithin,
RelativeSource={RelativeSource AncestorType={x:Type StackPanel}}}">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>

Resources