How to Set background image to Rad Panel bar

4 posts, 0 answers
  1. balaji
    balaji avatar
    69 posts
    Member since:
    May 2009

    Posted 31 Aug 2009 Link to this post

    Hi,
    I wuld like to knw how to set background image to a panel bar item.
    Plz Let me knw.
    Thanks in advance
    N.Balaji
  2. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 31 Aug 2009 Link to this post

    Hi balaji,

    Thank you for your interest in our controls.You can see a sample at the attached file.
    If you have any question please do not hesitate to ask.

    I hope this will help you.

    Kind regards,
    Dimitrina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. DevCraft banner
  4. balaji
    balaji avatar
    69 posts
    Member since:
    May 2009

    Posted 31 Aug 2009 Link to this post

    Hi Dmitirina,
    Thanks For your Swift Reply.
    Am using Silverlight 2 with Rad Q2.
    However if i edit using expression blend 3 i found to see that there is a property called background in <telerikNavigation:RadPanelBar.Background>
    But While trying to run in my vs 2008 i find there is a
    <UserControl  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
        xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="ProductShowcase.Page"   
        Width="900" Height="600" mc:Ignorable="d">  
        <UserControl.Resources> 
            <BitmapImage x:Key="BackgroundImage" UriSource="img/radpanelbarimg.jpg" /> 
        </UserControl.Resources> 
        <Border CornerRadius="5" BorderBrush="#111F39" BorderThickness="5"  d:LayoutOverrides="Width" > 
            <Border.Resources> 
                <DataTemplate x:Key="RadPanelBarItemTemplate">  
                    <StackPanel Orientation="Horizontal" Margin="5">  
                        <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" Margin="0 0 5 0" /> 
                        <TextBlock Text="{Binding Description}" Width="180" /> 
                        <TextBlock Text="$" /> 
                        <TextBlock Text="{Binding Price}" /> 
                    </StackPanel> 
                </DataTemplate> 
            </Border.Resources> 
            <Border.Background> 
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
                    <GradientStop Color="#111F39"/>  
                    <GradientStop Color="#111F39" Offset="1"/>  
                </LinearGradientBrush> 
            </Border.Background> 
     
              
            <StackPanel Orientation="Horizontal" Margin="1" Background="#111F39">  
                  
                <Grid VerticalAlignment="Stretch" Background="#062448" Margin="0,32,0,0">  
                     
                    <Border BorderBrush="#062D54" BorderThickness="1" Background="#062448" Margin="0,33,12,-32">  
                        <telerikNavigation:RadPanelBar VerticalAlignment="Stretch" x:Name="radPanelBar" Width="250"   Background="#0E2B49" Margin="0,-31,0,0"  > 
                              
                            <telerikNavigation:RadPanelBarItem IsExpanded="True" Height="490.631"  > 
                              
                            <telerikNavigation:RadPanelBar.Background> 
                    <ImageBrush ImageSource="{StaticResource BackgroundImage}" /> 
                </telerikNavigation:RadPanelBar.Background> 
                                <telerikNavigation:RadPanelBarItem.Header> 
                                    <TextBlock Text="Year" Margin="25 4 5 5"  Foreground="White" FontFamily="verdana"/>  
                                </telerikNavigation:RadPanelBarItem.Header> 
                                <!--<telerikNavigation:RadPanelBarItem IsSelected="True">  
                                    <telerikNavigation:RadPanelBarItem.Header> 
                                        <StackPanel Orientation="Horizontal" Margin="5">  
                                            <Image Source="/PanelBar/Images/car_small.png" Stretch="None" /> 
                                            <TextBlock Text="BMW 128i Coupe" Margin="15 10 0 0" /> 
                                        </StackPanel> 
                                    </telerikNavigation:RadPanelBarItem.Header> 
                                </telerikNavigation:RadPanelBarItem>--> 
                            </telerikNavigation:RadPanelBarItem> 
     
                            <telerikNavigation:RadPanelBarItem   
                                ItemsSource="{Binding Performance}" 
                                ItemTemplate="{StaticResource RadPanelBarItemTemplate}" > 
                                <telerikNavigation:RadPanelBar.Background> 
                    <ImageBrush ImageSource="{StaticResource BackgroundImage}" /> 
                </telerikNavigation:RadPanelBar.Background> 
                                <telerikNavigation:RadPanelBarItem.Header> 
                                    <TextBlock Text="Segment" Margin="25 4 5 5" Foreground="White" FontFamily="verdana" /> 
                                </telerikNavigation:RadPanelBarItem.Header> 
                            </telerikNavigation:RadPanelBarItem> 
     
                            <telerikNavigation:RadPanelBarItem  
                                ItemsSource="{Binding Convenience}" 
                                ItemTemplate="{StaticResource RadPanelBarItemTemplate}" > 
                                <telerikNavigation:RadPanelBar.Background> 
                    <ImageBrush ImageSource="{StaticResource BackgroundImage}" /> 
                </telerikNavigation:RadPanelBar.Background> 
                                <telerikNavigation:RadPanelBarItem.Header> 
                                    <TextBlock Text="Location" Margin="25 4 5 5"  Foreground="White" FontFamily="verdana"/>  
                                </telerikNavigation:RadPanelBarItem.Header> 
                            </telerikNavigation:RadPanelBarItem> 
     
                            <telerikNavigation:RadPanelBarItem ItemsSource="{Binding Safety}" 
                                ItemTemplate="{StaticResource RadPanelBarItemTemplate}" > 
                                <telerikNavigation:RadPanelBarItem.Header> 
                                    <TextBlock Text="Safety Options" Margin="5 4 5 5" /> 
                                </telerikNavigation:RadPanelBarItem.Header> 
                            </telerikNavigation:RadPanelBarItem> 
     
                        </telerikNavigation:RadPanelBar> 
                    </Border> 
                </Grid> 
                  
                <Border BorderBrush="#111F39" BorderThickness="1 0 1 1" Background="#202020" Width="640" Height="506">  
                    <Grid Margin="10 0 10 10">  
                        <Grid.RowDefinitions> 
                            <RowDefinition Height="Auto" /> 
                            <RowDefinition Height="*"/>  
                        </Grid.RowDefinitions> 
     
                          
                          
                          
                        <Border Grid.Row="1" BorderBrush="#111F39"   > 
                            <Grid > 
                                <Grid.ColumnDefinitions> 
                                    <ColumnDefinition Width="0.275*"/>  
                                    <ColumnDefinition Width="0.061*"/>  
                                    <ColumnDefinition Width="0.11*"/>  
                                    <ColumnDefinition Width="0.149*"/>  
                                    <ColumnDefinition Width="0.332*"/>  
                                    <ColumnDefinition Width="0.04*"/>  
                                    <ColumnDefinition Width="0.032*"/>  
                                </Grid.ColumnDefinitions> 
                                <Grid.RowDefinitions> 
                                    <RowDefinition Height="Auto" /> 
                                    <RowDefinition Height="*"/>  
                                    <RowDefinition Height="Auto"/>  
                                </Grid.RowDefinitions> 
                                <Border  BorderBrush="#111F39" BorderThickness="0 0 0 1"    Margin="63,-45,2,0" VerticalAlignment="Top" Grid.Column="4" Grid.ColumnSpan="3">  
                                    <Image Source="forward.jpg" Height="27" RenderTransformOrigin="-1.244,0.552" Width="29" HorizontalAlignment="Left"/>  
                                      
     
     
                                </Border> 
                                <Canvas x:Name="rightpane"  Margin="-16,-13,-26,-42" Grid.ColumnSpan="7" Grid.RowSpan="3">  
                                    <Canvas.Background> 
                                        <ImageBrush ImageSource="img/rightpanebkgrnd.jpg" Stretch="Fill"/>  
     
                                    </Canvas.Background> 
                                    <StackPanel> 
                                        <Grid Margin="5 5 20 0"/>  
     
                                        <ItemsControl ItemsSource="{Binding CheckedItems}" > 
                                            <ItemsControl.ItemTemplate> 
                                                <DataTemplate> 
                                                    <Grid Margin="5 5 20 0">  
                                                          
                                                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"/>  
                                                    </Grid> 
                                                </DataTemplate> 
                                            </ItemsControl.ItemTemplate> 
                                        </ItemsControl> 
     
                                    </StackPanel> 
                                    <Image Source="img/backward.jpg" Height="27" RenderTransformOrigin="-1.244,0.552" Width="29" Canvas.Left="504" Canvas.Top="-35"/>  
                                    <Image Source="img/createalbum.jpg" Height="27" RenderTransformOrigin="-1.244,0.552" Width="29" Canvas.Left="537" Canvas.Top="-35"/>  
                                    <Image Source="img/createalbum1.jpg" Height="27" RenderTransformOrigin="-1.244,0.552" Width="29" Canvas.Left="580" Canvas.Top="-35"/>  
                                </Canvas> 
                                  
                            </Grid> 
                        </Border> 
                    </Grid> 
                </Border> 
     
              
              
            </StackPanel> 
        </Border> 
    </UserControl> 
     
    n error on that pos
    The Attachable Property 'Background ' was not found in type RadPanelBar.
    Here is the Code
  5. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 01 Sep 2009 Link to this post

    Hi balaji,

    If you want to set background to the PanelBar , you have to write
    <telerikNavigation:RadPanelBar.Background> 
        <ImageBrush ImageSource="{StaticResource BackgroundImage}" /> 
    </telerikNavigation:RadPanelBar.Background> 

    If you want to set background to the PanelBarItem , you have to write
    <telerikNavigation:RadPanelBarItem.Background> 
        <ImageBrush ImageSource="{StaticResource BackgroundImage}" /> 
    </telerikNavigation:RadPanelBarItem.Background> 


    Greetings,
    Dimitrina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top