This project has moved. For the latest updates, please go here.

Changing the scroll glyph on repeat buttons inside of controls

Jul 19, 2011 at 6:16 PM

Greetings!

I am working on a pre-existing program where most of the controls have a specified style. Part of this style is that other repeat buttons in the program use the aero scroll glyphs.  I turned to your great Extended Toolkit to use the IntegerUpDown and DateTimePicker controls to get rid of some WindowsFormsHost controls that were causing memory leaks.  I really love these controls. 

I just want to be able to change the scroll glyphs of the repeat buttons, and I'm not entirely sure how I need to go about doing this.  I assume that since each button of increase and decrease needs its own scroll glyph that a global style is not my solution.  Can you offer any help?

Thanks!

Jul 19, 2011 at 6:32 PM

Yes, you can use a global style that targets the ButtonSpinner so every control that uses the ButtonSpinner will get your custom style.  This should get you started.

    <Window.Resources>
        <!-- =============================================================================== -->
        <!-- ButtonSpinner                                                                   -->
        <!-- =============================================================================== -->

        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

        <DataTemplate x:Key="IncreaseGlyph">
            <!-- Custom Up -->
            <TextBlock Text="Up" VerticalAlignment="Center" HorizontalAlignment="Center" />
        </DataTemplate>

        <DataTemplate x:Key="DecreaseGlyph">
            <!-- Custom Down -->
            <TextBlock Text="Down"  VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </DataTemplate>

        <Style TargetType="{x:Type extToolkit:ButtonSpinner}">
            <Setter Property="Focusable" Value="False" />
            <Setter Property="IsTabStop" Value="True" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9" Offset="0" />
                        <GradientStop Color="#FF8399A9" Offset="0.375" />
                        <GradientStop Color="#FF718597" Offset="0.375" />
                        <GradientStop Color="#FF617584" Offset="1" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type extToolkit:ButtonSpinner}">
                        <Grid>
                            <Border x:Name="ElementContainer" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                                <DockPanel Focusable="False">
                                    <Grid DockPanel.Dock="Right" Visibility="{TemplateBinding ShowButtonSpinner, Converter={StaticResource BooleanToVisibilityConverter}}">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="1" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <RepeatButton x:Name="IncreaseButton" SnapsToDevicePixels="True" Grid.Row="0" ClickMode="Press" IsTabStop="{Binding IsTabStop, RelativeSource={RelativeSource TemplatedParent}}">
                                            <RepeatButton.Template>
                                                <ControlTemplate TargetType="RepeatButton">
                                                    <ContentPresenter />
                                                </ControlTemplate>
                                            </RepeatButton.Template>
                                            <Grid>
                                                <extToolkitChromes:ButtonChrome CornerRadius="0"
                                                                 RenderEnabled="{TemplateBinding IsEnabled}"
                                                                 RenderMouseOver="{Binding IsMouseOver, ElementName=IncreaseButton}"
                                                                 RenderPressed="{Binding IsPressed, ElementName=IncreaseButton}"/>
                                                <ContentControl ContentTemplate="{StaticResource IncreaseGlyph}" Margin="5,1" Focusable="False" />
                                            </Grid>
                                        </RepeatButton>
                                        <RepeatButton x:Name="DecreaseButton" SnapsToDevicePixels="True" Grid.Row="2" ClickMode="Press" IsTabStop="{Binding IsTabStop, RelativeSource={RelativeSource TemplatedParent}}" >
                                            <RepeatButton.Template>
                                                <ControlTemplate TargetType="RepeatButton">
                                                    <ContentPresenter />
                                                </ControlTemplate>
                                            </RepeatButton.Template>
                                            <Grid>
                                                <extToolkitChromes:ButtonChrome CornerRadius="0"
                                                                 RenderEnabled="{TemplateBinding IsEnabled}"
                                                                 RenderMouseOver="{Binding IsMouseOver, ElementName=DecreaseButton}"
                                                                 RenderPressed="{Binding IsPressed, ElementName=DecreaseButton}"/>
                                                <ContentControl ContentTemplate="{StaticResource DecreaseGlyph}" Margin="5,1" Focusable="False" />
                                            </Grid>
                                        </RepeatButton>
                                    </Grid>
                                    <ContentControl x:Name="presentationSite" Focusable="False"
                                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                                Content="{TemplateBinding Content}" />
                                </DockPanel>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
Jul 19, 2011 at 6:33 PM

Oh, be sure to add these namespace declarations:

xmlns:extToolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended"
xmlns:extToolkitChromes="clr-namespace:Microsoft.Windows.Controls.Chromes;assembly=WPFToolkit.Extended"
Jul 19, 2011 at 6:35 PM

Wow, that was prompt! Thanks for the quick reply.

Ah, I see I need to target the ButtonSpinner itself. Not quite as easy as simple as I had hoped, but it will do.

Jul 19, 2011 at 6:36 PM

Yeah, I have been meaning to add properties for the button styles; IncreaseButtonStyle and DecreaseButtonStyle.  I just haven't got around to it yet.