Image in RadPanelBarItem Header

6 posts, 0 answers
  1. Adam
    Adam avatar
    40 posts
    Member since:
    Dec 2011

    Posted 21 Dec 2011 Link to this post

    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);
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 26 Dec 2011 Link to this post

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

  3. DevCraft banner
  4. Adam
    Adam avatar
    40 posts
    Member since:
    Dec 2011

    Posted 27 Dec 2011 Link to this post

    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..
  5. Adam
    Adam avatar
    40 posts
    Member since:
    Dec 2011

    Posted 27 Dec 2011 Link to this post

    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!
  6. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 29 Dec 2011 Link to this post

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

  7. Adam
    Adam avatar
    40 posts
    Member since:
    Dec 2011

    Posted 29 Dec 2011 Link to this post

    Yes that's perfect!! Thanks so much for your help.
Back to Top
DevCraft banner