OutlookBar and Regions

[Andriy Mudriy]

Guys,
Could you help me with using OutlookBar with Regions. I want to click on OutlookBarItem and to view inside OutlookBar (in my region) apropriate control.

Do you have example for it.

PS.
I have looked over example PrismExample solution, but I havent seen need information.
Thanks 

[Syed Danish]

Hi Andriy,

Outlook Bar is the Control which do not have its own items. For Outlook Bar items you should either consider Tree View Control or Panel Bar control. Include a class whcih will work for the Navigation between the Regions and include a method named ShowControl with an interface which can help us to keep the track of the controls to be loaded into the region.For the panel click on the PanelBar Item or TreeView Item assign a delegate which gets fired and loads the View into the specific Region.

Hope this information will help you. Please let me know if this helps.
 
Regards
Syed Danish

[Griffith Townsend]

I'm using the Silverlight 4 beta OutlookBar, and I'm running into a similar issue. I tried using the ContentControl directly inside the OutlookBar and  also adding a PanelBarItem (I think this is what you're recommending) to the OutlookBar and applying the region to the content control using XAML. After I make this change, I'm getting a "Could not load file or assembly" error on System.Windows.Browser.

The attached .gif will show you what I'm trying to accomplish. The top section stays constant when the lower buttons are clicked, but that functionality may change as requirements change. The items in the top section are loaded from a number of possible modules, depending on what the user has configured. I need a region for the top area, and buttons across the bottom.

The following will re-create the error:

<UserControl x:Class="Astria.UI.Views.NavigationView"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:regions="clr-namespace:Microsoft.Practices.Composite.Presentation.Regions;assembly=Microsoft.Practices.Composite.Presentation"

xmlns:rad="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"

mc:Ignorable="d"

d:DesignHeight="480" d:DesignWidth="220">

<Grid x:Name="LayoutRoot" Background="White">

<rad:RadOutlookBar x:Name="outlookBar">

<rad:PanelBarPanel x:Name="InboxPanel">

<Canvas>

<ContentControl regions:RegionManager.RegionName="InboxRegion" />

</Canvas>

</rad:PanelBarPanel>      <rad:RadOutlookBarItem Header="Test" />

</rad:RadOutlookBar>

</Grid>

</UserControl>

I'm using your January push for the SL4 components, and the most recent Prism push as well. Any insights would be very helpful.

[Syed Danish]

Hi Andriy,

I suppose you are going in the wrong direction. First tell me weather you are using Prism and If so, you cannot make the regions from any where in the code. The regions can only be built from the Shell.xaml only. Where as the outlook bar is concerned, when given HorizontalAlighment and VerticalAlignement as Stretch occupies all the available space in the region. It is better if the contents of the outlook bar are panel bar or Tree View. For better understanding you can send me the sample code at [e-mail]

Thanks and Regards,
Syed Danish

[Kiril Stanoev]

Hello Syed Andriy,

Please have a look at the attached OutlookBar and Prism example. Let me know if this helps.

Sincerely yours,
Kiril Stanoev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[bydt]

Guys,

it works fine thank you, but i have found the problem when i try to load a module view and injected to outlookbar item, i am stuck with this approach that tries to create itemscontrol which has region to be injected. Does anyone had an experiences with this? please take a look my code as following :

 private void OnModulesLoaded(LoadOperation<ModuleSetting> loadOperation)
        {
            ModuleSettings moduleSettings = new ModuleSettings();
            foreach (ModuleSetting ms in this._moduleSettingContext.ModuleSettings)
            {
                moduleSettings.Add(ms);
            }

            IEnumerable<Module> qry = (from c in moduleSettings
                                       select
                                       new Module
                                       {
                                           Name = c.FolderTitle,
                                           ModuleIcon = c.FolderImage,
                                           ItemsControl = new System.Windows.Controls.ItemsControl() { Name = c.FolderTitle + "ItemsControl" },

                                       }).Distinct();
            foreach (Module module in qry)
            {
                RegionManager.SetRegionName(module.ItemsControl, module.Name + "Region");
                _modules.Add(module);
            }
            _moduleManager.LoadModule("ModuleA.InitModule");
        }

 

And here is the xaml :

Thanks

Here the xaml:

<UserControl.Resources>

<!--ContainerBindings collection-->

<telerikControl:ContainerBindingCollection x:Name="BindingsCollection">

<telerikControl:ContainerBinding PropertyName="Icon" Binding="{Binding ModuleIcon}" />

<telerikControl:ContainerBinding PropertyName="Content" Binding="{Binding ItemsControl}" />

</telerikControl:ContainerBindingCollection>

<!--Template for the item-->

<DataTemplate x:Key="OutlookBarItemTemplate"

telerikControl:ContainerBinding.ContainerBindings="{StaticResource BindingsCollection}">

<Grid Cursor="Hand">

<TextBlock Text="{Binding Name}" />

</Grid>

</DataTemplate>

<!--Template for the title-->

<DataTemplate x:Key="OutlookBarItemTitleTemplate">

<Grid>

<TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="14" />

</Grid>

</DataTemplate>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

<telerikNavigation:RadOutlookBar ItemsSource="{Binding ModulesCV}" x:Name="outlookBar" MinHeight="440"

ItemTemplate="{StaticResource OutlookBarItemTemplate}"

TitleTemplate="{StaticResource OutlookBarItemTitleTemplate}">

</telerikNavigation:RadOutlookBar>

[Kiril Stanoev]

Hi bydt,

Unfortunately I am not able to determine what is the exact cause of your issue. Is it possible for you to send us a sample project reproducing the problem. This way we will be better able to assist you and solve the problem as quickly as possible.

Sincerely yours,
Kiril Stanoev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Griffith Townsend]

FYI - I found a simpler solution for creating a region within the Outlook Bar by using the method outlined in John Papa's GridRegionAdapter blog post. I created a stack panel region adapter:

   public class StackPanelRegionAdapter : RegionAdapterBase<StackPanel>
    {

        public StackPanelRegionAdapter(IRegionBehaviorFactory regionBehaviorFactory) : base(regionBehaviorFactory) { }


        //Maintain the StackPanel instance

        private StackPanel instance;



        protected override void Adapt(IRegion region, StackPanel StackPanel)
        {

            instance = StackPanel;



            //Implementing the collectionChanged handler

            region.ActiveViews.CollectionChanged +=

            new System.Collections.Specialized.NotifyCollectionChangedEventHandler((x, y) =>
            {

                switch (y.Action)
                {

                    case NotifyCollectionChangedAction.Add:

                        foreach (UIElement element in y.NewItems)
                        {
                            instance.Children.Add(element);
                        }

                        break;


                    case NotifyCollectionChangedAction.Remove:

                        foreach (UIElement element in y.NewItems)

                            instance.Children.Remove(element);

                        break;

                }

            });


            //region.ActiveViews.ToList().ForEach(x => StackPanel.Tabs.Add(x as StackPanelTab));

        }


        protected override IRegion CreateRegion()
        {

            //This region keeps all the views in it as active.

            //Deactivation of views is not allowed.

            //This is the region used for ItemsControl controls.

            return new AllActiveRegion();

        }

    }

I registered it in region mappings (this goes in your BootStrapper.cs):

        protected override Microsoft.Practices.Composite.Presentation.Regions.RegionAdapterMappings ConfigureRegionAdapterMappings()
        {

            RegionAdapterMappings mappings =  base.ConfigureRegionAdapterMappings();
            mappings.RegisterMapping(typeof(StackPanel),this.Container.Resolve<StackPanelRegionAdapter>());
            return mappings;
        }

Then, I was able to do the following:

 

 

 

 

            <rad:RadOutlookBar.ContentTemplate>
                <DataTemplate x:Name="outlookContent">
                    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                        <StackPanel regions:RegionManager.RegionName="InboxRegion" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                    </ScrollViewer>
                </DataTemplate>
            </rad:RadOutlookBar.ContentTemplate>

The new region will need to be activated when you initialize your module, like so:

        public void Initialize()
        {
            IRegion navRegion = regionManager.Regions[NamedRegions.NavigationRegion.ToString()];
            NavigationView navView = container.Resolve<NavigationView>();
            IRegionManager manager = navRegion.Add(navView);
            navRegion.Activate(navView);
        }

The net result is that I have a layout region that handles containing the Outlook Panel ("NavigationRegion"), and the Outlook Panel itself has a region (in this case "InboxRegion") that I can add views to after the Panel has been initialized.