Binding OutlookBar

[Joe]

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.

[Kiril Stanoev]

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.

[Joe]

Thank u. It works.

[Alan Fisher]

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

[Bobi]

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.

[Alan Fisher]

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

 

 

[Kiril Stanoev]

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.

[DomiH]

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

[Viktor Tsvetkov]

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

[DomiH]

Hi Viktor,

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

Regards,
Dominik

[Viktor Tsvetkov]

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

[Viktor Tsvetkov]

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

[DomiH]

works perfect - thanks a lot!

Best regards,
Dominik

[Bård-Inge]

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?

[Petar Mladenov]

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