IsBackgroundVisible Issue

8 posts, 0 answers
  1. Ryan
    Ryan avatar
    7 posts
    Member since:
    Apr 2011

    Posted 15 Jul 2011 Link to this post

    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?
  2. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 20 Jul 2011 Link to this post

    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!

  3. DevCraft banner
  4. Mike Shilkov
    Mike Shilkov avatar
    30 posts
    Member since:
    Apr 2010

    Posted 21 Jul 2011 Link to this post

    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).
  5. Mike Shilkov
    Mike Shilkov avatar
    30 posts
    Member since:
    Apr 2010

    Posted 25 Jul 2011 Link to this post

    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?
  6. Rob
    Rob avatar
    238 posts
    Member since:
    Jan 2009

    Posted 25 Jul 2011 Link to this post

    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>
  7. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 26 Jul 2011 Link to this post

    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!

  8. Serhiy Volhushyn
    Serhiy Volhushyn avatar
    21 posts
    Member since:
    Dec 2009

    Posted 08 Oct 2011 Link to this post

    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>
  9. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 12 Oct 2011 Link to this post

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

Back to Top
DevCraft banner