"MouseOver" in Labels and Buttons in Xaml - c#

I am very new to Xaml but I have been taking advantage of the WPF for a while. For that reason I have made the below method which I use to change the image of a label or button anytime I wanna implement a mouse over or mouse leave event.
public void SImpleImageHadler(dynamic thing, String Path) {
ImageBrush IB = new ImageBrush();
IB.ImageSource = new BitmapImage(new Uri("pack://application:,,,/" + Path, UriKind.Absolute));
thing.Background = IB;
}
I would like to know how I can do this purely using xaml so that I wouldn't have to make a lot of event handlers for each of my UI elements.

In the style triggers for your button you can put this type of code to change properties. To see a image specific example check out this question.
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Blue" />
</Trigger>
</Style.Triggers>
And from this answer is an image example:
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/MyProjectName;component/Images/MyImage.jpg" />
</Setter.Value>
</Setter>
</Trigger>

You should look into attached properties if you want to encapsulate such stuff for many different types of Buttons/Labels.
The final result should look like this:
<Button
ns2:MouseOverBackgroundChanger="YourURL"
/>
<Label
ns2:MouseOverBackgroundChanger="YourUrl2"
/>
This site has everything you need: http://msdn.microsoft.com/en-us/library/ms749011(v=vs.110).aspx (Attached Properties Overview)

Related

Give a toggle button the color "#FF5D0000" in the main window

I want to give mij text on my button a customized color in the MainWindow.xaml.cs
Normally you give the color in the cs file by this way to the command:
ToggleButton.Foreground = Brushes.Green;
But I want to give the hexnumber
I've already tried something like this :
SolidColorBrush Owncolor = (SolidColorBrush)(new BrushConverter().ConvertFrom("#FF5D0000"));
ToggleButton.Foreground = Brushes.Owncolor;
Instead of doing it in code behind (unless you have a very specific reason to do that), you can work on your xaml
<ToggleButton Foreground = "#FF5D0000"/>
if you are doing it based on some condition, also please take a look at this. It's always a better practice to handle graphical stuff in your xaml as much as you can
for instance you can do
<ToggleButton>
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Foreground" Value="Green"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
Usually in WPF you tend to use styles defined in XAML to change how controls looks. However, using the BrushConverter works if you absolutely have to use the hexadecimal syntax in codebehind. I'd consider building a new SolidColorBrush with Color.FromArgb easier, but that also works.
As for how to use styles and XAML properly, you should probably read some tutorials or books. WPF is quite a different beast than Windows Forms or a lot of older UI frameworks, so there's some re-learning required.
The simplest way of achieving what you want (a different text colour when the button is pressed) would be the following style:
<Style TargetType="ToggleButton">
<Setter Property="Foreground" Value="#FF5D0000"/>
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
When placed in the Resources of your Window it would apply to all ToggleButtons in that window.

How to change the image source inside controltemplate?

I have template in my MyResourceDictionary.xaml file like this
<ControlTemplate TargetType="{x:Type Button}" x:Key="ImageButtonTemplatepurpleSmall" >
<Grid>
<Image Source="images\button_purple_up_76.jpg" Name="image" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="image" Property="Source" Value="images\button_purple_hover_76.jpg" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="image" Property="Source" Value="images\button_purple_depressed_76.jpg" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Which is for applying image to button now
I just want to change this image source of this image inside grid like this
This is what i have tried
Image RecTangleObj = (Image)btnBack.Template.FindName("image", btnBack);
but some how it's always returns null value how can i change the image source of this one ?
updated
public override void OnApplyTemplate()
{
//base.OnApplyTemplate();
//Image RecTangleObj = (Image)btnBack.Template.FindName("image", btnBack);
//if (RecTangleObj != null)
//{
//}
}
OnApplyTemplate of window gets called when no child content is rendered on screen.
Place this code in Loaded event and it will work fine.

problem in the textblock style

Hello I am trying to make a textblock that they should focus on the event to underline the text and add when you lose the focus off him.
this is possible?
While I'm not sure if this is supported in Silverlight, this is how you'd do it in WPF:
<xxx.Resources>
<Style x:Key="HoverUnderline" TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="TextDecorations" Value="Underline"/>
</Trigger>
</Style.Triggers>
</Style>
...
<TextBlock Style="{StaticResource HoverUnderline}"
Content="Point at me to underline."/>
(Another interpretation of your question: use IsFocused instead of IsMouseOver. That's a weirder interpretation though since normally text blocks can't receive focus.)

Changed Background Color of Element when Disabled

How would I change the background color of a TextBox Control in the Default Style Xaml to be a different color when the control is either Disabled or ReadOnly ?
You can achieve this with triggers in the style:
<TextBox>
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="Green" />
</Trigger>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
Im not at a PC at the moment (just mobile) but I think you can edit the template of your control and there are some Visual States for your some controls that define things like disabled states, mouse overs, etc... which you should be able to redefine?
The way I accomplished this was to create a Converter for the control.
When the control is bound to an object it detects if the control is Enabled from this object that it is bound to. Based upon this it sets the background color for the Textbox accordingly.

How to change the button color onmoveover,onmouseleave in wpf by using triggers or any other events

I have developed a WPF Application with some buttons. Now i want to change the color of those buttons onmouseover,onmouseleave,onmouseenter by using triggers or any other events.
Any suggestion plz
Thanks in advance.
Inside the desired event, you can set the background color like this...
// Change the background color of button1 to Blue
button1.Background = Brushes.Blue;
You can also set this in a trigger:
<!-- Button will change from Blue to Yellow on MouseOver -->
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Blue" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Yellow" />
</Trigger>
</Style.Triggers>
</Style>
For even more details, check out the Property Triggers section of this article.

Categories