Develop Reference

Why isnt my button changing colors on MouseOver?

So this is my XAML and for some reason it's not changing colors on mouseover, I added the triggers for it and I thought that would do it, when I hover over the button its not doing anything at all, why is that?
<Button Click="ButtonBase_OnClick" Margin="10,0,0,0" Style="{DynamicResource RoundedButtonStyle}" Width="100" Height="30" HorizontalAlignment="Left">
<Grid>
<Image IsHitTestVisible="False" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left" Source="Resources/addButton.png" />
<TextBlock IsHitTestVisible="False" Margin="20,0,0,1" VerticalAlignment="Center" Foreground="#9e9e9e">Add Product</TextBlock>
</Grid>
</Button>
<Window.Resources>
<Style x:Key="RoundedButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" Background="#2d2d30" BorderThickness="1" Padding="2">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>

Its not changing because you modified the control template of Button to:
<Border CornerRadius="5" Background="#2d2d30" BorderThickness="1" Padding="2"
Note the hard-coded background color. No matter what you do to the button's Background property it won't take effect since its not used. If you want to use that property in your template you need a TemplateBinding:
Background="{TemplateBinding Background}"
Then in the style set the default to your original value.
<Setter Property="Background" Value="#2d2d30"/>

C# WPF ComboBox with rounded corners IsMouseOver won't work

I found this code on doing rounded corners on combobox, I have modifyed it a little, but I have two Issues:
1) The mouseover on the combobox (textbox + togglebutton) won't
work. (I want the standard bahavior with blue background on mouseover, put red just to see if something happend)
2) when I click on the togglebutton I get the popup, but how can I make the textbox clickable to get the popup?
This is what I get:
This is what I want when mouseover (but with rounded corner)
Here are the code:
<Style x:Key="BorderStyle">
<Setter Property="Control.BorderBrush" Value="#A0A1A2" />
<Setter Property="Control.BorderThickness" Value="1" />
<Setter Property="Control.Background" Value="Transparent" />
<Setter Property="Control.Foreground" Value="#101010" />
<Setter Property="Control.FontFamily" Value="Arial" />
<Setter Property="Control.FontWeight" Value="Normal" />
<Setter Property="Control.FontStretch" Value="Normal" />
<Setter Property="Control.FontStyle" Value="Normal" />
</Style>
<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border CornerRadius="2,0,0,2"
BorderThickness="1,1,0,1"
Background="{TemplateBinding Background}"
BorderBrush="#A0A1A2">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxButtonStyle" TargetType="{x:Type ToggleButton}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="#EAEAEA"
x:Name="border"
CornerRadius="0,2,2,0"
BorderThickness="0,1,1,1"
BorderBrush="#A0A1A2">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RoundComboBox" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource BorderStyle}">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FontSize" Value="14px"/>
<Setter Property="IsReadOnly" Value="True"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<TextBox Name="PART_EditableTextBox"
Padding="0,0,0,0"
IsHitTestVisible="False"
Height="{TemplateBinding Height}"
BorderBrush="#A0A1A2"
Background="#EAEAEA"
Style="{StaticResource ComboBoxTextBoxStyle}"/>
<ToggleButton Grid.Column="1"
Height="{TemplateBinding Height}"
Style="{StaticResource ComboBoxButtonStyle}"
Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="Black" />
</ToggleButton>
<ContentPresenter Grid.Column="0"
Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="6,0,0,0"/>
<Popup Grid.Column="0"
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder"
BorderThickness="1"
CornerRadius="2"
Background="White"
BorderBrush="#A0A1A2"/>
<ScrollViewer SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

There were a few problems here. Each item I changed in the XAML is commented.
I've also removed the IsMouseOver triggers from the togglebutton and textbox styles, and put it in the ComboBox style. It now sets the background for the whole combobox when the mouse is anywhere over the ComboBox. The two controls in the ComboBox template now have Background="{TemplateBinding Background}", so they'll use the background color set by that trigger.
I've restored IsHitTestVisible on the textbox, but used a TemplateBinding to bind it to the ComboBox's IsEditable property. This will give you the correct mouse pointer over the textbox.
<!--
Better to define this in one place.
I'd do the same with the border color that you use everywhere.
-->
<SolidColorBrush x:Key="ComboBackgroundBrush" Color="#EAEAEA" />
<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
<!--
Must set this in a setter, not an an attribute on the control instance.
The attribute you had will override anything the style does. This is part of
"dependency property value precedence".
-->
<Setter Property="Background" Value="{StaticResource ComboBackgroundBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border CornerRadius="2,0,0,2"
BorderThickness="1,1,0,1"
Background="{TemplateBinding Background}"
BorderBrush="#A0A1A2"
>
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="{StaticResource ComboBackgroundBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<!--
Needs {TemplateBinding Background} so it uses whatever background brush
the control has at any given moment.
-->
<Border Background="{TemplateBinding Background}"
x:Name="border"
CornerRadius="0,2,2,0"
BorderThickness="0,1,1,1"
BorderBrush="#A0A1A2">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxOverlayToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="Focusable" Value="False" />
<Setter Property="ClickMode" Value="Press" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RoundComboBox" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource BorderStyle}">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FontSize" Value="14px"/>
<Setter Property="IsReadOnly" Value="True"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<ToggleButton
Grid.Column="0"
Style="{StaticResource ComboBoxOverlayToggleButtonStyle}"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
/>
<!--
Two problems:
1. IsHitTestVisible="False" prevented it from getting any mouse messages.
2. Background attribute was overriding anything the Style did,
so even if the trigger had fired, its setter would have failed.
Also, Height="{TemplateBinding Height}" is unnecessary. It'll size to its parent Grid.
And BorderBrush="#A0A1A2" should probably be in the Style
-->
<TextBox Name="PART_EditableTextBox"
Padding="0,0,0,0"
BorderBrush="#A0A1A2"
Style="{StaticResource ComboBoxTextBoxStyle}"
Background="{TemplateBinding Background}"
IsHitTestVisible="{TemplateBinding IsEditable}"
/>
<ToggleButton Grid.Column="1"
Height="{TemplateBinding Height}"
Style="{StaticResource ComboBoxButtonStyle}"
Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"
Background="{TemplateBinding Background}"
>
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="Black" />
</ToggleButton>
<ContentPresenter Grid.Column="0"
Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="6,0,0,0"
/>
<Popup Grid.Column="0"
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder"
BorderThickness="1"
CornerRadius="2"
Background="White"
BorderBrush="#A0A1A2"/>
<ScrollViewer SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>

TextBox text content to align to center when the whole TextBox is in stretch mode

Hi I have a TextBox that I want to fill a grid that I defined for it. To do that I put it on stretch so it can be fit. The problem is then the text would be written on top and not on the center. If I make the alignment to center the the TextBox won't stretch anymore.
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0" Text="Wall Temperature [C]"/>
<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Row="3" Grid.Column="1" Text="150.0"/>
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Row="4" Grid.Column="0" Text="Wall Temperature [C]"/>
<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="4" Grid.Column="1" Text="150.5"/>
It would look like this

You need to modify the ControlTemplate of the TextBox if you want the text in it to be vertically aligned:
<Grid>
<Grid.Resources>
<SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
<SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FF7EB4EA"/>
<SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF569DE5"/>
<Style TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
...
<TextBox Height="100" Text="Centered text..." />
</Grid>

How to add an icon on a rectangle's border corner?

I would like to add an image on the upper-right corner of a rectangle (something that I'll use as a kind of toggle button eventually).
How can I do that?
This is the xaml:
<UserControl x:Class="EmulationScreenControl.RectangleSelectionControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:emulationScreenControl="clr-namespace:EmulationScreenControl"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300">
<Grid SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Border BorderBrush="GhostWhite" BorderThickness="0" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Rectangle Fill="LightSkyBlue" Opacity="0.2" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased"></Rectangle>
</Border>
</Grid>

Just use a Grid to wrap both the Rectangle and the Image.
<Grid SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Border BorderBrush="GhostWhite" BorderThickness="0" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Grid>
<Rectangle Fill="LightSkyBlue" Opacity="0.2" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
</Rectangle>
<Image HorizontalAlignment="Right" VerticalAlignment="Top" Width="100" Height="100" Source="http://www.citgroup.in/images/icon/wcf.png"/>
</Grid>
</Border>
</Grid>
Here it is:

The solution I found was by Template creation:
<ControlTemplate x:Key="TopRightTemplate" TargetType="{x:Type local:SizeChrome}">
<Grid SnapsToDevicePixels="True" HorizontalAlignment="Right" VerticalAlignment="Top">
<StackPanel
Margin="-50,-50,-20,5"
Background="White"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Orientation="Horizontal">
<Image Cursor="Hand" ToolTip="Bla"
RenderOptions.EdgeMode="Aliased"
SnapsToDevicePixels="True"
RenderOptions.BitmapScalingMode="NearestNeighbor"
Width="16" Height="16"
MouseLeftButtonUp="ToggleIsMultipleScreensSelection"
>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Cursor"
Value="Hand" />
</Trigger>
<DataTrigger Binding="{Binding IsMultipleScreens}"
Value="false">
<Setter Property="Source"
Value="C:\\Users\\liorl\\Desktop\\I1.png" />
<Setter Property="ToolTip"
Value="NotMul" />
</DataTrigger>
<DataTrigger Binding="{Binding IsMultipleScreens}"
Value="true">
<Setter Property="Source"
Value="C:\\Users\\liorl\\Desktop\\I1.png" />
<Setter Property="ToolTip"
Value="Mul" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</StackPanel>
</Grid>
</ControlTemplate>

How to make a popup stays open when mouseover popup in WPF?

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.