Binding OutlookBar

15 posts, 0 answers
  1. Joe
    Joe avatar
    15 posts
    Member since:
    May 2009

    Posted 13 Oct 2009 Link to this post

    How to bind OutlookBar, something like this?

    telerikNavigation:RadOutlookBar x:Name="outlookbar" Margin="0,1,0,-1" MinimizedAreaMinHeight="25" ScrollMode="Item" ItemsSource="{Binding}">  
          <telerikNavigation:RadOutlookBar.ItemTemplate>    
            <DataTemplate>    
                <telerikNavigation:RadOutlookBarItem Header="{Binding Label}" Cursor="Hand" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">    
                        <!-- Binding children to RadTreeView -->    
                </telerikNavigation:RadOutlookBarItem>    
            </DataTemplate>    
        </telerikNavigation:RadOutlookBar.ItemTemplate>    
    </telerikNavigation:RadOutlookBar>  

     

    List<OutLookBarItem> root = new List<OutLookBarItem>();  
    root.Add(new MenuItem("Item 1"));  
    root.Add(new MenuItem("Item 2"));  
    root.Add(new MenuItem("Item 3"));  
    root.Add(new MenuItem("Item 4"));  
    outlookbar.DataContext = root; 

    The items doesnt appear correctly.

  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 14 Oct 2009 Link to this post

    Hi Joe,

    Attached you can find a sample project demonstrating how to bind RadOutlookBar to a collection of items. Give it a try and let me know if you have additional questions.

    Best wishes,
    Kiril Stanoev
    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. Joe
    Joe avatar
    15 posts
    Member since:
    May 2009

    Posted 15 Oct 2009 Link to this post

    Thank u. It works.
  5. Alan Fisher
    Alan Fisher avatar
    14 posts
    Member since:
    Nov 2009

    Posted 23 Nov 2009 Link to this post

    Maybe I am showing my lack of Silverlight knowlege here but how do you set other properties of the control using data binding? e.g. I would like to set the icon and small icon for the RadOutlookBarItem control?

    Regards
    Alan
  6. Bobi
    Admin
    Bobi avatar
    513 posts

    Posted 23 Nov 2009 Link to this post

    Hi Alan Fisher,

    Please find attached a sample project that shows how to accomplish the desired functionality.
    In order to be able to set some properties using Data Binding you have to use ContainerBindings:

    XAML:
    <telerik:ContainerBindingCollection x:Name="BindingsCollection">
                <telerik:ContainerBinding PropertyName="Icon" Binding="{Binding Image}" />
            </telerik:ContainerBindingCollection>
    .....
    <telerikNavigation:RadOutlookBar.ItemTemplate>
                    <DataTemplate telerik:ContainerBinding.ContainerBindings="{StaticResource BindingsCollection}" >
                        <Grid>
                            <TextBlock Text="{Binding Label}" Cursor="Hand"/>
                        </Grid>
                    </DataTemplate>
                </telerikNavigation:RadOutlookBar.ItemTemplate>

    C#:
    public class MyItemsSource : ObservableCollection<MyItem>
        {
            public MyItemsSource()
            {
                this.Add(new MyItem() { Label = "Item 1", Image = "/Images/image1.png" });
                this.Add(new MyItem() { Label = "Item 2", Image = "/Images/image1.png" });
                this.Add(new MyItem() { Label = "Item 3", Image = "/Images/image2.png" });
                this.Add(new MyItem() { Label = "Item 4", Image = "/Images/image2.png" });
            }
        }

        public class MyItem
        {
            public string Label { get; set; }
            public string Image { get; set; }
        }

    Alternatively you can set other properties as well like for example SmallIcon.
    I hope that the sample project will help you.
    Please let us know if you have any other questions or need some more help.

    Regards,
    Boryana
    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.
  7. Alan Fisher
    Alan Fisher avatar
    14 posts
    Member since:
    Nov 2009

    Posted 25 Nov 2009 Link to this post

    Thanks for your reply, that part worked well. Now I am struggling with the next piece in the puzzle i.e. extending your sample to include some controls in the RadOutlookBarItem e.g. a calendar. No matter what I do, the item always displays the name of the class i.e.

    'SilverlightApplication1.MyItem'. Is there any chance of you extending the sample to show how to create controls in RadOutlookBarItem depending on values from the databinding?

    Regards
    Alan

     

     

  8. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 27 Nov 2009 Link to this post

    Hello Alan,

    There are several ways to add content to the selected item. The first one is to create the content through code:

    RadCalendar calendar = new RadCalendar();
    (outlookBar1.SelectedItem as RadOutlookBarItem).Content = calendar;

    Another approach is to place the controls inside a UserControl and give this UserControl as a Content to the RadOutlookBarItem.

    I have attached an extension to Boryana's project. Have a look at it and if you have additional questions or you find something unclear, let me know. I'd glad to help you.

    All the best,
    Kiril Stanoev
    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.
  9. DomiH
    DomiH avatar
    5 posts
    Member since:
    Jun 2007

    Posted 19 Jan 2011 Link to this post

    Hi Kiril,

    thank you for the samples!

    If I reduce the number of visible items, I get the class name instead of the label content in the "tray". I tried to define a ItemMinimizedTemplate, but that leads to an exception. Is there another DP I have to bind to?

    best regards,
    Dominik
  10. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 20 Jan 2011 Link to this post

    Hi Dominik Hasiwar,

    Could you please send us your sample project, so I will be able to better assist you?

    Kind regards,
    Viktor Tsvetkov
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  11. DomiH
    DomiH avatar
    5 posts
    Member since:
    Jun 2007

    Posted 20 Jan 2011 Link to this post

    Hi Viktor,

    it is the sample Kiril posted. Just minimize the visible Items.

    Regards,
    Dominik
  12. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 20 Jan 2011 Link to this post

    Hello Joe,

    Could you please examine the modified project and if you have further questions feel free to ask?

    Greetings,
    Viktor Tsvetkov
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  13. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 20 Jan 2011 Link to this post

    Hello Dominik Hasiwar,

    Could you please examine the modified project and if you have further questions feel free to ask?

    Greetings,
    Viktor Tsvetkov
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  14. DomiH
    DomiH avatar
    5 posts
    Member since:
    Jun 2007

    Posted 20 Jan 2011 Link to this post

    works perfect - thanks a lot!

    Best regards,
    Dominik
  15. Bård-Inge
    Bård-Inge avatar
    8 posts
    Member since:
    Jun 2008

    Posted 25 Aug 2011 Link to this post

    Hello,

    When trying out the sample 161176-addingcontenttooutlookbar.zip,
    there is a problem with the popupmenuitems when there are too many minimized items.
    Trye for instance to expand the exmaple to:

    public MyItemsSource()
    {
                MyItem item0 = new MyItem();
                 item0.Header = "Item0";
                 item0.ItemHeader = "Simpsons and Flanders using TreeView";
                item0.ItemIcon = "Images/Controls/TreeView.png";
                item0.ItemContent = new Item0Content();


                MyItem item1 = new MyItem();
                item1.ItemHeader = "Simpsons and Flanders using TabControl";
                item1.ItemIcon = "Images/Controls/TabControl.png";
                item1.ItemContent = new Item1Content();


                MyItem item2 = new MyItem();
                item2.ItemHeader = "Simpsons and Flanders using TabControl2";
                item2.ItemIcon = "Images/Controls/TabControl.png";
                item2.ItemContent = new Item1Content();


                MyItem item3 = new MyItem();
                item3.ItemHeader = "Simpsons and Flanders using TabControl3";
                item3.ItemIcon = "Images/Controls/TabControl.png";
                item3.ItemContent = new Item1Content();

                this.Add(item0);
                this.Add(item1);
                this.Add(item2);
                this.Add(item3);
    }

    And then try to choose the menu down to the right.

    How to fix this problem?




  16. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 30 Aug 2011 Link to this post

    Hello Bård-Inge,

     During Q1 2011, we introduced ItemDropDownContentTemplate property to template the items in the DropDownButton. You can use it for example like so:

    <telerikNavigation:RadOutlookBar x:Name="outlookBar1"
                                            Width="600"
                                            Height="600"
                                            ItemDropDownContentTemplate="{StaticResource OutlookBarItemMinimizedTemplate}"
                                            ItemMinimizedTemplate="{StaticResource OutlookBarItemMinimizedTemplate}"
                                            ItemTemplate="{StaticResource OutlookBarItemTemplate}"
                                            TitleTemplate="{StaticResource OutlookBarItemTitleTemplate}" />
    Please check out the attached project where this is realized with the latest official telerik assemblies.  Regards,
    Petar Mladenov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Back to Top
DevCraft banner