I have a wppf button with a background image.
When I mouse over background will be empty and a button is shown.
How can I disable mouse effect?
<Button BorderBrush="{x:Null}" Content="Reset" BorderThickness="0"Foreground="White" Focusable="False">
<Button.Background>
<ImageBrush ImageSource="button.png" />
</Button.Background>
Here's how I disable the visual mouseover effects on buttons. I left in some of my settings just to get you a feel of how to play with the triggers and stuff, feel free to experiment!
<Style TargetType="Button" x:Key="ImageButton" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="5"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Gainsboro" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value="0.25" />
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
EDIT: Using the "BasedOn" + setting FocusVisualStyle to null (first 2 lines) gets rid of the mouse over effects. Everything else is just examples. I added a border there in order to play with it through a trigger (since I want a custom mouseover effect).
In the ControlTemplate of the Button the Background property will be overridden by a trigger.
You can either redo the whole ControlTemplate and leave out the Background change or just add the image as content of your Button like so to avoid all these complications:
<Button.Content>
<Image Source="button.png" />
</Button.Content>
Or if you need the text in there as well:
<Button.Content>
<Grid>
<Image Source="button.png" />
<TextBlock Text="Reset" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Grid>
</Button.Content>
Related
I wonder if there is a way to do it for all the future buttons and other controls or do i need to make a solution for each control/button ? And how to do it ?
I want to disable the mouse hove highlight.
<Button x:Name="btnTest" Content="Start Watching" HorizontalAlignment="Left" Margin="14,241,0,0" VerticalAlignment="Top" Width="109" RenderTransformOrigin="0.484,-0.066" Height="30" FontSize="16" Background="#FFFB0000" Click="btnTest_Click"/>
<TextBox HorizontalAlignment="Left" Height="30" Margin="14,175,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="644"/>
<Button Content="Browse" Margin="673,175,18,0" VerticalAlignment="Top" RenderTransformOrigin="-0.111,0.769" Height="30" FontSize="16"/>
Add it to your ResourceDictionary:
<Style TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="1"
Padding="4,2"
BorderBrush="DarkGray"
CornerRadius="3"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And since Style has no key it will be on all the buttons
You'll need to create a style. if you want it to be applied through your whole app, you'll need to put it into your "app.xaml" file (within an application.Resources).
Bellow is an example of how to do it. I added some stuff like setters to illustrate that you can add properties, you could also add triggers and many things.
Not setting a "x:key" to your style will make them the default one (thus overriding the basic one), as the one below, if you wish to have a collection of styles, give them keys.
`<Style TargetType="{x:Type Button}">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Cursor"
Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center">
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>`
I am trying to give checkBox controltemplate to Button seeing an example in WPF Unleashed Text Book.
<ControlTemplate x:Key="buttoncheckBox" TargetType="{x:Type Button}">
<Grid>
<Rectangle Width="20" Height="20" x:Name="outerCircle" Stroke="Black" StrokeThickness="0.5">
</Rectangle>
<Rectangle Width="10" Height="10" x:Name="InnerCircle">
</Rectangle>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="outerCircle" Property="Stroke" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"></Setter>
</Trigger>
<Trigger Property="Button.IsPressed" Value="True">
<Setter TargetName="InnerCircle" Property="Fill" Value="Orange"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Button Template="{StaticResource buttoncheckBox}" Margin="10" Padding="10"/>
Here When I hover mouse or press it is not triggering events everywhere but only when I click on the border it is triggering.
When I use textbook example it is working anywhere what is difference I don't understand.
The problem is that the Grid you are using has no Background.
This is to fix your issue:
<ControlTemplate x:Key="buttoncheckBox" TargetType="{x:Type Button}">
<Grid Background="Transparent" Width="20" Height="20">
.....
You will have to check to see how you can make this code work with different resolutions. Now it seems to be only for 20x20.
In general, when you don't set a Background for a control or a panel such as the Grid, the area is considered to belong to the parent window and that's why no mouse events get raised.
If you don't want any actual background you should still set the Background property of the Grid to Transparent for the mouse movements and the clicks to be registered.
You don't need to specify a fixed size for the Grid though. Just setting the Background should be enough:
<ControlTemplate x:Key="buttoncheckBox" TargetType="{x:Type Button}">
<Grid Background="Transparent">
...
The only element that is currently available for hit test is the Rectangle.Stroke (the small border or line) When you interact with that thin line you will recognize that it will behave as you would expect. To make the whole Rectangle hit test visible you have to set the Rectangle.Fill property of both Rectangles:
<Rectangle Fill="Transparent" />
To allow the Button to resize properly use a Border. To enable the Button to display content like an icon or label text you need to add a ContentPresenter:
<ControlTemplate x:Key="buttoncheckBox" TargetType="{x:Type Button}">
<Border x:Name="outerCircle"
Margin="{TemplateBinding Margin}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<Grid>
<Rectangle x:Name="InnerCircle" />
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver"
Value="True">
<Setter TargetName="outerCircle"
Property="BorderBrush"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}">
</Setter>
</Trigger>
<Trigger Property="Button.IsPressed"
Value="True">
<Setter TargetName="InnerCircle"
Property="Fill"
Value="Orange">
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
and use it like this:
<Button Background="Transparent"
Width="80" Height="80"
Padding="5"
Template="{StaticResource buttoncheckBox}"
BorderBrush="Black"
BorderThickness="0.5"
Content="Label Text" />
Modify Button.Padding to resize the inner Rectangle.
I have problem with my button style. And when the cursor is in the button is can't click (if is not in the content or in the border of the element.
My xaml code:
<Button Style="{StaticResource DataButton}" Content="OK" Command="{Binding OKButton}" MinWidth="72" Height="22" Margin="5" />
My static resource
<Style x:Key="DataButton" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border" BorderThickness="2" BorderBrush="#d6d6d6" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can I fix this the user can click on button whatever is in the button perimeter.
Remove <Setter Property="OverridesDefaultStyle" Value="True" /> from the code. As you have replaced the built in style of Button, it no longer recognizes the click action defined in the Theme.
You have overrided default style and set Alignment to Center. You can remove overrideDefaultStyle or remove alignment, or you can make your layout in the other way.
I found it weird that there's no GridSplitter property like "DragBackground" or something alike.
This seems to work though:
<UserControl.Resources>
<Style x:Key="CustomGridSplitterStyle" TargetType="GridSplitter">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridSplitter">
<Grid x:Name="Root" >
<!-- Background -->
<Rectangle Fill="White" StrokeThickness="0" />
<!-- Focus Visual -->
<Rectangle x:Name="FocusVisual" Stroke="White" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
GridSplitter Style="{StaticResource CustomGridSplitterStyle}" Grid.Column="1" Width="6" HorizontalAlignment="Stretch"
BorderThickness="2,0,0,0" BorderBrush="Blue" />
My problem with this solution however is that I'd like to set a border on the left side of the GridSplitter (see above), which doesn't work when using the custom GridSplitter style.
Does anybody know how to get this working ?
If you want to use BorderBrush and BorderThickness in your Template you can use TemplateBinding on some Border. You can also use Setter in your Style to define some default value.
<Style x:Key="CustomGridSplitterStyle" TargetType="{x:Type GridSplitter}">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridSplitter">
<Border
x:Name="FocusVisual"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="FocusVisual" Property="..." Value="..." />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Also since GridSplitter is a Thumb and as such has IsDragging property so you can create Trigger to do something when it is true as in the example above
I have created a button template consisting of a border and a content presenter. A style is then wrapped around this template and applied to a button. However, when this button is used it is not carrying the values for horizontal and vertical alignment. In the designer the alignments are showing and the button is in the correct place, but when I run the program the button appears to have horizontal alignment = left and vertical alignment = right. Any ideas?
Here is the code for the template:
<ControlTemplate TargetType="Button" x:Key="DefaultButtonTemplate">
<Border CornerRadius="4"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
<Grid>
<ContentPresenter ContentSource="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
</Grid>
</Border>
</ControlTemplate>
Here is the code for the style:
<Style TargetType="Button">
<Setter Property="Background" Value="{DynamicResource WindowHeaderBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource WindowBorderBrush}" />
<Setter Property="Template" Value="{DynamicResource DefaultButtonTemplate}" />
<Setter Property="BorderThickness" Value="1" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource ButtonHoverBrush}" />
<Setter Property="BitmapEffect" Value="{DynamicResource ButtonHoverGlow}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{DynamicResource ButtonPressedBrush}" />
</Trigger>
</Style.Triggers>
</Style>
And here is the code for the button:
<Button Name="button1" Height="31" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,10,10">Button</Button>
There is no code behind file
The result of this code is a button that appears in the TOP LEFT corner of the parent flat up against the edge
i think that the line
<Button Name="button1" Height="31" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,10,10">Button</Button>
should be
<Button Name="button1" Height="31" VerticalContentAlignment="Bottom" HorizontalContentAlignment="Right" Margin="0,0,10,10">Button</Button>
or else you are only setting the alignment of the button not the content.