How to create dynamically menu in MVVM - xaml

Question

I'm working on a simple WPF project, using MVVM.
I want to create a menu with dynamically Items.
Its my xaml file:
<Menu.Resources>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Header"
Value="{Binding MenuText}" />
<Setter Property="Icon">
<Setter.Value>
<Image Source="{Binding MenuIcon}"
Height="16px"
Width="16px" />
</Setter.Value>
</Setter>
<Setter Property="ItemsSource"
Value="{Binding Children}" />
<Setter Property="Command" Value="{Binding DataContext.ClickCommand , RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Menu}}"></Setter>
<Setter Property="CommandParameter" Value="{Binding ItemCommandParameter}"></Setter>
</Style>
</Menu.Resources>
And It's the view model class that is content of my xaml file:
private ObservableCollection<MenuItemModel> _topMenuItems;
public ObservableCollection<MenuItemModel> TopMenuItems
{
get { return _topMenuItems; }
set
{
if (_topMenuItems == value)
return;
Set("TopMenuItems", ref _topMenuItems, value);
}
}
public void LoadMainMenu()
{
IList<Model.MenuItemModel> fileMenuItems = PopulateFileMenuEntries();
_topMenuItems = new ObservableCollection<MenuItemModel>();
_topMenuItems.Add(new MenuItemModel() { MenuText = "_File", Children = new ObservableCollection<MenuItemModel>(fileMenuItems) });
}
IList<MenuItemModel> PopulateFileMenuEntries()
{
List<MenuItemModel> fileMenuItems = new List<MenuItemModel>();
fileMenuItems.Add(new MenuItemModel() { MenuText = "_Theme" });
fileMenuItems.Add(new MenuItemModel() { MenuText = "_Exit" });
return fileMenuItems;
}
my Menu Item Model Class:
public class MenuItemModel : ObservableObject
{
private string _menuText;
public string MenuText
{
get { return _menuText; }
set
{
if (_menuText == value)
return;
Set("MenuText", ref _menuText, value);
}
}
private BitmapImage _menuIcon;
public BitmapImage MenuIcon
{
get { return _menuIcon; }
set
{
if (_menuIcon == value)
return;
Set("MenuIcon", ref _menuIcon, value);
}
}
private ObservableCollection<MenuItemModel> _children;
public ObservableCollection<MenuItemModel> Children
{
get { return _children; }
set
{
Set("Children", ref _children, value);
}
}
public string ItemCommandParameter { get; set; }
}
My question is here:
How can I fill menu Items dynamically instead of using PopulateFileMenuEntries method. For example I want to have just a List Collection that is get the proper menu Items from database. How can I assign this list collection to the menu items in my sample project? I have 2 menu Items with subItems:
Main : Student, Teacher, Course,...
File : Theme, Exit,...

Answer 1

I hope you will get idea from this
<Style TargetType="expanderControl:ExpanderControl">
<Setter Property="HorizontalAlignment"
Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="expanderControl:ExpanderControl">
<Grid>
<Grid.Resources>
<QuadraticEase x:Key="QuadraticEaseOut"
EasingMode="EaseOut"/>
<QuadraticEase x:Key="QuadraticEaseInOut"
EasingMode="EaseInOut"/>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="41" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpansionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Collapsed"
GeneratedDuration="0:0:0.15"
To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
Storyboard.TargetName="ItemsCanvas"
EnableDependentAnimation="True">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseOut}"
KeyTime="0:0:0.00"
Value="0" />
<EasingDoubleKeyFrame x:Name="CollapsedToExpandedKeyFrame"
EasingFunction="{StaticResource QuadraticEaseOut}"
KeyTime="0:0:0.15"
Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimation Duration="0"
To="1.0"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="ItemsCanvas" />
</Storyboard>
</VisualTransition>
<VisualTransition From="Expanded"
GeneratedDuration="0:0:0.15"
To="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
Storyboard.TargetName="ItemsCanvas"
EnableDependentAnimation="True">
<EasingDoubleKeyFrame x:Name="ExpandedToCollapsedKeyFrame"
EasingFunction="{StaticResource QuadraticEaseInOut}"
KeyTime="0:0:0.00"
Value="1" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}"
KeyTime="0:0:0.15"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}"
KeyTime="0:0:0.00"
Value="1.0" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}"
KeyTime="0:0:0.15"
Value="0.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="ItemsCanvas"
EnableDependentAnimation="True">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}"
KeyTime="0:0:0.00"
Value="0.0" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}"
KeyTime="0:0:0.15"
Value="-35" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Duration="0"
To="0"
Storyboard.TargetProperty="(FrameworkElement.Height)"
Storyboard.TargetName="ItemsCanvas" />
<DoubleAnimation Duration="0"
To="0.0"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="ItemsCanvas" />
</Storyboard>
</VisualState>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetProperty="(FrameworkElement.Height)"
Storyboard.TargetName="ItemsCanvas" />
<DoubleAnimation Duration="0"
To="1.0"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="ItemsCanvas" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandabilityStates">
<VisualState x:Name="Expandable" />
<VisualState x:Name="NonExpandable">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="ExpandableContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="NonExpandableContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ListViewItem x:Name="ExpandableContent" Background="Transparent"
Grid.ColumnSpan="2"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="41" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="Header"
Grid.ColumnSpan="2"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
Grid.Column="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Grid.Row="0" />
<ContentControl x:Name="Expander"
ContentTemplate="{TemplateBinding ExpanderTemplate}"
Content="{TemplateBinding Expander}"
Grid.Column="1"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Margin="11,0,0,0"
Grid.Row="1" />
<Grid x:Name="ExpanderPanel"
Background="Transparent"
Grid.ColumnSpan="2"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2"
/>
<StackPanel Height="1" Background="Black" Grid.ColumnSpan="2"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2" VerticalAlignment="Bottom"></StackPanel>
</Grid>
</ListViewItem>
<ContentControl x:Name="NonExpandableContent"
Grid.ColumnSpan="2"
ContentTemplate="{TemplateBinding NonExpandableHeaderTemplate}"
Content="{TemplateBinding NonExpandableHeader}"
Grid.Column="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Grid.Row="0"
Grid.RowSpan="2"
Visibility="Collapsed" />
<Canvas x:Name="ItemsCanvas"
Grid.Column="1"
Margin="-120,0,0,0"
Opacity="0.0"
Grid.Row="2"
Width="{Binding ActualWidth, ElementName=Presenter}"
Height="{Binding ActualHeight, ElementName=Presenter}">
<Canvas.RenderTransform>
<CompositeTransform TranslateY="0.0" />
</Canvas.RenderTransform>
<ItemsPresenter x:Name="Presenter" />
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>