We Keep Coding

How to make button highlight when hovered over using a template

Recently started WPF and am very new to XAML. I'm trying to make a calculator that looks similar to the IOS one. However, after I changed the Button to Ellipse, the highlighting when hovered over or clicking on stopped working, if also the highlighting issue were to be fixed, how would I go about changing the colour of it?
<Button x:Name="ButtonEquals" Grid.Column="4" Grid.Row="6" Width="47" Height="47"
Content="=" Foreground="White"
BorderBrush="{x:Null}" Background="#FFFF9500">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Fill="#FFFF9500"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>

You can add a Trigger to the ControlTemplate and target the Ellipse by name assigning an x:Name and referring to it via TargetName. This way, you can define other states as well.
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse x:Name="MyEllipse" Fill="#FFFF9500"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="True">
<Setter TargetName="MyEllipse" Property="Fill" Value="OrangeRed"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MyEllipse" Property="Fill" Value="Blue"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="MyEllipse" Property="Fill" Value="Red"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="MyEllipse" Property="Fill" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
This targets only the Fill of the Ellipse, without changing other controls in the template. However, the values are hardcoded and not changable from outside.
If you want the template to be customizable to a certain degree, then you can put it in a Style and bind properties on the templated control using TemplateBinding or a RelativeSource with TemplatedParent for two-way and special scenarios. Additionally, you can add a FocusVisualStyle that allows to specify a template for keyboard focusing.
<Style TargetType="Button">
<Setter Property="Background" Value="#FFFF9500"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Ellipse StrokeDashArray="1 2" Stroke="DarkGreen" StrokeThickness="2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse x:Name="MyEllipse" Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="True">
<Setter TargetName="MyEllipse" Property="Fill" Value="OrangeRed"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MyEllipse" Property="Fill" Value="Blue"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="MyEllipse" Property="Fill" Value="Red"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="MyEllipse" Property="Fill" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If you want to reuse the style on multiple buttons, add it to a resource dictionary in scope and assign an x:Key to refer to it via StaticResource or DynamicResource.

You need to create Style of button instead Template. Button's template you can set inside style (read more about Style in WPF):
<Button x:Name="ButtonEquals"
Grid.Column="4"
Grid.Row="6"
Width="47"
Height="47"
Content="=">
<Button.Style>
<Style TargetType="Button">
<!-- Here is properties for buttons with same style-->
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
<Setter Property="Background" Value="#FFFF9500"/>
<!-- Here is your template -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<!-- Here is style triggers for interact with button -->
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!-- Set color as you wish -->
<Setter Property="Background" Value="LightSalmon"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
But actually, you need to create global ResourceDictionary (read about it) and there set styles for all buttons like <Style x:Key="CalculatorButton"> for set to buttons like <Button Content="1" Style="{StaticResource CalculatorButton}"/>

Why isnt my button using the style I created?

So I decided to try to give a button a custom style.
Yet when I assign it the Style it wont use it, why is this?
I tried creatinga button with a textbox, image and a ellipse with a label on that too.
I want the button to change color when I hover over it but its making my button disappear.
Window resources
<Window.Resources>
<Style x:Key="MenuButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ControlTemplate.Triggers>
<Trigger Property="Background" Value="#272727">
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Gray"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
And then the button
<Button Background="Transparent"
Style="{StaticResource MenuButton}"
Height="25"
BorderThickness="0">
<StackPanel Orientation="Horizontal">
<Image Source="Resources/earth-globe.png"
Height="20"
Width="20"
HorizontalAlignment="Left"
Margin="0,0,5,0"
UseLayoutRounding="True"
RenderOptions.BitmapScalingMode="Fant"/>
<Label Content="Websites"
Foreground="White"
VerticalAlignment="Center"
Width="100"
Height="24"/>
<Grid HorizontalAlignment="Right" Height="20" Width="20">
<Ellipse Width="20"
Height="20"
Fill="#555555"
Margin="0,0,0,0">
</Ellipse>
<TextBlock Text="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="12"
TextAlignment="Center"
Foreground="White"/>
</Grid>
</StackPanel>
</Button>

You do not want to put that style in the template portion of the style because a template is used for customizing the full control look (i.e. making a button a circle) and a way of giving the developer more flexibility over styling. What you could do is make a style that is applied to the button. Instead try this:
<Window.Resources>
<Style x:Key="MenuButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#272727" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Gray" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
If you did want to modify the template property though, also a valid approach you need to add a <ContentPresenter />. See the below example:
<Window.Resources>
<Style x:Key="MenuButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter />
<ControlTemplate.Triggers>
<Trigger Property="Background" Value="#272727">
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Gray"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
However, with the minimal styling you have it seems like a poor use case to modify the template and I would recommend the first approach.

Add missing ContentPresenter to your DataTemplate.
<Style x:Key="MenuButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter /> <!--This thing was missing-->
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="RED" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Tooltip is not showing properly

I am new to WPF. I want to show custom tool tip when a error occurs in TextBox. So I have used Style as shown below:
<Style x:Key="textBoxInError" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip Placement="Top">
<Border Margin="-4,0,-4,-3" Padding="2" Background="Red">
<Border.BitmapEffect>
<OuterGlowBitmapEffect></OuterGlowBitmapEffect>
</Border.BitmapEffect>
<Label Foreground="White" FontWeight="Bold" Content="{Binding RelativeSource={RelativeSource AncestorType={x:Type TextBox}}, Path=(Validation.Errors)[0].ErrorContent}"></Label>
</Border>
</ToolTip>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Above code is not showing error message in ToolTip. Could you please help m ein this regard? Any help would be highly appreciable.

You should change your current style with the following style (msdn):
<Style x:Key="textBoxInError" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
And you should create style for ToolTip:
<Style TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="HasDropShadow" Value="True"/>
<Setter Property="Placement" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border Name="Border" Margin="-4,0,-4,-3" Padding="2" Background="Red">
<Border.BitmapEffect>
<OuterGlowBitmapEffect></OuterGlowBitmapEffect>
</Border.BitmapEffect>
<ContentPresenter
Margin="4"
HorizontalAlignment="Left"
VerticalAlignment="Top"
TextElement.Foreground="White" TextElement.FontWeight="Bold"
/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" Value="true">
<Setter TargetName="Border" Property="CornerRadius" Value="4"/>
<Setter TargetName="Border" Property="SnapsToDevicePixels" Value="true"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Example of usage:
<TextBox Text="{Binding MyText, ValidatesOnDataErrors=True, NotifyOnValidationError=True, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource textBoxInError}"
/>

You should also replace
Path=(Validation.Errors)[0].ErrorContent
with
Path=(Validation.Errors).CurrentItem.ErrorContent}
because in your case you'll get an silent ArgumentOutOfRangeException when there are no validation errors. Don't forget to implement IDataErrorInfo or INotifyDataErrorInfo.

SurfaceListBox Selected Item Template

I am using the Microsoft Surface SDK and I am having trouble styling the selected item.
So far I have:
<s:SurfaceListBox Name="listy" Background="Transparent"
FontSize="50" Foreground="White" BorderBrush="White"
HorizontalContentAlignment="Center"
Margin="5,5,5,100" SelectionMode="Single">
<s:SurfaceListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Foreground="White" />
</DataTemplate>
</s:SurfaceListBox.ItemTemplate>
<s:SurfaceListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ContentPresenter HorizontalAlignment="Center" />
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Grey" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</s:SurfaceListBox.ItemContainerStyle>
</s:SurfaceListBox>
But that fails, and there are no tutorials for this at all on the internet - i searched for hours.
Thanks for any help!

I think the problem is that there is nothing using that Background. You could wrap the ContentPresenter in a Border and target it in the Trigger
<ControlTemplate TargetType="{x:Type s:SurfaceListBoxItem}">
<Border x:Name="Border">
<ContentPresenter HorizontalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Styling a TextBox with IDataErrorInfo in WPF

I'm trying to change style a text box. By now, I have made that my textbox shows an asterisc on the right of its border with this code:
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<Grid>
<TextBlock DockPanel.Dock="Right" HorizontalAlignment="Right" Foreground="Red" FontSize="14pt" FontWeight="Bold" Text="*"></TextBlock>
<Border BorderBrush="Red" BorderThickness="1">
<AdornedElementPlaceholder Name="controlWithError"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
But I'd like my textbox be shown with a red triangle on the right upper corner. How could I get this style on my textbox?
Thanks.

I have already done what I wanted, it was just like this:
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<Grid>
<Polygon Points="0,0 10,0 0,10 0,0" HorizontalAlignment="Right" Fill="Red" FlowDirection="RightToLeft"></Polygon>
<Border BorderBrush="Red" BorderThickness="1">
<AdornedElementPlaceholder Name="controlWithError" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>