Image in RadPanelBarItem Header

[Adam]

I ran across another post that discussed adding an image to the RadPanelBarItem. I tried the code and the image does not appear in my header...Is there something I'm missing?

The example code I used is below:

RadPanelBar panelBar = new RadPanelBar();
RadPanelBarItem panelBarItem = new RadPanelBarItem();
StackPanel stackPanel = new StackPanel();
stackPanel.Orientation = Orientation.Horizontal;
Image image = new Image();
image.Source = new BitmapImage(new System.Uri("/Images/mySamplePic.png", System.UriKind.RelativeOrAbsolute));
TextBlock textBlock = new TextBlock();
textBlock.Text = "Sample Text";
textBlock.Margin = new System.Windows.Thickness(5,0,0,0);
textBlock.VerticalAlignment = System.Windows.VerticalAlignment.Center;
stackPanel.Children.Add(image);
stackPanel.Children.Add(textBlock);
panelBarItem.Header = stackPanel;
panelBar.Items.Add(panelBarItem);

[Petar Mladenov]

Hello,

 I guess the problem is in the first slash "/" in your Uri. You can check out the attached project where this is resolved. On a side note, I strongly recommend you to build your Views in XAML where you can take advantage of the designer (Design View) and resolve similar issues faster.

Kind regards,
Petar Mladenov
the Telerik team

[Adam]

Awesome!! Thanks a lot. That did the trick..Actually had to make a slight change.

From this:
image.Source = new BitmapImage(new System.Uri("/Images/mySamplePic.png".....)

To this:
image.Source = new BitmapImage(new System.Uri("/Project Assembly Name;component/Images/mySamplePic.png".......)

Also, would do the design in XAML but we have an undetermined number of PanelBarItems that we're creating via looping thru our data source..

[Adam]

I had one other question regarding images in the header of the panel bar item. What would I need to do to have my panel have the image in the header and either on top or near the bottom right of the image have a label? I'm trying to create a notification system so that my user(s) can see if they need to even expand the item to see the content..My label text will be numerical to let the user(s) know a count of items inside the RadPanelBarItem.

I've attached two examples, one with the label "on top" or "inside" the image, the other shows the star notification at the bottom right of the image(s).

Thanks again!

[Kiril Stanoev]

Hi Adam,

To achieve that you need a Grid panel in which you will put the Image and the notification TextBlock. Something like this:

RadPanelBar panelBar = new RadPanelBar();

RadPanelBarItem panelBarItem = new RadPanelBarItem();

StackPanel stackPanel = new StackPanel();

stackPanel.Orientation = Orientation.Horizontal;
Grid grid = new Grid();
Image image = new Image();
grid.Children.Add(image);
image.Source = new BitmapImage(new System.Uri("Images/football.jpg", System.UriKind.RelativeOrAbsolute));
image.Width = 32;
image.Height = 32;
TextBlock notification = new TextBlock();
notification.Text = "10";
notification.Foreground = new SolidColorBrush(Colors.Red);
notification.FontWeight = FontWeights.Bold;
notification.FontSize = 12;
notification.VerticalAlignment = System.Windows.VerticalAlignment.Bottom;
notification.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
grid.Children.Add(notification);
TextBlock textBlock = new TextBlock();
textBlock.Text = "Sample Text";
textBlock.Margin = new System.Windows.Thickness(5, 0, 0, 0);
textBlock.VerticalAlignment = System.Windows.VerticalAlignment.Center;
stackPanel.Children.Add(grid);
stackPanel.Children.Add(textBlock);
panelBarItem.Header = stackPanel;
panelBar.Items.Add(panelBarItem);

this.LayoutRoot.Children.Add(panelBar);

The result from the above will be:



Let me know if this is sufficient. I'd be glad to further assist you.

All the best,
Kiril Stanoev
the Telerik team

[Adam]

Yes that's perfect!! Thanks so much for your help.