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

IsBackgroundVisible Issue

7 Answers 118 Views

Buttons

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

7 Answers, 1 is accepted

answered on 20 Jul 2011, 03:44 PM

SilverlightApplication4.zip

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!

answered on 21 Jul 2011, 03:01 PM

telerik.png

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

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"

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

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="1*" />

<ColumnDefinition Width="1" />

</Grid.ColumnDefinitions>

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

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

answered on 26 Jul 2011, 04:13 PM

SilverlightApplication2.zip

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

answered on 08 Oct 2011, 06:46 AM

Example1.png

Example2.png

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

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

answered on 12 Oct 2011, 08:48 AM

RadTileViewSample.zip

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

IsBackgroundVisible Issue

7 Answers, 1 is accepted