Search code examples
wpfxceed

IntegerUpDown Style Up/down buttons

I am trying to style a integerupdown(Xceed framework) control and my wpf knowledge in lacking. So far I have gotten it styled for everything but the OnMouseOver which still looks like a "normal" button mouseover.

How can I set the style on mouseover? Remove the blue automatic background.

MouseOverLooksUgly

    <UserControl.Resources>
    <Style x:Key="{x:Static theme:ResourceKeys.SpinnerButtonStyleKey}" TargetType="RepeatButton">
        <Setter Property="Foreground" Value="#fff" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Background" Value="#555555"></Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Red"></Setter>
                <Setter Property="Background" Value="Black"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style TargetType="{x:Type xctk:IntegerUpDown}">
        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static theme:ResourceKeys.GlyphNormalForegroundKey}"  Color="#e9e9ee"/>
        </Style.Resources>
    </Style>
</UserControl.Resources>
Solution

  • You should define a custom RepeatButton style for the themes:ResourceKeys.SpinnerButtonStyleKey resource:

    <xctk:IntegerUpDown
            xmlns:themes="clr-namespace:Xceed.Wpf.Toolkit.Themes;assembly=Xceed.Wpf.Toolkit"
            xmlns:chrome="clr-namespace:Xceed.Wpf.Toolkit.Chromes;assembly=Xceed.Wpf.Toolkit">
    <xctk:IntegerUpDown.Resources>
        <Style x:Key="{x:Static themes:ResourceKeys.SpinnerButtonStyleKey}" 
                       TargetType="RepeatButton">
            <Setter Property="Background" Value="{DynamicResource {x:Static themes:ResourceKeys.ButtonNormalBackgroundKey}}" />
            <Setter Property="BorderBrush" Value="{DynamicResource {x:Static themes:ResourceKeys.ButtonNormalOuterBorderKey}}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Padding" Value="2,2" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Grid>
                            <chrome:ButtonChrome x:Name="Chrome"
                                       BorderBrush="{TemplateBinding BorderBrush}" 
                                       Background="{TemplateBinding Background}"                                                                  
                                       CornerRadius="{DynamicResource {x:Static themes:ResourceKeys.SpinButtonCornerRadiusKey}}"
                                       RenderEnabled="{TemplateBinding IsEnabled}"
                                       RenderMouseOver="False"
                                       RenderNormal="True"
                                       RenderPressed="{TemplateBinding IsPressed}"
                                       SnapsToDevicePixels="true" />
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                      Margin="{TemplateBinding Padding}" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="Red" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </xctk:IntegerUpDown.Resources>
</xctk:IntegerUpDown>