This is a migrated thread and some comments may be shown as answers.

Problem with RadButton after updating to 2012 Q3 SP1

2 Answers 46 Views
Buttons
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
Sam asked on 04 Dec 2012, 07:58 AM
Hi, I'm experiencing a really unusual problem with the RadButton control after updating to 2012 Q3 SP1 - things were working fine before.

My scenario is this:

- I've subclassed RadButton with my own custom Button class, to add dependency properties for FocusVisual and MouseOverVisual:

public class Button : RadButton
{
    #region Fields
    public static readonly DependencyProperty FocusStyleProperty =
        DependencyProperty.Register("FocusStyle", typeof(Style), typeof(Button), null);
 
    public static readonly DependencyProperty MouseOverStyleProperty =
        DependencyProperty.Register("MouseOverStyle", typeof(Style), typeof(Button), null);
    #endregion
 
    #region Properties
    /// <summary>
    /// Gets or sets the style of the focus visual, which is a <see cref="Border" />.
    /// </summary>
    public Style FocusStyle
    {
        get { return (Style)GetValue(FocusStyleProperty); }
        set { SetValue(FocusStyleProperty, value); }
    }
 
    /// <summary>
    /// Gets or sets the style of the hover visual, which is a <see cref="Border" />.
    /// </summary>
    public Style MouseOverStyle
    {
        get { return (Style)GetValue(MouseOverStyleProperty); }
        set { SetValue(MouseOverStyleProperty, value); }
    }
    #endregion       
}

- I've then redone the control template as follows:

<Style x:Key="DefaultButtonMouseOverBorder" TargetType="Border">
    <Setter Property="Background" Value="{StaticResource LineColorBrush}" />
    <Setter Property="BorderThickness" Value="0" />
</Style>
 
<Style x:Key="DefaultButtonFocusBorder" TargetType="Border">
    <Setter Property="BorderBrush" Value="White" />
    <Setter Property="BorderThickness" Value="1" />
</Style>
 
<!-- RadButton (via custom Button) -->
<Style TargetType="controls:Button" x:Key="DefaultRadButtonStyle">
    <Setter Property="MouseOverStyle" Value="{StaticResource DefaultButtonMouseOverBorder}" />
    <Setter Property="FocusStyle" Value="{StaticResource DefaultButtonFocusBorder}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
 
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Opacity" To="1" />
                                </Storyboard>
                            </VisualState>
 
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Opacity" To="1" />
 
                                    <DoubleAnimation
                                        To="-1" Duration="0" Storyboard.TargetName="Content"
                                        Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" />
                                </Storyboard>
                            </VisualState>
 
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" To="0.5" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
 
                        <VisualStateGroup x:Name="FocusStatesGroup">
                            <VisualState x:Name="Unfocused">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" Duration="0" To="0" />
                                </Storyboard>
                            </VisualState>
 
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
 
                        <VisualStateGroup x:Name="BackgroundVisibility">
                            <VisualState x:Name="BackgroundHidden">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="Border" Storyboard.TargetProperty="Opacity" To="0" />
                                </Storyboard>
                            </VisualState>
 
                            <VisualState x:Name="BackgroundVisible" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
 
                    <Border
                        x:Name="Border"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        CornerRadius="{TemplateBinding CornerRadius}"
                        Background="{TemplateBinding Background}" />
 
                    <!-- MouseOver -->
                    <Border x:Name="MouseOverVisual" Opacity="0" Style="{TemplateBinding MouseOverStyle}" />
 
                    <!-- Focus -->
                    <Border x:Name="FocusVisual" Opacity="0" Style="{TemplateBinding FocusStyle}" />
 
                    <ContentPresenter
                        x:Name="Content"
                        Margin="{TemplateBinding Padding}"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
 
                        <ContentPresenter.RenderTransform>
                            <TranslateTransform />
                        </ContentPresenter.RenderTransform>
                    </ContentPresenter>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This is so that I can restyle the focus and hover states without re-templating again.

This approach was working with the previous release of the Telerik controls, but after upgrading, suddenly my focus / hover states do not show up anymore. It seems as if the Style on the borders is just not being applied - if I hardcode a setting like BorderBrush into the focus or hover borders then it works fine, but obviously this is not a solution!

Also I'm using this approach on some of the other controls (RadDropDownButton) and it still works fine.

Can you please provide some assistance as to why my styles are no longer working for the RadButton control?

Thanks!

Sam

2 Answers, 1 is accepted

Sort by
0
Sam
Top achievements
Rank 1
answered on 04 Dec 2012, 10:41 PM
I've tried to reproduce this problem in a sample project, but I can't, unfortunately - it works fine!

It must have something to do with the environment the code is operating in. I'll keep experimenting, but if you have any ideas that might help, I'm really keen to hear them!
0
Sam
Top achievements
Rank 1
answered on 05 Dec 2012, 12:13 AM
Aaargh, never mind, I found the problem - simple copy and paste error elsewhere in the code. Please ignore this post!
Tags
Buttons
Asked by
Sam
Top achievements
Rank 1
Answers by
Sam
Top achievements
Rank 1
Share this question
or