IsMouseOver behavior
Posted: 03 Nov 2024, 15:52
Hey,
Im trying to get a "hover" effect on my button and cant seem to figure out what the problem is with what im doing..
So I have a button and a control template which should convert the button from a round shape to some rectangluar shape when triggered on "IsMouseOver" trigger:
This is the control template:
This is the usage:
I get very weird behaviour.. i dont get a hover effect without clicking the mouse..
If i hover over the button nothing happens, but if i left click and hold and then hover over the mouse, i get the desired behavior.
I've tested with XamlToy that you have on the site, and it seems as though the code is correct since i get the behavior i expect, so there is probably something wrong with my integration.. could you maybe try and guide me to might cause this?
I would really appreciate your help here :)
Thanks a lot in advance!
Im trying to get a "hover" effect on my button and cant seem to figure out what the problem is with what im doing..
So I have a button and a control template which should convert the button from a round shape to some rectangluar shape when triggered on "IsMouseOver" trigger:
This is the control template:
Code: Select all
<!-- Define reusable ControlTemplate for round buttons -->
<ControlTemplate x:Key="test" TargetType="Button">
<Border x:Name="border" Background="{TemplateBinding Background}" CornerRadius="80" Width="160" Height="160">
<!-- Using ContentPresenter to display button content (TextBlock) -->
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<!-- Triggers to change background color and content visibility on Button events -->
<ControlTemplate.Triggers>
<!-- Change background color when button is pressed -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="Width" Value="470"/>
<Setter TargetName="border" Property="Height" Value="160"/>
<Setter TargetName="border" Property="CornerRadius" Value="80"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>Code: Select all
<Button Height="Auto" Width="Auto" Canvas.Left="1600" Canvas.Top="800" Background="#4DEBD7F8" Template="{StaticResource test}">
<Image Source="/ScreenResources_HomeScreen;component/logo.jpeg" Width="160" Height="160"/>
</Button>
If i hover over the button nothing happens, but if i left click and hold and then hover over the mouse, i get the desired behavior.
I've tested with XamlToy that you have on the site, and it seems as though the code is correct since i get the behavior i expect, so there is probably something wrong with my integration.. could you maybe try and guide me to might cause this?
I would really appreciate your help here :)
Thanks a lot in advance!