Multiple ToggleButton image with different highlight image in WPF - wpf

I am very new to WPF and needed some pointers as to why this is not working correctly.
I am trying to make a maximize button that will change to a restore button when clicked. I thought a toggle button with 2 different styles that would be changed in the code behind could work. I am first trying to get the maximize button working and have ran into a problem. I get the error 'System.Windows.Controls.Image' is not a valid value for the 'System.Windows.Controls.Image.Source' property on a Setter. in my xaml. I seem to be not understanding something completely. Any help would be most helpful :)
Ryan
<Style x:Key="Maximize" TargetType="{x:Type ToggleButton}">
<Style.Resources>
<Image x:Key="MaxButtonImg" Source="/Project;component/Images/maxbutton.png" />
<Image x:Key="MaxButtonHighlight" Source="/Project;component/Images/maxbutton-highlight.png" />
</Style.Resources>
<Setter Property="ContentTemplate">
<Setter.Value>
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="{DynamicResource MaxButtonImg}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="{DynamicResource MaxButtonHighlight}"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Setter.Value>
</Setter>
</Style>
<ToggleButton Name="MaxButton" Width="31" Height="31" BorderThickness="0" Click="MaxButton_Click" Margin="0,0,10,0" Tag="Max"
Style="{DynamicResource Maximize}" />
My code behind would do something simple like this:
private void MaxButton_Click(object sender, RoutedEventArgs e)
{
ToggleButton tg = (ToggleButton)sender;
if ( tg.IsChecked == true) {
tg.Style = (Style)FindResource("Restore");
this.WindowState = WindowState.Maximized;
} else {
tg.Style = (Style)FindResource("Maximize");
this.WindowState = WindowState.Normal;
}
}

You don't want to change the image on mouse over. I added my images to a folder called Images in the project and set build action on the images to Resource.
<Window.Resources>
<Image x:Key="minImage" Source="/Images/min.png" Height="16" Width="16" />
<Image x:Key="maxImage" Source="/Images/max.png" Height="16" Width="16" />
<Style TargetType="{x:Type ToggleButton}" x:Key="minMaxButtonStyle">
<Setter Property="Content" Value="{DynamicResource minImage}" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="{DynamicResource maxImage}" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<ToggleButton Style="{StaticResource minMaxButtonStyle}" />
</StackPanel>
</Window>

Related

Change style of a child control on MouseOver in WPF

I have a custom control that holds two Rectangles and several TextBoxes. I wish to change the background color of the Rectangle on MouseOver.
I add trigger as following:
<Rectangle
Grid.Column="1"
Fill="#FF383838"
Grid.ColumnSpan="3"
Margin="0,4,4,4">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="#FF383838" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" Value="#FF575757" />
</Trigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
But since rectangle is part of my control, I assume the event is not firing.
Setting a property via XAML will be applied over the style properties that you try to set. To fix this, remove Fill=#FF383838 so you should have:
<Rectangle Grid.Column="1"
Grid.ColumnSpan="3"
Margin="0,4,4,4">
//... rest of code here
Try this code:
<Window.Resources>
<Style TargetType="Rectangle" x:Key="test">
<Setter Property="Fill" Value="#FF383838" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" Value="#FF575757" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Rectangle Style="{StaticResource test}" />

Simple working example to override default visual style of a button in wpf

I want to create custom visual style for my buttons.
I need a simple working example of how to override default visual style of a button. As well as a simple explanation of how to apply it.
I want to get something working, so I can start from there and experiment my way further.
I've tried to add a new recourse dictionary as follows:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="mstyle" TargetType="Button">
<Setter Property="FontWeight" Value="Bold" />
</Style>
</ResourceDictionary>
after that I've created some new button in runtime and tried to apply this style to it:
Dim MyButton As New Button
Dim st As New Style
st = Application.Current.FindResource("mstyle")
MyButton.Style = st
When I try to run this, I get an error that the recourse 'mstyle' could not be found.
You don't in most cases need any code behind to do that all what you need is to define a custom style that target your button in the resource dictionary or in the window resource here an example :
<Style x:Key="DarkStyleButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#373737" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="4" Background="{TemplateBinding Background}">
<Grid>
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E59400" />
<Setter Property="Foreground" Value="White" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="Gray" />
<Setter Property="Foreground" Value="LightGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
first set the value for the properties you want to customize,
then set the button template and don't forget to add the
ContentPresenter that will hold the button content
finally define triggers to handle the mouse over, click and what ever
else you want to set a custom look when it triggers (for example the
desable/enabled )
To use that style here how
<Button x:Name="BrowseButton" Margin="5" Style="{StaticResource DarkStyleButton}" ToolTip="tooltip about the button">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="../BrowseImage.png"/>
<TextBlock Text="Browse" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5"></TextBlock>
</StackPanel>
</Button.Content>
</Button>

How to remove highlight on button if IsMouseHover is true in wpf

I am developing a WPF project. I want to remove highlight (it is like blue in picture) on button if isMouseHover of Button is true. And I am not sure it is called highlight. Maybe it is probably effect, focus etc.. I added BorderBrush is transparent but it didn't work. The code is as follows:
<Image x:Key="LoginImg" Source="..\Images\Login\oturumac.png"
Stretch="Fill"/>
<Image x:Key="LoginImg_RollOver" Source="..\Images\Login\oturumac_rollover.png"
Stretch="Fill"/>
<Style x:Key="LoginButtonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Content" Value="{DynamicResource LoginImg_RollOver}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Content" Value="{DynamicResource LoginImg}"/>
</Trigger>
</Style.Triggers>
</Style>
Picture is as follows. First picture when IsMouseOver is true:
How can I solve?
Button code is as follows:
<Button Background="Transparent" BorderBrush="Transparent" Style="{DynamicResource LoginButtonStyle}" Click="btnLogin_Click" HorizontalAlignment="Center" VerticalAlignment="Top" Width="180" Grid.Column="1" Grid.Row="4" x:Name="btnLogin" TabIndex="2"/>
You'll need to provide a new ControlTemplate for the Button to get rid of the default look and feel. You can just replace the default Button ControlTemplate with a plain Image control and replace your Style Triggers with ControlTemplate Triggers. Try this:
<Button>
<Button.Template>
<ControlTemplate>
<Image Name="Image" Stretch="None"
Source="pack://application:,,,/AppName;component/Images/Login/oturumac.png" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Image" Property="Source" Value="
pack://application:,,,/AppName;component/Images/Login/oturumac_rollover.png" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>

WPF: IsMouseOver trigger not working for datatemplate

I'm trying to get the IsMouseOver trigger working for datatemplate. For some reason it is not firing. I also tried the http://www.wpfmentor.com/2009/01/how-to-debug-triggers-using-trigger.html but I do not see anything in the trace. Here is the code:
XAML:
<Window x:Class="FirstSImpleDataApp.Window4"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window4" Height="300" Width="300">
<Window.Resources>
<ResourceDictionary>
<DataTemplate x:Key="tmptemplate">
<Border x:Name="brd" BorderBrush="Black" BorderThickness="2">
<TextBlock x:Name="txt">my text box</TextBlock>
</Border>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="txt" Property="Background" Value="Red"></Setter>
<Setter TargetName="txt" Property="Foreground" Value="Green"></Setter>
<Setter TargetName="brd" Property="Background" Value="Green"></Setter>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ResourceDictionary>
</Window.Resources>
<Canvas x:Name="can" Loaded="can_Loaded">
</Canvas>
</Window>
Code behind:
public partial class Window4 : Window
{
public Window4()
{
InitializeComponent();
}
private void can_Loaded(object sender, RoutedEventArgs e)
{
var tmp = this.TryFindResource("tmptemplate") as DataTemplate;
var obj = (FrameworkElement)tmp.LoadContent();
can.Children.Add(obj);
}
}
Any help is appreciated!
Your triggers actually work just fine. The problem is with how you're instantiating the template and adding it to your Canvas programmatically.
Apply the template directly in your Xaml to see it work:
<Canvas x:Name="can">
<ContentControl ContentTemplate="{StaticResource tmptemplate}" />
</Canvas>
If you want to apply it programmatically, apply the template to a ContentControl or ContentPresenter and drop it in the Canvas instead:
private void can_Loaded(object sender, RoutedEventArgs e)
{
var tmp = this.TryFindResource("tmptemplate") as DataTemplate;
can.Children.Add(new ContentPresenter { ContentTemplate = tmp });
}
Here is an alternative using Style triggers. The border remains black, but with a green margin from the TextBlock.
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
<Setter Property="Foreground" Value="Green"/>
<Setter Property="Margin" Value="2"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="My Text Block"/>
</Border>

How to change the background of tabitem by using trigger in xaml?

Here is my Xaml code
<Window.Resources>
<Style x:Key="SimpleTabControl" TargetType="{x:Type TabItem}">
<!--<Setter Property = "TabStripPlacement" Value = "Top"/>-->
<Setter Property = "Background" Value= "Gray"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="Width" Value="200"/>
<Setter Property="Height" Value="40"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="IsSelected" Value="False"/>
<Setter Property="Margin" Value="3,0"/>
<Style.Triggers>
<Trigger Property="TabItem.IsMouseOver" Value="true">
<Setter Property="Background" Value="LightGreen"></Setter>
</Trigger>
</Style.Triggers>
</Style>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type TabPanel}">
<Setter Property="Background" Value="LightGreen"></Setter>
</Style>
</Window.Resources>
<Grid Background="White" Height="1000" Width="auto" IsEnabled="True">
<TabControl Name="MainTab" Background="LightGray" SelectionChanged="MainTab_SelectionChanged">
<TabControl.Resources>
<Style TargetType="{x:Type TabPanel}">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Background" Value="White"/>
</Style>
</TabControl.Resources>
<TabItem Header="Input" x:Name="tabAlert1" Style="{StaticResource SimpleTabControl}" MouseEnter="TabItem_Enter" MouseLeave="TabItem_Leave" MouseDoubleClick="TabItem_Click" >
<!--<TabItem.Header>
<Border Padding="0,0">
<StackPanel Orientation="Horizontal" Background="Gray" HorizontalAlignment="Left" Width="200" Height="40" Margin="0,0">
<TextBlock Text="Input" Foreground="White" FontSize="15" TextAlignment="Right"/>
</StackPanel>
</Border>
</TabItem.Header>-->
<Label Content="Content goes here..." />
</TabItem>
<TabItem Header="Analysis" x:Name="tabAlert2" Style="{StaticResource SimpleTabControl}" />
<TabItem Header="Action???" x:Name="tabAlert3" Style="{StaticResource SimpleTabControl}"/>
</TabControl>
</Grid>
I don't know for some reason the trigger for isMouseOver is not triggering the back ground color change Change for Tab Item.
I have also tried the c# , code behind way , but with no success, but if change the foreground property, it works, but not he Background property.
Here is my C# Way
private void TabItem_Enter(object sender, System.Windows.Input.MouseEventArgs e)
{
//var tabItem = sender as TabItem;
//tabAlert2.Background = Brushes.Red;
//tabItem.Background = Brushes.Green;
var tabItem = sender as TabItem;
tabItem.Background = new SolidColorBrush(Colors.Gray);
}
I have Bound the mouse enter event to tab Item.this is very basic but am frustrated this not working?Any help much appreciated.
I'm not sure but I think you want to change the color of the Header?
If so, you can change the header template, try this code and if it works for you, add your other properties.
<Window.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" CornerRadius="4,4,0,0" Margin="2,0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="LightGreen"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="LightBlue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TabControl Name="MainTab">
<TabItem Header="Input" x:Name="tabAlert1"/>
<TabItem Header="Analysis" x:Name="tabAlert2"/>
<TabItem Header="Action???" x:Name="tabAlert3"/>
</TabControl>
</Grid>
(Mouse is over second tab)

Resources