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.
Related
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.
I have the following Element:
<Button Click="btn_Click" Name="aName">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Name="tmpBorder" Padding="10">
<TextBlock Text="General" />
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding doIt}" Value="someString">
<Setter TargetName="tmpBorder" Property="Background" Value="Red" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
My goal is to set the background of the Border element in the ControlTemplate if doIt is set as "someString" in the code behind. doIt is a public member of the defined class in the code behind and will be set by the method btn_Click.
Executing the method and setting doIt works fine, but the Background of the border doesn't change to red. Am I missing something important?
this should work
<Button Click="btn_Click" Name="aName">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Padding="10" Background="{TemplateBinding Background}">
<TextBlock Text="General" />
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding doIt}" Value="someString">
<Setter Property="Background" Value="Red" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
EDIT: since the first approach didn't work try directly with a style applied to the Border
If you don't set a property like a background in a control template your changes with a trigger won't work
<Button Click="btn_Click" Name="aName">
<Button.Template>
<ControlTemplate TargetType="Button">
<ControlTemplate.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding doIt}" Value="someString">
<Setter Property="Background" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</ControlTemplate.Resources>
<Border Padding="10" Background="{TemplateBinding Background}" Style>
<TextBlock Text="General" />
</Border>
</ControlTemplate>
</Button.Template>
</Button>
I have a button on my WPF application (MVVM Pattern) which is responsive to a click event. Basically if you click on this button its background becomes LightGreen (the default color is LightGray). I already achieved the desired behavior using the following code:
<Button Grid.Column="2" Grid.Row="6" Grid.ColumnSpan="3" Grid.RowSpan="2" Content="{Binding FirstSchedule.Message}" Command="{Binding FirstScheduleButtonClick}">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="LightGray"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding FirstScheduleButtonSelected}" Value="True">
<Setter Property="Background" Value="LightGreen"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
In which FirstScheduleButtonSelected is a ViewModel property defined by:
private bool _firstScheduleButtonSelected;
public bool FirstScheduleButtonSelected
{
get { return _firstScheduleButtonSelected; }
set { _firstScheduleButtonSelected = value; NotifyPropertyChanged("FirstScheduleButtonSelected"); NotifyPropertyChanged("Background"); }
}
Now I need to make this button's borders rounded. I already tried this solution How to create/make rounded corner buttons in WPF?, and I ended up with:
<Button Grid.Column="2" Grid.Row="6" Grid.ColumnSpan="3" Grid.RowSpan="2" Content="{Binding FirstSchedule.Message}" Command="{Binding FirstScheduleButtonClick}">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="15" Background="LightGray" BorderThickness="1" Padding="2">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="LightGray"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding FirstScheduleButtonSelected}" Value="True">
<Setter Property="Background" Value="LightGreen"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Now my borders are, in fact, rounded but when I click the button it does not becomes green.
Q: How can I modify this button in order to make its borders rounded and keep my already functioning behavior of changing its color on click?
Here's what I'd do:
<Window.Resources>
<!-- ... -->
<Style x:Key="GreenToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="Background" Value="LightGray" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border
CornerRadius="15"
Background="{TemplateBinding Background}"
BorderThickness="1"
Padding="2"
>
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter
Property="Background"
Value="LightGreen"
/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ... -->
</Window.Resources>
...
<ToggleButton
Grid.Column="2"
Grid.Row="6"
Grid.ColumnSpan="3"
Grid.RowSpan="2"
Content="{Binding FirstSchedule.Message}"
IsChecked="{Binding FirstScheduleButtonSelected}"
Style="{StaticResource GreenToggleButtonStyle}"
/>
I have two buttons. Its the same grafic on both. But if i place one button on the other button, the button on top will be a little more brighter.
<Button x:Name="btnMenue1" HorizontalAlignment="Left" Margin="10,0,0,360" Width="625" Click="btnMenue1_Click" VerticalAlignment="Bottom" FontWeight="Bold" FontSize="36" Foreground="White" Height="340" RenderTransformOrigin="0.497,0.503" Background="#FFCBCAC8" BorderBrush="#FF0F0F11" IsEnabled="False">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Opacity" Value="0.5" TargetName="Border"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
<DataTrigger Binding="{Binding ElementName=btnMenue1Text, Path=IsPressed}" Value="True">
<Setter Property="Opacity" Value="0.5" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button x:Name="btnMenue1Text" HorizontalAlignment="Left" Margin="15,0,0,650" Width="310" Click="btnMenue1_Click" VerticalAlignment="Bottom" FontSize="36" Foreground="White" Height="50" RenderTransformOrigin="0.497,0.503" Background="{x:Null}" BorderBrush="{x:Null}" IsEnabled="False">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Opacity" Value="0.5" TargetName="Border"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
<TextBlock x:Name="tbMenue1" Foreground="White" FontSize="36" Text="Menue1" VerticalAlignment="Top" Height="50" HorizontalAlignment="Left" FontFamily="Segoe UI Light" FontWeight="Bold" Width="290" />
</Button>
Picture if button is over button
Picture if button is not over button
Don't use Opacity for color blending.
So if you want something like a maroon color, use a maroon color, not a half-transparent red element on a black background.
(To hack around the hack you could add a completely black element below your transparent overlaying element. Don't do this.)
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"/>