[Solved] How to Set background image to Rad Panel bar

[balaji]

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

[Dimitrina]

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.

[balaji]

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

[Dimitrina]

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.