I have found different pieces of codes that are supposed to change the background of a control when the mouse hovers it. I haven't been able to make any of them work. This is the piece of code that I'm using right now. I don't know what I'm missing, I'm specifying everything.
<Window.Resources>
<Style x:Key="HoverButton" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FFA9DE4E"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
Im also specifying the Style I want to apply to the specific control, in this case is a button.
<!-- Start button -->
<Button x:Name="btnStart" Style="{StaticResource HoverButton}" Content="Start" Margin="503,411,10,10" FontWeight="Bold" BorderBrush="#FFA9DE4E" Click="BtnNext_Click" Foreground="#FFA9DE4E" Background="#FF222831">
<Button.Effect>
<DropShadowEffect Color="#FFA9DE4E" ShadowDepth="1" BlurRadius="20" Direction="320"/>
</Button.Effect>
</Button>
When I hover the button nothing changes.
Try to modify the button template like this:
<Button Content="Button" HorizontalAlignment="Center" Click="Button_Click" VerticalAlignment="Center" Width="75">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="bdr_main" BorderThickness="1" BorderBrush="Black" Background="LightGray">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bdr_main" Property="Background" Value="#FFA9DE4E"/>
</Trigger>
//You can also change the color at the click like this:
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="bdr_main" Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
By modifying the template, you can stylize your button as you wish.
Hoping to help you.
Related
I have my wpf button as follows
<Button x:Name="helpButton" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="552,201,95,726" Width="32" Height="32" BorderThickness="0" Click="helpButton_Click">
<Button.Background>
<ImageBrush ImageSource="/Images/help-icon1.png"></ImageBrush>
</Button.Background>
</Button>
On window load I am able to see the image perfectly but when I hover the mouse I am not able to see the image
So can some one help me
A more sensible approach to start would be by using <Button.Template> instead of <Button.Background>
<Button x:Name="helpButton">
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image Source="/Images/help-icon1.png" Width="32" Height="32"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
Additionally style the button border with for example a hover effect with Trigger and Setter
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="buttonBorder" Property="BorderBrush" Value="Green"></Setter>
<Setter TargetName="buttonBorder" Property="BorderThickness" Value="1" />
</Trigger>
</ControlTemplate.Triggers>
which you will add like so:
<Button x:Name="helpButton" Height="35">
<Button.Template>
<ControlTemplate>
<Border Name="buttonBorder" HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image Source="/Images/help-icon1.png" Width="32" Height="32"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="buttonBorder" Property="BorderBrush" Value="Green"/>
<Setter TargetName="buttonBorder" Property="BorderThickness" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
It is really strange why it is not possible to see image when button is hovered. Default style always shows Content(in your case, image). So I suggest you just use default style for your button:
<Button Style="{ x:Null}">
<Image Source="/images/images.jpg"></Image>
</Button>
Or just override behavior of template when mouse is over button:
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!--Do not do any actions here to see your image-->
</Trigger>
</Style.Triggers>
</Style>
In this case, there is no actions when mouse is over your button.
Okay, I made a Custom Button in my .xaml file in my WPF Project, I've done everything, but the Content isn't showing... The C# code is default, nothing changed, but here's my .xaml code:
<Button Name="TestButton" Content="TESTING" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="197,158,0,0" Height="30" Width="120">
<Button.Template>
<ControlTemplate>
<Image Height="30" Width="120" Stretch="Fill">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/Resources/btn_primary_normal.png"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="/Resources/btn_primary_hover.png"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Source" Value="/Resources/btn_primary_disabled.png"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</ControlTemplate>
</Button.Template>
</Button>
When you replace the ControlTemplate of a control you replace all of its visual functionality, including the part that displays the Content property. If you want a button that shows an image and whatever is in the Content property you are pretty close, just add a ContentPresenter into your template like so:
<Button Name="TestButton" Content="TESTING" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="197,158,0,0" Height="30" Width="120">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Image Height="30" Width="120" Stretch="Fill">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/Resources/btn_primary_normal.png"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="/Resources/btn_primary_hover.png"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Source" Value="/Resources/btn_primary_disabled.png"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
Also note the specification of the TargetType in the ControlTemplate, this is important.
I have a button defined as follows:
<Button x:Name="ContactLink" Canvas.Left="20" Canvas.Top="223" Style="{StaticResource HyperlinkButton}" Click="ContactLink_Clicked">
<WrapPanel>
<Rectangle Width="15" Height="15">
<Rectangle.Fill>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_new_window}" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Margin="5 0 0 0" FontWeight="SemiBold" Text="GET IN TOUCH" />
</WrapPanel>
</Button>
As the title says, I would like to define a style which changes the foreground of TextBlock and of the VisualBrush. So far, I have the following style, which doesn't work. It changes the foreground of the textblock and the definition of the BlackBrush resource.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ControlTemplate x:Key="HyperlinkButtonTemplate" TargetType="{x:Type Button}">
<WrapPanel>
<TextBlock Cursor="Hand">
<ContentPresenter />
</TextBlock>
</WrapPanel>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter Property="TextBlock.Foreground" Value="#0071bc" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="HyperlinkButton" TargetType="{x:Type Button}">
<Setter Property="Template" Value="{StaticResource HyperlinkButtonTemplate}" />
</Style>
</ResourceDictionary>
Any help on getting it to work would be very much appreciated.
You just need to remove the SolidColorBrush you defined inside the trigger
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter Property="TextBlock.Foreground" Value="#0071bc" />
</Trigger>
Probably too late, but I had the same issue and managed to solve it.
Just set name property of the TextBlock then you can refer to that name in the trigger.
<TextBlock Cursor="Hand" Name="MyTextBlock">
<ContentPresenter />
</TextBlock>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="MyTextBlock" Property="Foreground" Value="#0071bc"/>
</Trigger>
</ControlTemplate.Triggers>
I have a button that flashes.
I would like to change the entire button style from a resource dictionary when ever it flashes.
I would think it would be like this:
DesktopWindow.AlertButton.Style = (Style)DesktopWindow.Resources["GreenAlertButtonStyle"];
But that doesn't work. How do I do this? I cannot simply change the background color (although that's all I really want to do) because I want to preserve the triggers. When ever I change the background of the button right now, the mouseover triggers stop working....
The button:
<Style TargetType="Button" x:Key="BaseAlertButtonStyle">
<Setter Property="ToolTip" Value="Show Alert List"/>
<Setter Property="Effect" Value="{DynamicResource dropShadow}" />
<Setter Property="Background" Value="{DynamicResource AlertButtonBackground}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Border CornerRadius="5" x:Name="ButtonBorder" Margin="0,0,0,0"
VerticalAlignment="Stretch" BorderThickness="0"
BorderBrush="#ffffff" Padding="0"
Background="{TemplateBinding Background}"
HorizontalAlignment="Stretch">
<Image x:Name="alertImage">
<Image.Source>
<BitmapImage UriSource="/resources/alertIcon.png" />
</Image.Source>
</Image>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{DynamicResource ButtonRolloverBackground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I dont wanna hear it about doing a search for this issue....
Try:
DesktopWindow.AlertButton.Style = FindResource("GreenAlertButtonStyle") as Style;
After setting background explicitly you have to clear BackgroundProperty and then set new style.
button1.ClearValue(BackgroundProperty);
I have a button in WPF application. I am presenting an image instead of a button.
When my app comes up , all the controls are disabled , until a user logs in. I want my app to start with button that it's image is gray-->disabled . and when someone logged in , i want to change to color image.but i can't access the image in the button's template. can anyone help? thank you.
the code of my button -
<Button Height="55" Background="CornflowerBlue" Foreground="White" FontWeight="Normal" Name="Button_Cancel" FontSize="12" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="55" Click="Button_Cancel_Click">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel >
<Image Source="Images/myImage.png" Name="Image_Cancel"/>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Button.BitmapEffect" >
<Setter.Value>
<DropShadowBitmapEffect Color="LightGray" Direction="300" ShadowDepth="5" >
</DropShadowBitmapEffect>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Button.RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="0.970" ScaleY="0.970">
</ScaleTransform>
<!--<SkewTransform AngleY="2" CenterY="-100"/>-->
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
You can hook up the image with the IsEnabled property via trigger, then you probably don't need code behind access.
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="Images/Image_Normal.png" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Source" Value="Images/Image_Disabled" />
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
You can do this..
<StackPanel >
<Image x:name="MyImage" Source="Images/myImage.png" Name="Image_Cancel"/>
</StackPanel>
and when you want to to access the image or modify it
<Setter Property = "Source" TargetName = "MyImage" value = "something"/>