WPF how to make button icon spin only when mouse over - wpf

I am using mahapps iconpacks and I come across this method "spin" but I have no idea how to bind it to a mouse over event
<Button x:Name="btnRefresh"
Content="{iconPacks:PackIconMaterial Kind=Refresh, Spin=True}">
I want the icon to spin only when the mouse cursor is over the button and stop from spinning when it's not. Thanks.

If anyone looks for an answer:
<Button x:Name="btnRefreshSpin"
Style="{DynamicResource MetroCircleButtonStyle}">
<iconPacks:PackIconModern Kind="Refresh" Spin="{Binding Spin}" />
</Button>
and Spin is a simple method from the view model which returns true or false. A mouse over event can be linked to the same property

Related

Button/Image Switch resource using click, MouseEnter and MouseLeave

I'm trying to change an image using events like Click, MouseEnter and MouseLeave. In first place I tried to do it with Buttons in order to have "Click" event too, but I don't know how to remove that lightblue background that appears by default when I put the mouse over the button with a png background.
After this, I tried to use , setting the resource image.png in its Source.
The main problem is that I don't know what to do in code-behind to change between Image Resources in order to change the Source of the control.
I want to know too if I can use a "Click Event" with an control
Update1:
Ok, I tried it by using Binding
For now I think its solved, but I have another problem.
I don't know exactly how to remove that "border". I tried to put the borderbrush property of the buttons to 0, but it seems to be another property or another control.
UI
Thanks.
You can put an image as the content of a button, and add an Click event to that Button. This way, an event gets called when you press the button.
<Button Margin="0,10" Name="mainButton" Click="mainButton_Click">
<Button.Content>
<Image Source="C:/reference-to-image" Height="30"/>
</Button.Content>
</Button>
In the background you can than change the Picture.
This question shows how to do that in the background.
WPF Image UriSource and Data Binding using http:\\ URL
PS. If you want to change the behavior of controls on certain events things like pressing the left mouse button on it, you have to overwrite the event triggers using
<Style TargetType="TextBlock">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
...
Hope this helps.
UPDATE
You can set the BorderThickness to 0 and than set the Value of the Padding Property to 0. The Button Control has a predefined padding value, which makes it look like it has a border.
Padding is the space inside the control and the content e.g the space between the button and the picture
<StackPanel Orientation="Horizontal">
<Button Click="Button_Click" Padding="0" BorderThickness="0">
<Image Source="link-to-pic" Height="100"/>
</Button>
<Button Click="Button_Click" Padding="0" BorderThickness="0">
<Image Source="link-to-pic" Height="100"/>
</Button>
</StackPanel>

WPF, what kind of controls will handle MouseLeftButtonDown event?

I have a DataGridControl,and its cell's DataTemplate overwritten to TextBoxs,by clicking outside the cells but still on the DataGrid, I want the TextBox to lose Keyboard focus so that it can Commit the change, but it seems the DataGrid won't handle the MouseLeftButtonDown event, so I have to manually add a handler to the Grid,and in the handler:
e.Handled = true;
Keyboard.Focus( sender as UIElement );
to make the parent panel "focusable".
By using Snoop, I notice that controls like TextBox, Button are capable of handle MosueLeftButtonDown event, while Panels are not,event if set "Focusable" property to "True". Does anyone know the reason behind this, Thanks.
To simplify the situation: suppose we have a TextBox and a Button on a Grid:
<Grid Background="AliceBlue">
<TextBox Height="25" Margin="50" Text="abcd"/>
<Button Height="25" Margin="50,100,50,0"></Button>
</Grid>
when I click on the TextBox, it gets KeyBoard focus, when I click the blank area of the Grid, I want the TextBox to lose focus, the problem is Grid is not focusable compared with TextBoxes and Buttons.
The documentation for Panel shows that Panel can handle mouse events:
https://msdn.microsoft.com/en-us/library/system.windows.controls.panel_events(v=vs.110).aspx

Prevent taps from passing through buttons in XAML/WPF

In my project, I have a large container with a handler for taps. Inside this container, I also have a button. My goal is to handle all taps on the background container UNLESS the user clicks on the button. Unfortunately, when I click on the button, it fires both the click handler on the button AND the tap handler for the container.
Here's some example XAML:
<Grid Width="250" Height="250" Fill="Red" Tapped="Container_Tapped">
<Button Click="Button_Clicked">
<Rectangle Width="20" Height="20" Fill="Blue" />
</Button>
</Grid>
Is there a way to handle the tap event on the button to prevent it from bubbling to the container? Any other ideas?
In your Container_Tapped event handler you could check the RoutedEventArgs.OriginalSource Property. If e.OriginalSource is a descendant of your button do nothing.
For that Visual.IsDescendantOf Method could be helpful.
Here's a dynamic way to do it in Win RT, without needing to know the exact name of the button (useful if you have a pile of buttons to work with, such as when databinding!)
' Verify that the sender is not a button (or one of its children)
If Not e.OriginalSource.Equals(sender) Then
Dim parentObj = VisualTreeHelper.GetParent(e.OriginalSource)
Do While Not parentObj.Equals(sender)
If TypeOf parentObj Is Button Then Return
parentObj = VisualTreeHelper.GetParent(parentObj)
Loop
End If

Embedded ComboBox in Button, but Button steals click event when activating drop down

I have an application with limited screen space, so I'm trying to conserve some real estate by putting a combo box within a button. Its pretty nifty and it looks exactly like what I wanted it to look like. The problem is, every time I click the down arrow on the combo box, the Button also receives a click event. The drop down menu still works properly, but my button has already fired before I've had a chance to actually select what I wanted.
Here is my WPF code that describes my Button and its contents.
<Button FontSize="14" Height="32" HorizontalAlignment="Left" Click="DisableCopierButton_Click">
<StackPanel Orientation="Horizontal">
<Label Content="Disable Copier:" />
<ComboBox Name="DisableCopierComboBox">
<ComboBoxItem Content="1"/>
<ComboBoxItem Content="2"/>
</ComboBox>
</StackPanel>
</Button>
My question is, when I'm clicking on the ComboBox and only the ComboBox, how do I prevent the click event from passing through the button that is underneath it?
I finally found it. I went with the solution provided by Rachel here, even though it was not selected as the answer.
private void EnableCopierButton_Click(object sender, RoutedEventArgs e)
{
if (!(e.OriginalSource is Button))
{
// combo box was clicked, not the button, so get out of here.
return;
}
}
This seems like a SplitButton, yeah. Don't reinvent the wheel. Plenty of implementations on the web.
I recommend WPF Toolkit Extended's.
Rather than making the combo box be part of the button's Content, you may want to try creating a ContentTemplate for the button that includes a combo box.

Why does WPF toggle button pulse once unchecked

Within a Desktop app I have a toggle button:
<ToggleButton x:Name="CFStglBtn" Checked="cfsCBox_Checked"
Unchecked="cfsCBox_Unchecked"
IsChecked="True" HorizontalAlignment="Left" Margin="5,0,0,0">
<StackPanel Orientation="Horizontal">
<Image Source="assets\telephone.png" Margin="3,0,0,0" />
<TextBlock Text="CFS" FontSize="10" Margin="5,5,5,0"
Foreground="DarkSlateGray"/>
</StackPanel>
</ToggleButton>
For the Checked event I am setting a value and then executing a method FilterView();
//ommitting code
Unchecked state is just the opposite. resets a variable and executed the method again
The question I have is I noticed when I uncheck the toggle button the button continues to pulse or flash ( going from blue to chrome) as if it still has focus. The button will stay like this until another button is clicked.
Is there a way to remove this focus so that when the button is unchecked the button goes back to a unchecked state without the flashing / pulsing color.
As you can see from above this is a standard toggle button no styles or custom
I tested this on just a regular button and I found the same occured when clicked the button will continue to pulse / flash until another button is clicked.
How do you work around this or prevent this effect from happening.
Thank you
Set the Button Focusable="False".
This is happening because of the button chrome built into the default template for the control. Your only workaround is to re-template the Button. This article should get you started.

Resources