I'm having issues with the styling of the RadButtons in the Silverlight 2011.2 712 release. When I set the IsBackgroundVisible property to false in the xaml, the buttons all render with the default background on them. When you hover over with the mouse and then remove it, the background is now not visible, as desired.
Is there any way to stop the Buttons from being initially rendered with the background visible?
Is there any way to stop the Buttons from being initially rendered with the background visible?
7 Answers, 1 is accepted
0
Hi Ryan,
Could you please give us some code snippets or a project that reproduces this issue, because I wasn't able to recreate it? I've attached the sample project that I used for testing so you could examine it.
All the best,
Zarko
the Telerik team
Could you please give us some code snippets or a project that reproduces this issue, because I wasn't able to recreate it? I've attached the sample project that I used for testing so you could examine it.
All the best,
Zarko
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
Mike Shilkov
Top achievements
Rank 1
answered on 21 Jul 2011, 03:01 PM
I'm experiencing exactly the same issue in my application, but I couldn't isolate it into smaller sample application so far...
Have a look at my screen. The buttons are on the left. The lower two were hovered, while the others were intact... and they look different (the lower are correct).
Have a look at my screen. The buttons are on the left. The lower two were hovered, while the others were intact... and they look different (the lower are correct).
0
Mike Shilkov
Top achievements
Rank 1
answered on 25 Jul 2011, 07:42 AM
I've made a small sample to reproduce the error. Unfortunately, my colleague with active support account is on vacation, so I can't open the support ticket directly. Is there any other way I can send you the zip file?
0
Rob
Top achievements
Rank 1
answered on 25 Jul 2011, 04:43 PM
I believe I have replicated this issue with a small project... Notice that the bars (actually RadDropDownButtons with ButtonChrome objects inside) are white until you hover them once...
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Net;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Documents;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Windows.Shapes;
using
System.ComponentModel;
using
System.Collections.ObjectModel;
namespace
SilverlightApplication55
{
public
partial
class
MainPage : UserControl
{
public
MainPage()
{
InitializeComponent();
ObservableCollection<MyDataObject> TheList =
new
ObservableCollection<MyDataObject>()
{
new
MyDataObject() { Height = 100, Width = 20, Background =
new
SolidColorBrush(Colors.Purple) },
new
MyDataObject() { Height = 200, Width = 20, Background =
new
SolidColorBrush(Colors.Orange) },
new
MyDataObject() { Height = 300, Width = 20, Background =
new
SolidColorBrush(Colors.Green) },
new
MyDataObject() { Height = 400, Width = 20, Background =
new
SolidColorBrush(Colors.Blue) }
};
this
.ic.ItemsSource = TheList;
}
}
public
class
MyDataObject : INotifyPropertyChanged
{
private
int
_Height = 0;
public
int
Height
{
get
{
return
this
._Height;
}
set
{
this
._Height = value;
RaisePropertyChanged(
"Height"
);
}
}
private
int
_Width = 0;
public
int
Width
{
get
{
return
this
._Width;
}
set
{
this
._Width = value;
RaisePropertyChanged(
"Width"
);
}
}
private
Brush _Background =
new
SolidColorBrush(Colors.Transparent);
public
Brush Background
{
get
{
return
this
._Background;
}
set
{
this
._Background = value;
RaisePropertyChanged(
"Background"
);
}
}
private
bool
_IsBackgroundVisible =
false
;
public
bool
IsBackgroundVisible
{
get
{
return
this
._IsBackgroundVisible;
}
set
{
this
._IsBackgroundVisible = value;
RaisePropertyChanged(
"IsBackgroundVisible"
);
}
}
public
event
PropertyChangedEventHandler PropertyChanged;
protected
void
RaisePropertyChanged(
string
propertyName)
{
PropertyChangedEventHandler propertyChanged =
this
.PropertyChanged;
if
((propertyChanged !=
null
))
{
propertyChanged(
this
,
new
PropertyChangedEventArgs(propertyName));
}
}
}
}
<
UserControl
x:Class
=
"SilverlightApplication55.MainPage"
mc:Ignorable
=
"d"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
xmlns:Telerik_Windows_Controls_Chromes
=
"clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
d:DesignHeight
=
"300"
d:DesignWidth
=
"400"
>
<
Grid
x:Name
=
"LayoutRoot"
Background
=
"Pink"
>
<
ItemsControl
x:Name
=
"ic"
>
<
ItemsControl.ItemsPanel
>
<
ItemsPanelTemplate
>
<
StackPanel
Orientation
=
"Horizontal"
/>
</
ItemsPanelTemplate
>
</
ItemsControl.ItemsPanel
>
<
ItemsControl.ItemTemplate
>
<
DataTemplate
>
<
telerik:RadDropDownButton
x:Name
=
"rddbToolTip"
Background
=
"{Binding Background}"
DropDownWidth
=
"520"
DropDownHeight
=
"320"
Height
=
"{Binding Height}"
Width
=
"{Binding Width}"
Margin
=
"20"
>
<
telerik:RadDropDownButton.Style
>
<
Style
TargetType
=
"telerik:RadDropDownButton"
>
<
Setter
Property
=
"IsOpen"
Value
=
"false"
/>
<
Setter
Property
=
"DropDownPlacement"
Value
=
"Absolute"
/>
<
Setter
Property
=
"BorderThickness"
Value
=
"0,0,0,1"
/>
<
Setter
Property
=
"BorderBrush"
Value
=
"#DDFFFFFF"
/>
<
Setter
Property
=
"Background"
Value
=
"Transparent"
/>
<
Setter
Property
=
"Foreground"
Value
=
"#FF000000"
/>
<
Setter
Property
=
"HorizontalContentAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"VerticalContentAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"Padding"
Value
=
"0"
/>
<
Setter
Property
=
"CornerRadius"
Value
=
"0"
/>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"telerik:RadDropDownButton"
>
<
Grid
Background
=
"Transparent"
Cursor
=
"Hand"
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"CommonStates"
>
<
VisualState
x:Name
=
"Normal"
/>
<
VisualState
x:Name
=
"Disabled"
/>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"IsOpenState"
>
<
VisualState
x:Name
=
"Closed"
/>
<
VisualState
x:Name
=
"Opened"
/>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"DropDownButtonPosition"
>
<
VisualState
x:Name
=
"DropDownButtonAtLeft"
/>
<
VisualState
x:Name
=
"DropDownButtonAtTop"
/>
<
VisualState
x:Name
=
"DropDownButtonAtRight"
/>
<
VisualState
x:Name
=
"DropDownButtonAtBottom"
/>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"PopupPlacementState"
>
<
VisualState
x:Name
=
"PlacementBottom"
/>
<
VisualState
x:Name
=
"PlacementTop"
/>
<
VisualState
x:Name
=
"PlacementLeft"
/>
<
VisualState
x:Name
=
"PlacementRight"
/>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"1*"
/>
</
Grid.RowDefinitions
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"1*"
/>
</
Grid.ColumnDefinitions
>
<
Telerik_Windows_Controls_Chromes:ButtonChrome
x:Name
=
"ButtonChrome"
Background
=
"{TemplateBinding Background}"
RenderNormal
=
"{TemplateBinding IsBackgroundVisible}"
RenderMouseOver
=
"{TemplateBinding IsMouseOver}"
RenderPressed
=
"{TemplateBinding IsPressed}"
RenderChecked
=
"{TemplateBinding IsOpen}"
>
<
Telerik_Windows_Controls_Chromes:ButtonChrome.Style
>
<
Style
TargetType
=
"Telerik_Windows_Controls_Chromes:ButtonChrome"
>
<
Setter
Property
=
"IsTabStop"
Value
=
"False"
/>
<
Setter
Property
=
"Background"
Value
=
"Transparent"
/>
<
Setter
Property
=
"BorderBrush"
Value
=
"Transparent"
/>
<
Setter
Property
=
"BorderThickness"
Value
=
"0"
/>
<
Setter
Property
=
"CornerRadius"
Value
=
"0"
/>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"Telerik_Windows_Controls_Chromes:ButtonChrome"
>
<
Grid
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"CommonStatesGroup"
>
<
VisualStateGroup.Transitions
>
<
VisualTransition
From
=
"Normal"
To
=
"MouseOver"
GeneratedDuration
=
"00:00:00.1"
/>
<
VisualTransition
From
=
"MouseOver"
To
=
"Normal"
GeneratedDuration
=
"00:00:00.25"
/>
<
VisualTransition
From
=
"Pressed"
To
=
"MouseOver"
GeneratedDuration
=
"00:00:00"
/>
<
VisualTransition
From
=
"MouseOver"
To
=
"Pressed"
GeneratedDuration
=
"00:00:00"
/>
</
VisualStateGroup.Transitions
>
<
VisualState
x:Name
=
"None"
>
<
Storyboard
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetName
=
"OuterBorder"
Storyboard.TargetProperty
=
"Opacity"
>
<
LinearDoubleKeyFrame
KeyTime
=
"0:0:0"
Value
=
"0"
/>
</
DoubleAnimationUsingKeyFrames
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetName
=
"AnimatedBorder"
Storyboard.TargetProperty
=
"Opacity"
>
<
LinearDoubleKeyFrame
KeyTime
=
"0:0:0.0"
Value
=
"0"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Normal"
>
<
Storyboard
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetName
=
"AnimatedBorder"
Storyboard.TargetProperty
=
"Opacity"
>
<
DiscreteDoubleKeyFrame
KeyTime
=
"0:0:0"
Value
=
"0"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Active"
/>
<
VisualState
x:Name
=
"Highlighted"
/>
<
VisualState
x:Name
=
"Selected"
/>
<
VisualState
x:Name
=
"Checked"
>
<
Storyboard
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetName
=
"AnimatedBorder"
Storyboard.TargetProperty
=
"Opacity"
>
<
DiscreteDoubleKeyFrame
KeyTime
=
"0:0:0"
Value
=
"0.2"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"DisabledChecked"
/>
<
VisualState
x:Name
=
"MouseOverChecked"
>
<
Storyboard
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetName
=
"AnimatedBorder"
Storyboard.TargetProperty
=
"Opacity"
>
<
DiscreteDoubleKeyFrame
KeyTime
=
"0:0:0"
Value
=
"0.2"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"MouseOver"
>
<
Storyboard
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetName
=
"AnimatedBorder"
Storyboard.TargetProperty
=
"Opacity"
>
<
DiscreteDoubleKeyFrame
KeyTime
=
"0:0:0"
Value
=
"0.2"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Pressed"
>
<
Storyboard
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"AnimatedBorder"
>
<
DiscreteDoubleKeyFrame
KeyTime
=
"0:0:0"
Value
=
"0.1"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Disabled"
/>
<
VisualState
x:Name
=
"NoneVertical"
/>
<
VisualState
x:Name
=
"NormalVertical"
/>
<
VisualState
x:Name
=
"MouseOverVertical"
/>
<
VisualState
x:Name
=
"PressedVertical"
/>
<
VisualState
x:Name
=
"DisabledVertical"
/>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"FocusStatesGroup"
>
<
VisualState
x:Name
=
"Unfocused"
/>
<
VisualState
x:Name
=
"Focused"
/>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
Border
x:Name
=
"NormalBorder"
Background
=
"{TemplateBinding Background}"
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
>
</
Border
>
<
Border
x:Name
=
"AnimatedBorder"
BorderThickness
=
"{TemplateBinding BorderThickness}"
>
<
Border.Background
>
<
RadialGradientBrush
GradientOrigin
=
"0.5,1.1"
RadiusY
=
"0.6"
RadiusX
=
"1"
>
<
GradientStop
Color
=
"#FFFFFFFF"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#FFFFFFFF"
Offset
=
"0.8"
/>
</
RadialGradientBrush
>
</
Border.Background
>
</
Border
>
</
Grid
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
</
Telerik_Windows_Controls_Chromes:ButtonChrome.Style
>
</
Telerik_Windows_Controls_Chromes:ButtonChrome
>
<
ContentPresenter
x:Name
=
"Content"
Grid.Row
=
"0"
Grid.Column
=
"0"
Content
=
"{TemplateBinding Content}"
ContentTemplate
=
"{TemplateBinding ContentTemplate}"
HorizontalAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment
=
"{TemplateBinding VerticalContentAlignment}"
/>
<
Path
x:Name
=
"DropDownIndicator"
Grid.Row
=
"0"
Grid.Column
=
"0"
Width
=
"0"
Height
=
"0"
Data
=
""
Opacity
=
"0"
Visibility
=
"Collapsed"
IsHitTestVisible
=
"False"
/>
<
telerik:Popup
x:Name
=
"DropDownPopup"
>
<
Grid
x:Name
=
"PopupContentElement"
>
<
Grid
x:Name
=
"grd_Panel"
Background
=
"Transparent"
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"1*"
/>
<
RowDefinition
Height
=
"1"
/>
<
RowDefinition
Height
=
"1"
/>
<
RowDefinition
Height
=
"1"
/>
</
Grid.RowDefinitions
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"1*"
/>
<
ColumnDefinition
Width
=
"1"
/>
<
ColumnDefinition
Width
=
"1"
/>
<
ColumnDefinition
Width
=
"1"
/>
</
Grid.ColumnDefinitions
>
<!-- Shadows -->
<
Rectangle
Grid.Row
=
"0"
Grid.RowSpan
=
"4"
Grid.Column
=
"0"
Grid.ColumnSpan
=
"4"
Fill
=
"#FF000000"
Opacity
=
"0.1"
RadiusX
=
"1"
RadiusY
=
"1"
Margin
=
"3,3,0,0"
/>
<
Rectangle
Grid.Row
=
"0"
Grid.RowSpan
=
"3"
Grid.Column
=
"0"
Grid.ColumnSpan
=
"3"
Fill
=
"#FF000000"
Opacity
=
"0.1"
RadiusX
=
"1"
RadiusY
=
"1"
Margin
=
"3,3,0,0"
/>
<
Rectangle
Grid.Row
=
"0"
Grid.RowSpan
=
"2"
Grid.Column
=
"0"
Grid.ColumnSpan
=
"2"
Fill
=
"#FF000000"
Opacity
=
"0.1"
RadiusX
=
"1"
RadiusY
=
"1"
Margin
=
"3,3,0,0"
/>
<
Border
x:Name
=
"DropDownPopupBorder"
BorderThickness
=
"1"
Background
=
"#FFFCFCFC"
CornerRadius
=
"1"
Height
=
"{TemplateBinding DropDownHeight}"
MaxWidth
=
"{TemplateBinding DropDownMaxWidth}"
MaxHeight
=
"{TemplateBinding DropDownMaxHeight}"
MinWidth
=
"3"
MinHeight
=
"3"
Width
=
"{TemplateBinding DropDownWidth}"
>
<
Border.BorderBrush
>
<
LinearGradientBrush
StartPoint
=
"0,0"
EndPoint
=
"1,1"
>
<
GradientStop
Color
=
"#FFDBDBDB"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#FFABABAB"
Offset
=
"0.8"
/>
</
LinearGradientBrush
>
</
Border.BorderBrush
>
<
ContentPresenter
x:Name
=
"DropDownPopupContent"
ContentTemplate
=
"{TemplateBinding DropDownContentTemplate}"
Content
=
"{TemplateBinding DropDownContent}"
DataContext
=
"{Binding DataContext, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment
=
"Stretch"
VerticalAlignment
=
"Stretch"
/>
</
Border
>
</
Grid
>
</
Grid
>
</
telerik:Popup
>
</
Grid
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
</
telerik:RadDropDownButton.Style
>
<
telerik:RadDropDownButton.DropDownContent
>
<
Rectangle
Stroke
=
"Green"
StrokeThickness
=
"4"
Fill
=
"YellowGreen"
/>
</
telerik:RadDropDownButton.DropDownContent
>
</
telerik:RadDropDownButton
>
</
DataTemplate
>
</
ItemsControl.ItemTemplate
>
</
ItemsControl
>
</
Grid
>
</
UserControl
>
0
Hi Rob,
Thank you for the code snippets, but I don't think that the problem in your project is related to the IsBackgroundVisible issue because you don't set this property to false (you set it in the business object but you don't bind it in the ItemTemplate). The problem in your case is the AnimatedBorder which is white and with opacity 1, but when you hover over the button you change the opacity of this border to 0.2 and that's why you begin to see the background beneath (Also in the visual state "None" of the button chrome your are trying to change the opacity of a border with name "OuterBorder", but you don't have an "OuterBorder" in the template, you should change this to "NormalBorder" I think). I've attached a sample project with your code snippets but the opacity of the AnimatedBorder is 0 by default.
Back to the IsBackgroundVisible property - there really seems to be a problem with it when you place a button inside some controls like PanelBar, TreeView, OutlookBar etc. and we'll try to fix this for the upcoming service pack.
All the best,
Zarko
the Telerik team
Thank you for the code snippets, but I don't think that the problem in your project is related to the IsBackgroundVisible issue because you don't set this property to false (you set it in the business object but you don't bind it in the ItemTemplate). The problem in your case is the AnimatedBorder which is white and with opacity 1, but when you hover over the button you change the opacity of this border to 0.2 and that's why you begin to see the background beneath (Also in the visual state "None" of the button chrome your are trying to change the opacity of a border with name "OuterBorder", but you don't have an "OuterBorder" in the template, you should change this to "NormalBorder" I think). I've attached a sample project with your code snippets but the opacity of the AnimatedBorder is 0 by default.
Back to the IsBackgroundVisible property - there really seems to be a problem with it when you place a button inside some controls like PanelBar, TreeView, OutlookBar etc. and we'll try to fix this for the upcoming service pack.
All the best,
Zarko
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
Serhiy Volhushyn
Top achievements
Rank 1
answered on 08 Oct 2011, 06:46 AM
Looks like not fixed in 2011.2.0927 with Office_Blue theme.
When you hover over with the mouse and then remove it everything is back to normal.
When you hover over with the mouse and then remove it everything is back to normal.
<
radControls:RadExpander
>
<
radControls:RadExpander.Header
>
<
Grid
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"*"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
</
Grid.ColumnDefinitions
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
<
TextBlock
Grid.Column
=
"0"
x:FieldModifier
=
"private"
x:Name
=
"_headerTextBlock"
Text
=
"Provider"
HorizontalAlignment
=
"Left"
VerticalAlignment
=
"Center"
Margin
=
"5,0,0,0"
/>
<
telerik:RadButton
Grid.Column
=
"1"
x:FieldModifier
=
"private"
x:Name
=
"_registerButton"
BorderThickness
=
"0"
IsBackgroundVisible
=
"False"
Margin
=
"5,0,0,0"
ToolTipService.ToolTip
=
"Register provider"
Activate
=
"OnRegisterButtonActivate"
>
<
Image
Source
=
"/Accellos.Platform.Silverlight.Reports;component/Images/16x16/NodeConfigure16.png"
Width
=
"16"
Height
=
"16"
VerticalAlignment
=
"Center"
HorizontalAlignment
=
"Center"
/>
</
telerik:RadButton
>
<
telerik:RadButton
Grid.Column
=
"2"
x:FieldModifier
=
"private"
x:Name
=
"_deleteButton"
BorderThickness
=
"0"
IsBackgroundVisible
=
"False"
Margin
=
"5,0,0,0"
ToolTipService.ToolTip
=
"Remove provider registration"
Activate
=
"OnDeleteButtonActivate"
>
<
Image
Source
=
"/Accellos.Platform.Silverlight.Reports;component/Images/16x16/NodeDelete16.png"
Width
=
"16"
Height
=
"16"
VerticalAlignment
=
"Center"
HorizontalAlignment
=
"Center"
/>
</
telerik:RadButton
>
</
Grid
>
</
radControls:RadExpander.Header
>
</
radControls:RadExpander
>
0
Hello Serhiy Volhushyn,
Unfortunately I'm still not able to reproduce this issue. I've attached a sample project with your code and from what I see everything is working fine.
Could you please examine the attached project and see if you're able to reproduce the problem with it?
Regards,
Zarko
the Telerik team
Unfortunately I'm still not able to reproduce this issue. I've attached a sample project with your code and from what I see everything is working fine.
Could you please examine the attached project and see if you're able to reproduce the problem with it?
Regards,
Zarko
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>