Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Buttons > IsBackgroundVisible Issue

• Ryan

  Posted on Jul 15, 2011 (permalink)

  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?
  

  Reply

• Zarko Zarko

  Posted on Jul 20, 2011 (permalink)

  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

  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!

  Attached files

  • SilverlightApplication4.zip

  Reply

• Mike Shilkov

  Posted on Jul 21, 2011 (permalink)

  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).

  Attached files

  • telerik.png

  Reply

• Mike Shilkov

  Posted on Jul 25, 2011 (permalink)

  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?

  Reply

• Rob Master

  Posted on Jul 25, 2011 (permalink)

  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"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

      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>

  Reply

• Zarko Zarko

  Posted on Jul 26, 2011 (permalink)

  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

  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!

  Attached files

  • SilverlightApplication2.zip

  Reply

• Serhiy Volhushyn

  Posted on Oct 8, 2011 (permalink)

  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.
  

  <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>

  Attached files

  • Example1.png
  • Example2.png

  Reply

• Zarko Zarko

  Posted on Oct 12, 2011 (permalink)

  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

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Attached files

  • RadTileViewSample.zip

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Buttons > IsBackgroundVisible Issue