CODEWITHSUNDEEP
c#wpfxaml
Cryrexon
Cryrexon

Reputation: 25

Advanced Button Hover effect in xaml

I'm new at C# and XAML but have experience with Web-Design Languages. Currently I work on my first program, but I have a problem..

In xaml I created my Button:

<Button Margin="10 0 0 0" Click="CloseClick">
    <Button.Template>
        <ControlTemplate>
            <Border Background="{x:Null}" IsHitTestVisible="True">
                <Canvas Width="15" Height="15">
                    <Ellipse HorizontalAlignment="Left" Height="15" Grid.Row="0" Width="15">
                        <Ellipse.Fill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF8C8E8D" Offset="0"/>
                                <GradientStop Color="#FF54545C" Offset="0.987"/>
                            </LinearGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z" Stretch="Uniform" Fill="#FF3D3E50" Width="8" Height="8" Canvas.Top="3.5" Canvas.Left="3.5"/>
                </Canvas>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

enter image description here

And now on the Hover Event, I want to make the other Buttons looks like the Button in the center!

I tried with:

   <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter TargetName="ellipse1" Property="Fill" Value="Orange"/>
    </Trigger>
  </Style.Triggers>

I also tried it with more Code but I dont have it anymore because it doesn't work..

I would be very grateful for help!

Upvotes: 1

Views: 546

Answers (1)

Alexander Bell
Alexander Bell

Reputation: 7918

Your code is missing x:Name="ellipse1" : correct it as shown below, so the Trigger will work (i.e changing the Fill Color to Orange on MouseOver event):

<Button Margin="10 0 0 0" Click="CloseClick">
    <Button.Template>
        <ControlTemplate>
            <Border Background="{x:Null}" IsHitTestVisible="True">
                <Canvas Width="15" Height="15">
                    <Ellipse x:Name="ellipse1" HorizontalAlignment="Left" Height="15" Grid.Row="0" Width="15">
                        <Ellipse.Fill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF8C8E8D" Offset="0"/>
                                <GradientStop Color="#FF54545C" Offset="0.987"/>
                            </LinearGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z" Stretch="Uniform" Fill="#FF3D3E50" Width="8" Height="8" Canvas.Top="3.5" Canvas.Left="3.5"/>
                </Canvas>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="ellipse1" Property="Fill" Value="Orange"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

Upvotes: 1

Related Questions