Hi Guys, I have a view model with code below.
using System.Collections.ObjectModel; using System.ComponentModel; //using ChurchWX.Classes; namespace ChurchWX { public class ViewModel : INotifyPropertyChanged { private ObservableCollection<Group> _groups; public ObservableCollection<Group> Groups { get { return _groups; } set { _groups = value; OnPropertyChanged("Groups"); } } public ViewModel() { Groups = GenerateGroups(); } private ObservableCollection<Group> GenerateGroups() { ObservableCollection<Group> groups = new ObservableCollection<Group>(); //create the mail group with menu items var mailGroup = new Group() { Title = "Mail", LargeImagePath = @"/XamOutlookBarDataBinding;component/Images/Mail32.png", SmallImagePath = @"/XamOutlookBarDataBinding;component/Images/Mail16.png" }; var rootMailItem = new MenuItem() { Title = "Personal Folders", IsExpanded = true }; rootMailItem.Children.Add(new MenuItem() { Title = "Inbox", ImagePath = @"/XamOutlookBarDataBinding;component/Images/InboxFolder16.png" }); rootMailItem.Children.Add(new MenuItem() { Title = "Drafts", ImagePath = @"/XamOutlookBarDataBinding;component/Images/DraftsFolder16.png" }); rootMailItem.Children.Add(new MenuItem() { Title = "Sent Items", ImagePath = @"/XamOutlookBarDataBinding;component/Images/SentFolder16.png" }); rootMailItem.Children.Add(new MenuItem() { Title = "Deleted Items", ImagePath = @"/XamOutlookBarDataBinding;component/Images/DeletedFolder16.png" }); mailGroup.Items.Add(rootMailItem); //create the contacts group with menu items var contactsGroup = new Group() { Title = "Contacts", LargeImagePath = @"/XamOutlookBarDataBinding;component/Images/Contact32.png", SmallImagePath = @"/XamOutlookBarDataBinding;component/Images/Contact16.png" }; var rootContactItem = new MenuItem() { Title = "My Contacts", IsExpanded = true }; rootContactItem.Children.Add(new MenuItem() { Title = "Suggested Contacts", ImagePath = @"/XamOutlookBarDataBinding;component/Images/Contact16.png" }); rootContactItem.Children.Add(new MenuItem() { Title = "Contacts" , ImagePath = @"/XamOutlookBarDataBinding;component/Images/Contact16.png" }); contactsGroup.Items.Add(rootContactItem); groups.Add(mailGroup); groups.Add(contactsGroup); return groups; } public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(string propertyname) { var handler = PropertyChanged; if (handler != null) handler(this, new PropertyChangedEventArgs(propertyname)); } } }
I also have the XAML below to display display the content defined in the viewmodel.
<UserControl xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="ChurchWX.MainPage" xmlns:local="clr-namespace:ChurchWX" xmlns:D="clr-namespace:ChurchWX.Classes" xmlns:ig="http://schemas.infragistics.com/xaml" 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:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"> <UserControl.DataContext> <local:ViewModel/> </UserControl.DataContext> <UserControl.Resources> <Style TargetType="ig:OutlookBarGroup"> <Setter Property="Header" Value="{Binding Title}"/> <Setter Property="LargeIconTemplate" Value="{Binding LargeImagePath}"/> <Setter Property="SmallIconTemplate" Value="{Binding SmallImagePath}"/> <Setter Property="Content" Value="{Binding Items}" /> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate > <ig:XamDataTree ItemsSource="{Binding}"> <ig:XamDataTree.GlobalNodeLayouts> <ig:NodeLayout Key="ItemsLayout" TargetTypeName="MenuItem" DisplayMemberPath="Title" IsExpandedMemberPath="IsExpanded"> <ig:NodeLayout.CollapsedIconTemplate> <DataTemplate> <Image Source="{Binding Data.ImagePath}" /> </DataTemplate> </ig:NodeLayout.CollapsedIconTemplate> </ig:NodeLayout> </ig:XamDataTree.GlobalNodeLayouts> </ig:XamDataTree> </DataTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Border x:Name="brTop" Grid.Row="0" BorderBrush="White" BorderThickness="0,0,0,1" Height="30"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="White" Offset="0.299"/> <GradientStop Color="#FFC1C9CD" Offset="0.979"/> </LinearGradientBrush> </Border.Background> <TextBlock Margin="12,0,0,0" Text="Church Works v1.0.0" FontSize="12" VerticalAlignment="Center" HorizontalAlignment="Left" FontWeight="Bold"> <TextBlock.Effect> <DropShadowEffect Color="White" BlurRadius="1" ShadowDepth="1"/> </TextBlock.Effect> <TextBlock.Foreground> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFB292DA"/> <GradientStop Color="#FF292929" Offset="1"/> </LinearGradientBrush> </TextBlock.Foreground> </TextBlock> </Border> <Grid x:Name="MainPageLayoutRoot" Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" MinWidth="60" /> <ColumnDefinition Width="4"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Canvas x:Name="propertyCanvas" Grid.Column="2"></Canvas> <StackPanel Name="stpOutlookBar" Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="150"> <ig:XamOutlookBar GroupsSource="{Binding Groups}"/> </StackPanel> <sdk:GridSplitter Grid.Column="1" HorizontalAlignment="Left" Grid.RowSpan="2" Background="#FFBACBFF"/> <StackPanel Grid.Column="2" Width="800"> <Grid x:Name="WorkAreaLayoutRoot" Background="White" Grid.Column="2"> </Grid> </StackPanel> </Grid> </Grid> </UserControl>
the xamOutlookbar only displays ChurchWX.Groups on the two groups defined. I will be glad is someone will direct me as to where I went wrong. Thank you
Hello Leslie,
I am just checking the progress of this issue and was wondering if you managed to achieve your goal or if you need any further assistance on the matter.