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

Image in RadPanelBarItem Header

5 Answers 56 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 2
Adam asked on 21 Dec 2011, 09:33 PM
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);

5 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 26 Dec 2011, 01:53 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Adam
Top achievements
Rank 2
answered on 27 Dec 2011, 04:26 PM
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..
0
Adam
Top achievements
Rank 2
answered on 27 Dec 2011, 08:48 PM
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!
0
Kiril Stanoev
Telerik team
answered on 29 Dec 2011, 10:19 AM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Adam
Top achievements
Rank 2
answered on 29 Dec 2011, 02:11 PM
Yes that's perfect!! Thanks so much for your help.
Tags
PanelBar
Asked by
Adam
Top achievements
Rank 2
Answers by
Petar Mladenov
Telerik team
Adam
Top achievements
Rank 2
Kiril Stanoev
Telerik team
Share this question
or