CODEWITHSUNDEEP
buttoncontroltemplatewinui-3
Tommy
Tommy

Reputation: 188

How can I change the mouse over color of a Button having a control template applied?

Applied this style onto my own user control, which inherits from Button:

<Style
    x:Key="FunctionButtonStyle"
    TargetType="uc:FunctionButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="uc:FunctionButton">
                <RelativePanel
                    x:Name="MyPanel"
                    Background="{TemplateBinding Background}"
                    CornerRadius="{TemplateBinding CornerRadius}">
                    <SymbolIcon
                        Margin="5"
                        RelativePanel.AlignTopWithPanel="True"
                        Symbol="{TemplateBinding Symbol}">
                        <SymbolIcon.RenderTransform>
                            <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.5" ScaleY="0.5" />
                        </SymbolIcon.RenderTransform>
                    </SymbolIcon>
                    <TextBlock
                        Margin="5"
                        FontSize="10"
                        RelativePanel.AlignBottomWithPanel="True"
                        Text="{TemplateBinding Content}" />

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">

                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="MyPanel" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="MyPanel.Background" Value="Black" />
                                    <Setter Target="ContentPresenter.BorderBrush" Value="#323232" />
                                    <Setter Target="ContentPresenter.Foreground" Value="#00B7EB" />
                                </VisualState.Setters>

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="MyPanel" />
                                </Storyboard>

                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </RelativePanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Width" Value="75" />
    <Setter Property="Height" Value="45" />
</Style>

Applied this style onto my user control but the mouse over color not take effect, or the mouse over event never occurs.

Upvotes: 0

Views: 135

Answers (1)

Andrew KeepCoding
Andrew KeepCoding

Reputation: 13296

You need to call:

VisualStateManager.GoToState(this, "PointerOver", useTransitions: true);

on a PointerEntered handler, and

VisualStateManager.GoToState(this, "Normal", useTransitions: true);

on a PointerExited handler.

Upvotes: 1

Related Questions