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.)
Related
What I am trying to do is when my mouse got over a button inside a border that border background color must change.
<Border Name="HistoryBorder"
Grid.Column="0"
Height="30"
VerticalAlignment="Top"
Margin="0,0,326.8,0"
Background="#FF323030"
CornerRadius="0,0,15,0"
MouseDown="draging_bar">
<Button HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="75"
Name="HistoryButton"
Height="30"
Margin="0"
FontFamily="/Fonts/#Minecraft"
Foreground="#FFB6B002" >
<Button.Content>
History
</Button.Content>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=HistoryButton, Path=IsMouseOver}" Value="True">
<DataTrigger.Setters>
<Setter Property="Background" Value="Green" />
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Border>
As you can see border is parent and button is a child in it. When I try to use targetname it is not working. Is something like that even possible ?
As far as I understand, setting Style for Border to be bind with it's child's IsMouseOver can be one of the ways.
<Border Name="HistoryBorder"
Grid.Column="0"
Height="30"
VerticalAlignment="Top"
Margin="0,0,326.8,0"
CornerRadius="0,0,15,0"
>
<!-- You have to put Background color to Style. Or priority makes it cannot be overrided from the Setter of Style -->
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="#FF323030"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=HistoryButton, Path=IsMouseOver}" Value="True">
<DataTrigger.Setters>
<Setter Property="Background" Value="Black"/>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
...
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.
I'm making an WPF application where I have a label. When label trigger on mouseover popup should appear. In this popup I have some buttons with differents action. But when I mouseover the label the popup appear but I can't use my popup before it disappear by trigger mouseleave.
Here is my XAML code:
<Label x:Name="userLabel" Content="Label" Grid.Column="2" HorizontalAlignment="Left" Margin="404,31,0,0" VerticalAlignment="Top" Width="145" Foreground="White" MouseEnter="UserLabelMouseEnter" MouseLeave="UserLabelMouseLeave"/>
<Popup Name="UserMenuPopUp" PopupAnimation="Fade" Height="auto" Margin="0,0,0,0" AllowsTransparency="True" Placement="bottom" PlacementTarget="{Binding ElementName=userLabel}" StaysOpen="false">
<Border BorderThickness="1" Background="#EEEEEE" Height="160" HorizontalAlignment="Left" Width="195" RenderTransformOrigin="0.5,0.5">
<Grid>
<Button x:Name="profile" Content="profile" Margin="0,0,0,0" VerticalAlignment="Top" Height="40" BorderThickness="0" Click="ProfileBtn_Click" Foreground="White" HorizontalContentAlignment="Right">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#282828"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#79B539"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button x:Name="RentalPlans" Content="Rental plans" Margin="0,40,0,0" VerticalAlignment="Top" Height="40" BorderThickness="0" Click="RentalPlansBtn_Click" Foreground="White">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#282828"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#79B539"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button x:Name="MyCredits" Content="My credit cards" Margin="0,80,0,0" VerticalAlignment="Top" Height="40" BorderThickness="0" Click="MycreditsBtn_Click" Foreground="White">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#282828"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#79B539"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button x:Name="LogOut" Content="Log out" Margin="0,120,0,0" VerticalAlignment="Top" Height="40" BorderThickness="0" Foreground="White" Click="LogOuBtn_Click">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#282828"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#79B539"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</Border>
</Popup>
Here is my C# code:
private void UserLabelMouseEnter(object sender, MouseEventArgs e)
{
UserMenuPopUp.IsOpen = true;
}
private void UserLabelMouseLeave(object sender, MouseEventArgs e)
{
UserMenuPopUp.IsOpen = false;
}
You can move the UserLabelMouseLeave code to the Popup's MouseLeave event.
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 button with a black background. When you tab to the Button, you don't see that focus is now on the Button because of the Button's background color. How can I change the focus frame to be red?
(When you have focus on the Button, you see some frame with points in the button)
<Border x:Name="border" Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
Focusable="False"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="1" />
</Trigger>
....
Try this
<Style TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style TargetType="Control">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle x:Name="bd" Stroke="Red" SnapsToDevicePixels="True" StrokeThickness="1" StrokeDashCap="Triangle" StrokeDashArray="1,2" Margin="1" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="border" BorderBrush="Transparent" BorderThickness="1" Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black"></Setter>
<Setter TargetName="border" Property="Margin" Value="1"></Setter>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Foreground" Value="Red"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button Content="Hello World" Background="Gray" Height="35" Width="200" ></Button>
Update
As per my Knowledge Elements that are not enabled do not participate in hit testing or focus and therefore will not be sources of input events.so one has to use workaround like this:
<Window.Resources>
<Style x:Key="FocusVisualStyle">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle x:Name="bd" Stroke="Red" SnapsToDevicePixels="True" StrokeThickness="1" StrokeDashCap="Triangle" StrokeDashArray="1,2" Margin="1" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Buttonstyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="IsEnabled" Value="True"/>
<Setter Property="FocusVisualStyle" Value="{DynamicResource FocusVisualStyle}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="border" Focusable="False" BorderBrush="Transparent" BorderThickness="1" Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black"></Setter>
<Setter TargetName="border" Property="Margin" Value="1"></Setter>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Foreground" Value="Red"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.3"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="gd" Height="35" Width="200">
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=bt,Path=IsEnabled}" Value="False">
<Setter Property="Focusable" Value="True"></Setter>
<Setter Property="FocusVisualStyle" Value="{DynamicResource FocusVisualStyle}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Button x:Name="bt" IsEnabled="False" Style="{StaticResource Buttonstyle}" Content="Hello World" IsTabStop="True" Background="Gray"/>
</Grid>
Use the IsFocused dependency property in your triggers. I suggest you to change the border width, or its colour, to differentiate the button from the unfocused ones. The dashed rectangle that indicates focus is, as far as I know, implemented in the built controls only. If you make a template, you should override it to suit your needs.