Background image on a button disappears on mouse over - wpf

In my WPF window application, when I take the mouse over my button, the background image on the button disappears and the button appears as if it does not have any image. What I want is, when the mouse is on the button, or when the button is clicked, the image still should be shown on the button, it shouldn't disappear.
Here is my code:
<Button Margin="465, 3, 0, 0" Width="25" Height="20" IsEnabled="True" IsDefault="False" IsCancel="False" BorderBrush="{x:Null}" ToolTip="Reload pads list"> <Button.Background> <ImageBrush ImageSource="/FieldPlanner;component/Images/reload.gif" /> </Button.Background> </Button>

What is happening to you is normal. When you create a button, it will use its default properties in case you don't change/override them.
In this case, when you create your button, you are overriding Background property, but only for normal state of your button. If you want background to change also when hovering, you should tell the button to do so.
For this purpose, I suggest you to override the button Template using styles, like this:
<Window x:Class="ButtonTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ImageBrush x:Key="ButtonImage" ImageSource="/ButtonTest;component/Resources/ok.png"></ImageBrush>
<Style TargetType="Button">
<Setter Property="Background" Value="{StaticResource ButtonImage}"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Cursor" Value="Hand" />
<!-- If we don't tell the background to change on hover, it will remain the same -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="84,75,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
</Grid>
</Window>
In this case, this style will be applied for all your buttons. You can specify which button to apply style by adding an x:Key to your style and then specify it in your button:
<Style TargetType="Button" x:Key="ButtonStyled">
.....
<Button Style="{StaticResource ButtonStyled}" Content="Button" Height="23" HorizontalAlignment="Left" Margin="84,75,0,0" Name="button1" VerticalAlignment="Top" Width="75" />

I am a little late to the party, but you are all doing this too complicated.
All you have to do is set the Content and the Background:
<Button x:Name="YouTubeButton" Width="148" Height="76" BorderBrush="Black"
Click="YouTubeButton_Click" Margin="112,20,112,0"
MouseEnter="Button_OnMouseEnter" MouseLeave="Button_MouseLeave">
<Button.Content>
<Image Source="Images/YouTube.png" />
</Button.Content>
<Button.Background>
<ImageBrush ImageSource="Images/YouTube.png" />
</Button.Background>
</Button>
(Optional - makes the mouse behave like a hand clicking a link)
#region Button_MouseLeave(object sender, MouseEventArgs e)
/// <summary>
/// This event is fired when the mouse leaves a button
/// </summary>
private void Button_MouseLeave(object sender, MouseEventArgs e)
{
// Change the cursor back to default
Cursor = null;
}
#endregion
#region Button_OnMouseEnter(object sender, EventArgs e)
/// <summary>
/// This event is fired when the mouse hovers over a button
/// </summary>
public void Button_OnMouseEnter(object sender, EventArgs e)
{
// Change the cursor to a Hand pointer
Cursor = Cursors.Hand;
}
#endregion

Here is what I'm using..
<Button
x:Name="buttonName"
Style="{DynamicResource myButtonStyle}"
HorizontalContentAlignment="Center"
HorizontalAlignment="Left"
Width="130"
VerticalAlignment="Top"
Height="30"
>
<ContentControl>
<Image Source="/MYAPPNAME;component/buttonimage.png" Width="30" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center" />
</ContentControl>
</Button>
And the related style (myButtonStyle) code is:
<Style x:Key="myButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="GhostWhite"/>
<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border
x:Name="border"
CornerRadius="6"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="true"
>
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Related

WPF. Prevent checkbox inside button from firing click event

I have a button with a checkbox inside in WPF. I want to be able to check the checkbox without firing the click event of the button.
My problem is that, currently, the click event is fired whether I press the checkbox itself or its label, behavior I don't want. I only want to raise the click event if I press somewhere in the red zone.
Is there a way to prevent this?
This is my code by now:
Style for the checkbox:
<Style x:Key="FilledCheckBox" TargetType="{x:Type CheckBox}">
<Setter Property="Foreground" Value="Gray"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Border x:Name="Border"
Width="15"
Height="15"
CornerRadius="1"
BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="Gray"/>
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="White"/>
</Border.Background>
</Border>
</BulletDecorator.Bullet>
<ContentPresenter Margin="5,0,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Left"
RecognizesAccessKey="True" />
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" TargetName="Border" Value="Green"/>
<Setter Property="BorderBrush" TargetName="Border" Value="Green"/>
<Setter Property="Foreground" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Style for the button (with the checkbox inside):
<Style x:Key="RoundCornerButtonWithCheck" TargetType="{x:Type Button}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Width" Value="120"/>
<Setter Property="Height" Value="30"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="280" ShadowDepth="2" BlurRadius="5" Opacity="0.2" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="border" CornerRadius="15" BorderBrush="Black" BorderThickness="0" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
TextElement.FontWeight="SemiBold">
</ContentPresenter>
</Border>
<CheckBox x:Name="checkbox" Grid.Column="0" VerticalAlignment="Center" Margin="20,0,0,0" Style="{StaticResource FilledCheckBox}"></CheckBox>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="border">
<Setter.Value>
<SolidColorBrush Color="Gold" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#FF33962B"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="grid" Value="0.25"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The button in the template:
<Button Name="deleteButton" Style="{StaticResource RoundCornerButtonWithCheck}" Content="{Binding Source={x:Static localization:Resources.Delete}, Converter={StaticResource CharacterCasingConverter}}" VerticalAlignment="Center" HorizontalAlignment="Left" Background="Red" Foreground="White" Margin="80,0,80,30" Click="DeleteClick"></Button>
Is there a way to prevent this?
You can't really prevent the built-in Button control itself from handling the click without cancelling the PreviewMouseLeftButtonDown event but you can implement the event handler to ignore clicks on the CheckBox:
private void SaveClick(object sender, RoutedEventArgs e)
{
if (!(e.OriginalSource is CheckBox))
{
//handle click outside the CheckBox...
}
}

WPF Trigger Not Working As Intended

I want a red button that turns black when the mouse hovers over it.
<Button Content="Hover me" Grid.Column="3" Grid.Row="3">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Red"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
However, my problem is that when I hover over the button, it turns into the default Windows style with a gradient gray appearance.
Try it
<Window.Resources>
<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Red"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="PART_Content"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
TextElement.Foreground="{TemplateBinding Foreground}"></ContentPresenter> </Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
and apply the custom Style as following
<Button Content="Hover me" Style="{StaticResource MyButtonStyle}" Height="30" Width="100"/>
The reason is the default Aero style of a Button. It has a chrome defined in ControlTemplate, which has it own behavior on various mouse events. So That over write your trigger call.
So you must override default ControlTemplate of Button to achieve your desired result.

Datagrid mouseover header image overlapping

I have image to display when I do mouseover on column header. But imp thing is it should be display below columnheader area.
I am able to create that but's it's overlapping with below cell. Here is image.
Here is my code:
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Height" Value="26" />
<Setter Property="Width" Value="126" />
<Setter Property="Foreground" Value="{DynamicResource ContrastWhiteBrush}" />
<Setter Property="Background" Value="{DynamicResource ContentToGreyedOutBrush}" />
<Setter Property="Template" Value="{StaticResource ColumnHeaderControlTemplate}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource GridHeaderMouseOverBrush}" />
</Trigger>
<Trigger Property="prism:DataGridProperties.IsMouseOverGridCellColumnHeader" Value="True">
<Setter Property="Background" Value="{DynamicResource GridHeaderMouseOverBrush}" />
</Trigger>
</Style.Triggers>
<ControlTemplate x:Key="ColumnHeaderControlTemplate" TargetType="{x:Type DataGridColumnHeader}" >
<AdornerDecorator>
<Grid Background="{TemplateBinding Background}" x:Name="dgColumnHeader" Panel.ZIndex="10001">
<ad:Interaction.Behaviors>
<GridColumnHeaderControl:GridAdornerBehavior AdornerTemplate="{StaticResource AdornerDataTemplate}" Panel.ZIndex="19999">
<ad:Interaction.Triggers>
<ad:EventTrigger SourceName="dgColumnHeader" EventName="MouseEnter">
<ad:InvokeCommandAction CommandName="ShowAdornerCommand"/>
</ad:EventTrigger>
<ad:EventTrigger SourceName="dgColumnHeader" EventName="MouseLeave">
<ad:InvokeCommandAction CommandName="HideAdornerCommand"/>
</ad:EventTrigger>
</ad:Interaction.Triggers>
</GridColumnHeaderControl:GridAdornerBehavior>
</ad:Interaction.Behaviors>
<Border x:Name="border" BorderBrush="Black" BorderThickness="0,0,1,1" Grid.ColumnSpan="1">
<Rectangle Width="116" Margin="3,3,3,3" HorizontalAlignment="Center" RadiusX="7" RadiusY="7" x:Name="PART_Rectangle" Fill="{DynamicResource ContentOutofFocusBrush}"></Rectangle>
</Border>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" />
</Grid>
</AdornerDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_Rectangle" Property="Fill" Value="{DynamicResource ActiveItemBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<DataTemplate x:Key="AdornerDataTemplate">
<Grid HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,13,0,0" Grid.ZIndex="99">
<Button Content="X" Width="28" Height="26" Panel.ZIndex="10002" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ctrls:RhinoDataGrid}}, Path=RemoveSelectedColumnCommand}">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Background" Value="{DynamicResource GridHeaderMouseOverBrush}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Heavy"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border Background="{TemplateBinding Background}" CornerRadius="0,0,12,12" BorderThickness="1,0,1,1" BorderBrush="Black">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</Grid>
</DataTemplate>
Some how my rowheader is working. my row header width is 36 and close button width is 28 with left margin 26. and some how image is no overlapping there with cell
Pls help me to fix.
Thanks
Dee
The height of the header is 26
<Setter Property="Height" Value="26" />
How do you expect it to display an image with a height > 26 ?
In order to show your “Close” button on top of the other control, you have to add “Popup” control and add “Close” button as its child. You can define maximum one child, which can be any UIElement.
You should define Event trigger for DatagridColumnHeader’s mouse over event and set “IsOpen = true” of popup control.
e.g.
<Popup Name="myPopup">
<TextBlock Name="myPopupText"
Background="LightBlue"
Foreground="Blue">
Popup Text
</TextBlock>
</Popup>
You can also set below properties to get the expected result.
AllowsTransparency="True"
Placement="Relative"
PlacementTarget="{Binding ElementName=Border}" /* your control name */
HorizontalOffset="0"
VerticalOffset="60"
PopupAnimation="Fade"

Setting WPF control background image using styles?

I have a set of buttons inside a stack panel. I want them all to have a background image. How can i do it using styles? since i don't want to set manually the Background image for each button.
Here is a code snippet:
<StackPanel Orientation="Horizontal" Height="100px" VerticalAlignment="Top">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="2,4" />
</Style>
</StackPanel.Resources>
<Button Width="127px" Height="79px" VerticalAlignment="Bottom">
<Button.Background>
<ImageBrush ImageSource="images/Tab.png" />
</Button.Background>
</Button>
<Button>A</Button>
<Button>R</Button>
<Button>S</Button>
</StackPanel>
Thanks.
Well, you specify a setter for the Background property within the style, and you set its value to the ImageBrush.
<StackPanel Orientation="Horizontal" Height="100px" VerticalAlignment="Top">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="2,4"/>
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="images/Tab.png"/>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button Width="127px" Height="79px" VerticalAlignment="Bottom"/>
<Button>A</Button>
<Button>R</Button>
<Button>S</Button>
</StackPanel>
Below is the style for your button and backgroung image is set to it.You can change the source of the ImageBrush to the one which you wanted .
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" >
<Setter.Value>
<ImageBrush ImageSource="pic.png"></ImageBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Microsoft_Windows_Themes:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then just use it:
<StackPanel Orientation="Horizontal" Height="100px" VerticalAlignment="Top">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="2,4" />
</Style>
</StackPanel.Resources>
<Button Width="127px" Height="79px" VerticalAlignment="Bottom" Style="{StaticResource ButtonStyle1}">
</Button>
<Button Style="{StaticResource ButtonStyle1}" >A</Button>
<Button Style="{StaticResource ButtonStyle1}">R</Button>
<Button Style="{StaticResource ButtonStyle1}">S</Button>
</StackPanel>

WPF button template alignment not setting correctly

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.

Resources