I am putting together a very simple WPF Window to demonstrate how the style the end user has asked for looks. As there are a number of repeated button type objects I wanted to make them have a style in the window that can then be transferred to the real application once adjustments have been made.
The problem I face is that the user wishes to have images for their buttons, when I set the background image within the button itself then it shows perfectly and behaves as I want (change of image on mouseover etc). When I move that formatting into the Style everything till works but the background images don't show. I am sure I am missing something very simple but I cannot see it.
The code I have generated is below :-
<Window x:Class="SkinningDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SkinnigDemo"
mc:Ignorable="d"
Title="DemoWindow" Height="450" Width="800">
<Window.Resources>
<Style x:Key="MainButtonStyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/Button1.png" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="0">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/Button1.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#FF266C38"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/Button2.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#220A88"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="Home">
<Grid.Background>
<SolidColorBrush Color="#FF220A88" Opacity="0.15"/>
</Grid.Background>
<Image HorizontalAlignment="Left" Height="68" Margin="10,10,0,0" VerticalAlignment="Top" Width="737" Source="images/Master Logo transparent.png"/>
<TextBlock HorizontalAlignment="Left" Height="62" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" Width="750" Margin="36,96,0,0" Foreground="#FF266C38" FontSize="14" FontWeight="Bold"><Run Language="en-gb" Text="Sample Welcome Text will be placed here once agreed..."/></TextBlock>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="36,0,0,0" Stroke="#220A88" VerticalAlignment="Center" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="427,0,0,0" Stroke="#220A88" VerticalAlignment="Center" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="36,295,0,0" Stroke="#220A88" VerticalAlignment="Top" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="427,295,0,0" Stroke="#220A88" VerticalAlignment="Top" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="54,163,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="First functional text will go here..."/></TextBlock>
<Button x:Name="Button1" Style="{StaticResource MainButtonStyle}" Content="View Function 1" HorizontalAlignment="Left" Height="50" Margin="82,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18">
</Button>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="446,163,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Second Functional Text will go here..."/></TextBlock>
<Button x:Name="Button2" Style="{StaticResource MainButtonStyle}" Content="View Function 2" HorizontalAlignment="Left" Height="50" Margin="472,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="56,294,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Third Functional Text will go here"/></TextBlock>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="446,295,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Fourth functional text will go here..."/></TextBlock>
<Button x:Name="Button3" Style="{StaticResource MainButtonStyle}" Content="View Function 3" HorizontalAlignment="Left" Height="50" Margin="472,343,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>
<Button x:Name="Button4" Style="{StaticResource MainButtonStyle}" Content="View Function 4" HorizontalAlignment="Left" Height="50" Margin="80,343,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>
</Grid>
</Window>
As I say the background images do not display on the screen, but if I remove the style and set it all locally with exactly the same values it works perfectly :-
<Button x:Name="Button1" Content="View Function 1" HorizontalAlignment="Left" Height="50" Margin="82,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18">
<Button.Background>
<ImageBrush ImageSource="/Images/Button1.png"/>
</Button.Background>
</Button>
Thanks in anticipation of the help.
Playing around with your nicely looking XAML I noticed that you need to say "bind" the Background brush to the root element of your control template which is a border, to get background images displayed.
If you just insert Background="{TemplateBinding Background}" under the line <Border Name="border" it'll basically work out fine., like:
<Border Name="border"
Background="{TemplateBinding Background}"
BorderThickness="0">
Related
I have a ToggleButton defined like:
<ToggleButton Name="tbPinned" Grid.Row="0" Grid.Column="3" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="1,0,0,-5" Height="30" Width="30" IsChecked="True" Checked="tbPinned_Checked" Unchecked="tbPinned_Unchecked" >
<Image Source="/some_image.png" Stretch="Fill" />
</ToggleButton>
However, I just want the button to be an image, not an image on a button. If I was using a normal Button I would just do something like Style="{DynamicResource NoChromeButton}" in the opening ToggleButton tag. But this does not work.
How can I mimic the whole NoChromeButton thing in a ToggleButton?
EDIT: Editted to include how I do it with regular Buttons:
<Button Style="{DynamicResource NoChromeButton}" Height="17" Margin="0,0,30,0" Name="btnMinimize" VerticalAlignment="Top" Grid.Column="1" Click="btnMinimize_Click" HorizontalAlignment="Right" Width="27" Padding="0" Visibility="Visible">
<Image Source="/some_image.png" Stretch="None" />
</Button>
Just copy/paste this into new WPF project.
<Window x:Class="SOChromeButton.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>
<Style x:Key="Chromeless" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderThickness="0" Width="54" Height="54">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ToggleButton Style="{StaticResource Chromeless}" Name="tbPinned" Grid.Row="0" Grid.Column="0" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10,0,0,0" IsChecked="True" >
<Image Source="C:\Temp\info.png"></Image>
</ToggleButton>
</Grid> </Window>
Will this do?
<ToggleButton Name="tbPinned" Grid.Row="0" Grid.Column="3" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="1,0,0,-5" Height="30" Width="30" IsChecked="True" Checked="tbPinned_Checked" Unchecked="tbPinned_Unchecked"
BorderThickness="0" Background="Transparent">
<Image Source="/some_image.png" Stretch="Fill" />
</ToggleButton>
I am developing an application with MVVm in wpf.
Here I have to place a user control to another user control.
Main user control will have have the UI elements to save the information. in addtion , I need to place a user control where I have a list view. I need to populate the data to the list view.
XAML is as follows
<UserControl x:Class="SMTF.TestCaseView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SMTF" mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
d:DesignHeight="550" d:DesignWidth="508">
<UserControl.Resources>
<Style x:Key="SMToggle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}" >
<Border CornerRadius="3" Background="{TemplateBinding Background}">
<ContentPresenter Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="Show View"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF3F3F3" Offset="1"/>
<GradientStop Color="#FFF3F3F3" Offset="0.307"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Content" Value="Add New"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF3F3F3" Offset="1"/>
<GradientStop Color="#FFF3F3F3" Offset="0.307"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Height="550" Width="508">
<Button Content="Save" Command="{Binding SaveData}" Height="23" HorizontalAlignment="Left" Margin="299,507,0,0" Name="btnSave" VerticalAlignment="Top" Width="75" />
<Button Content="Reset" Command="{Binding ClearData}" Height="23" HorizontalAlignment="Right" Margin="0,507,47,0" Name="btnReset" VerticalAlignment="Top" Width="75" />
<Label Content="Category" Height="28" HorizontalAlignment="Left" Margin="13,27,0,0" Name="lblCategory" VerticalAlignment="Top" />
<ComboBox DisplayMemberPath="Category_Desc" Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Width="343" Margin="118,27,0,0" Name="cboCategory"
ItemsSource="{Binding Path=Category}"
SelectedValue="{Binding Path=Category_Id}"
SelectedValuePath="Category_Id"
Text="{Binding Category_Desc}" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding CategorySelected}"
CommandParameter="{Binding SelectedValue, ElementName=cboCategory}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ComboBox>
<Label Content="Sub Category" Height="28" HorizontalAlignment="Left" Margin="13,65,0,0" Name="lblSubCategory" VerticalAlignment="Top" />
<ComboBox DisplayMemberPath="Sub_Category_Desc" Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Width="343" Margin="118,65,0,0" Name="cboSubCategory"
ItemsSource="{Binding Path=SubCategory}"
SelectedValue="{Binding Path=Sub_Category_Id}"
SelectedValuePath="Sub_Category_Id"
Text="{Binding Sub_Category_Desc}" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SubCategorySelected}"
CommandParameter="{Binding SelectedValue, ElementName=cboSubCategory}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ComboBox>
<Label Content="Scenario" Height="28" HorizontalAlignment="Left" Margin="13,101,0,0" Name="lblScenario" VerticalAlignment="Top" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="118,101,0,0" Name="cboScenario" VerticalAlignment="Top" Width="343"
ItemsSource="{Binding Path=Scenario}"
DisplayMemberPath="Scenario_Desc"
SelectedValuePath="Scenario_Id"
SelectedValue="{Binding Path=Scenario_Id}"
Text="{Binding Scenario_Desc}"
/>
<TextBox Height="118" HorizontalAlignment="Left" Margin="118,139,0,0" Name="txtCulture" Text="{Binding Test_Desc}" VerticalAlignment="Top" Width="340" />
<Label Content="Test Description" Height="28" HorizontalAlignment="Left" Margin="13,137,0,0" Name="lblCulture" VerticalAlignment="Top" />
<Label Content="Applicable to" Height="28" HorizontalAlignment="Left" Margin="13,280,0,0" Name="lblVersion" VerticalAlignment="Top" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="118,285,0,0" Name="Version" VerticalAlignment="Top" Width="343"
ItemsSource="{Binding Path=Version}"
DisplayMemberPath="Version_Desc"
SelectedValuePath="Version_Id"
SelectedValue="{Binding Path=Version_Id}"
Text="{Binding Version_Desc}"
/>
<CheckBox Content="Activate" Height="16" HorizontalAlignment="Left" IsChecked="{Binding Active}" Margin="402,263,0,0" Name="chkActive" VerticalAlignment="Top" />
<local:TestScriptListView HorizontalAlignment="Left" Margin="118,349,0,0" x:Name="scriptList" VerticalAlignment="Top" Height="148" Width="343" DataContext="{Binding Path=Script}" />
<Label Content="Script" Height="28" HorizontalAlignment="Left" Margin="13,318,0,0" Name="lblScript" VerticalAlignment="Top" />
<TextBlock HorizontalAlignment="Left" Margin="118,118,0,0" Height="32">
<ToggleButton x:Name="VisibilityToggle" Focusable="False" Command ="{Binding ShowNew}" Style="{StaticResource SMToggle}" >
<Image Source="/Image/Add.png" Width="16" Height="16" />
</ToggleButton>
</TextBlock>
</Grid>
</UserControl>
How to solve this?
thanks
NS
Add reference your Listview's Usercontrol in entry usercontrol and set Datacontext .
like-
< StackPanel>
< views:ExceptionStrip DataContext="{Binding ExceptionViewModel}"/>
< /StackPanel>
I have the following XAML:
<Window x:Class="WpfTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="227" Width="391">
<Window.Resources>
<ControlTemplate x:Key="PentagonButton" TargetType="{x:Type Button}">
<Grid>
<Path Data="M 0,-1 L -.95,-.3 L -.58,.8 L .58,.8 L .95,-.3 Z" Stroke="Black" Stretch="Uniform" Fill="Red" />
<Viewbox>
<ContentPresenter Margin="20" />
</Viewbox>
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid>
<Button Content="red" Margin="12,19,0,0" Template="{StaticResource PentagonButton}" HorizontalAlignment="Left" Width="166" Height="151" VerticalAlignment="Top" />
<Button Content="blue" Margin="178,19,0,0" Template="{StaticResource PentagonButton}" Height="151" VerticalAlignment="Top" HorizontalAlignment="Left" Width="173" />
</Grid>
</Window>
Because of Fill="Red", obviously all buttons will have a red fill/background color. I want to use this template for several buttons, but each of them with a different fill color, known at design time. Setting the background color has no effect, so I have to change the Fill color, but I can't define the Path property again in the actual button definitions. How do I access and override this property in the XAML?
Don´t use the template directly. Assign a Style and use that.
i.e.
<Style x:Key="PentagonButton" TargetType="{x:type Button}">
<Setter Property="Background" Value="Red"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Path Data="M 0,-1 L -.95,-.3 L -.58,.8 L .58,.8 L .95,-.3 Z" Stroke="Black" Stretch="Uniform" Fill="{TemplateBinding Background}" />
<Viewbox>
<ContentPresenter Margin="20" />
</Viewbox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then use it like this:
<Grid>
<Button Content="red" Margin="12,19,0,0" Style="{StaticResource PentagonButton}" HorizontalAlignment="Left" Width="166" Height="151" VerticalAlignment="Top" />
<Button Content="blue" Margin="178,19,0,0" Style="{StaticResource PentagonButton}" Height="151" VerticalAlignment="Top" HorizontalAlignment="Left" Width="173" Background="Blue" />
</Grid>
Use TemplateBinding to change the values of your templates in the xaml of its controls:
<ControlTemplate x:Key="PentagonButton" TargetType="{x:Type Button}">
<Grid>
<Path Data="M 0,-1 L -.95,-.3 L -.58,.8 L .58,.8 L .95,-.3 Z" Stroke="Black" Stretch="Uniform" Fill="{TemplateBinding Background}" />
<Viewbox>
<ContentPresenter Margin="20" />
</Viewbox>
</Grid>
</ControlTemplate>
Your button:
<Button Background="Red" Content="red" Margin="12,19,0,0" Template="{StaticResource PentagonButton}" HorizontalAlignment="Left" Width="166" Height="151" VerticalAlignment="Top" />
<Button Background="Blue" Content="blue" Margin="178,19,0,0" Template="{StaticResource PentagonButton}" Height="151" VerticalAlignment="Top" HorizontalAlignment="Left" Width="173" />
I'm having this annoying problem with WPF that I can't get my head around.
What I'm trying to create, is a very basic implementation of a drawing program (it's a school assignment) with movable tool windows, like in Photoshop.
I've managed to figure out that I can use this element "Thumb" to implement simple Drag functionality. Since the Thumb element itself is not visible, and the object that I'm using as a container (a DockPanel) does not have a DragDelta property, I simply created a ControlTemplate and attached it to the Thumb, so now I have a draggable color picker that works okay. So far so good.
But, problems arise when I want to create additional ControlTemplates, to use for other Thumb-elements that I plan to use (I get the error: The property 'VisualTree' is set more than once.).
This is what I want help with. I have pasted my whole Window.Resources-tag here so you can see what's going on.
<Window.Resources>
<Style x:Key="toolBoxBtn" TargetType="Button">
<Setter Property="Width" Value="60" />
<Setter Property="Height" Value="60" />
<Setter Property="Margin" Value="5" />
<Setter Property="DockPanel.Dock" Value="Top" />
</Style>
<Style x:Key="style1" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<DockPanel Background="#e6e6e6" HorizontalAlignment="Left" Margin="0" Height="auto" Width="auto" Canvas.Left="640" Canvas.Top="8">
<Label VerticalAlignment="Top" DockPanel.Dock="Top" Background="#282828" Foreground="white" Content="Colors" HorizontalAlignment="Stretch" Width="auto" Height="auto" />
<StackPanel>
<StackPanel Orientation="Horizontal" Margin="7" VerticalAlignment="Center">
<Rectangle DockPanel.Dock="top" Name="red" Fill="Red" Height="20" Width="20" Stroke="Black" MouseDown="getColor" />
<Rectangle DockPanel.Dock="top" Name="blue" Fill="Blue" Height="20" Width="20" Stroke="Black" MouseDown="getColor"/>
<Rectangle DockPanel.Dock="top" Name="green" Fill="GreenYellow" Height="20" Width="20" Stroke="Black" MouseDown="getColor"/>
<Rectangle DockPanel.Dock="top" Name="customColorSlot1" Fill="White" Height="20" Width="20" Stroke="Black" MouseDown="getColor" />
<Rectangle DockPanel.Dock="top" Name="customColorSlot2" Fill="White" Height="20" Width="20" Stroke="Black" MouseDown="getColor"/>
<Rectangle DockPanel.Dock="top" Name="customColorSlot3" Fill="White" Height="20" Width="20" Stroke="Black" MouseDown="getColor"/>
</StackPanel>
<GroupBox Header="Selected Color">
<Rectangle Name="currentColor" Fill="White" Height="40" Width="40" Stroke="Black" MouseDown="test"/>
</GroupBox>
</StackPanel>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="fillTool" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Ellipse HorizontalAlignment="Left" Height="19" Margin="310,330,0,0" VerticalAlignment="Top" Width="19" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="12" Margin="317,316,0,0" VerticalAlignment="Top" Width="12" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="8" Margin="307,320,0,0" VerticalAlignment="Top" Width="7" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="3" Margin="317,302,0,0" VerticalAlignment="Top" Width="3" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="5" Margin="311,310,0,0" VerticalAlignment="Top" Width="5" Fill="Blue"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
What could be the problem here?
ControlTemplate can only contain one child. Try and change it to a Canvas instead
<Style x:Key="fillTool" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Canvas>
<Ellipse HorizontalAlignment="Left" Height="19" Margin="310,330,0,0" VerticalAlignment="Top" Width="19" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="12" Margin="317,316,0,0" VerticalAlignment="Top" Width="12" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="8" Margin="307,320,0,0" VerticalAlignment="Top" Width="7" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="3" Margin="317,302,0,0" VerticalAlignment="Top" Width="3" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="5" Margin="311,310,0,0" VerticalAlignment="Top" Width="5" Fill="Blue"/>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I want to change a button's color on hover.
This is my xaml code.
<Window x:Class="OfflineIM.UI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Vytru | Offline IM" Height="300" Width="550" ResizeMode="CanMinimize" WindowStartupLocation="CenterScreen" Icon="/OfflineIM.UI;component/Images/368x368.ico">
<Grid Name="MainGrid">
<Grid Name="HeaderGrid" VerticalAlignment="Top" HorizontalAlignment="Center" Width="550" Height="130">
<Image VerticalAlignment="Stretch" HorizontalAlignment="Right" Width="250" Margin="5,10,10,10" Source="Images\offlineIM-logo.png" />
</Grid>
<Grid Name="ContentGrid" VerticalAlignment="Bottom" HorizontalAlignment="Center" Height="160" Width="550">
<Grid Margin="20,10,20,80" Background="#5F68686A">
<TextBlock Margin="170,5,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="" Name="companyNameTextBlock" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
<TextBlock Margin="5,5,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="Company Name:" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
<TextBlock Margin="5,25,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="Number of Users:" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
<TextBlock Margin="170,25,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="" Name="NumberOfUsersTextBlock" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
<TextBlock Margin="5,45,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="Support and subscription:" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
<TextBlock Margin="170,45,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="" Name="SupportAndSubscriptionTextBlock" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
</Grid>
<Button Height="50" HorizontalAlignment="Right" Name="aboutButton" VerticalAlignment="Bottom" Width="50" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Margin="0,0,20,15" Cursor="Hand" ToolTip="About" ClickMode="Release" Click="aboutButton_Click">
<Button.Background>
<ImageBrush ImageSource="/OfflineIM.UI;component/Images/About.png" />
</Button.Background>
</Button>
<Button Height="50" HorizontalAlignment="Right" Name="updateLicenseButton" VerticalAlignment="Bottom" Width="50" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Margin="0,0,75,15" Cursor="Hand" ToolTip="Update License" ClickMode="Release" Click="updateLicenseButton_Click">
<Button.Background>
<ImageBrush ImageSource="/OfflineIM.UI;component/Images/UpdateLicense.png" />
</Button.Background>
</Button>
<Button Height="50" HorizontalAlignment="Left" Name="StartButton" VerticalAlignment="Bottom" Width="50" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Margin="20,0,10,15" Cursor="Hand" ToolTip="Start Service" ClickMode="Release" Click="StartButton_Click">
<Button.Background>
<ImageBrush ImageSource="/OfflineIM.UI;component/Images/Start.png" />
</Button.Background>
</Button>
<Button Height="50" HorizontalAlignment="Left" Name="StopButton" VerticalAlignment="Bottom" Width="50" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Margin="75,0,10,15" Cursor="Hand" ToolTip="Stop Service" ClickMode="Release" Click="StopButton_Click">
<Button.Background>
<ImageBrush ImageSource="/OfflineIM.UI;component/Images/Stop.png" />
</Button.Background>
</Button>
<TextBlock Margin="135,5,20,14" VerticalAlignment="Bottom" HorizontalAlignment="Left" Text="" Name="ErrorTextBlock" Foreground="#FF58595B" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
</Grid>
</Grid>
</Window>
You can try with this code
1 Style based on triggers
<Style x:Key="myStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="{StaticResource mouseOverColor}" />
</Trigger>
</ControlTemplate.Triggers>
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
2 Code with Ressource and Control
<Window x:Class="MouseOverTutorial.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<SolidColorBrush x:Key="mouseOverColor"
Color="Red" />
</Window.Resources>
<Grid>
<Button Content="Click"></Button>
</Grid>
</Window>