How to Set List Items of a usercontrol in XAML

Question

I create a User Control. this has a dependencypoperty by this type

List<CustomSubMenuItem>

and CustomSubMeuItem

class CustomSubMenuItem
{
public string Title {get;set;}
public Color BackColor {get;set;}
publiv Visibility ItemVisibility {get;set;}
public ICommand Command {get;set;}
}

in XAML i bind to the prperty in usuall. but i cant make this items in XAML, Like ContextMenu or ListBoxItems.

<MyControl>
<MyControl.Items>
<CustomSubMenuItem Title="First" Visibility="{Binding Model.firstvisibility}"/>
<CustomSubMenuItem Title="Second" Visibility="{Binding Model.secondvisibility}"/>
</MyControl.Items>
</MyControl>

but this kind has error,what can I do.

UPDATE: Thanks, I Reach to answer below. i did not define the namespace of class in the xaml. and the upper code is true when i add the namespace: before CustomSubItemMenu.

Answer 1

Set your control datacontext to your list and then bind ItemsSource to it:

List<CustomSubMenuItem> MenuItems = new List<CustomSubMenuItem>();
MyControl.DataContext = MenuItems;

Then in XAML f.e:

  <MyControl ItemsSource="{Binding}">
    <MyControl.ItemTemplate>
        <DataTemplate><TextBlock Text="{Binding Path=Title}"/></DataTemplate>
    </MyControl.ItemTemplate>
 </MyControl>

You can bind your Title and Color the way you want it.

UPDATE:

If you want to bind Visibility to one of your property, one way to do it is to have bool value in Model and bind it to visibility. Also you need a ValueConverter to set true value as visible and false as hidden.

First, add a namespace in window. Declare that namespace where your ValueConverter class is defined.

xmlns:vm="clr-namespace:NamespaceHere"

XAML for binding visibility:

<MyControl Visibility="{Binding VisibilityValue, Converter={StaticResource converter}}"/>

Then add ValueConverter to your :

<vm:BoolToVisibilityConverter x:Key="converter" />

Lastly, you need to create the ValueConverter class, use mine as a example:

 public class BoolToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        bool val = (bool)value;
        if(val)
        {
            return Visibility.Visible;
        }
        else
        {
           return Visibility.Hidden;
        }
    }

    public object ConvertBack(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        bool val = (bool)value;
        if (val)
        {
            return Visibility.Visible;
        }
        else
        {
            return Visibility.Hidden;
        }
    }
}

Answer 2

Your CustomSubMenuItem should derive from MenuItem or at least from FrameworkElement, if you want to instantiate it in your VisualTree, which is where <MyControl.Items> is.

Alternatively, you can create your item-list as a StaticResource and then bind to this resource, like this (adjust namespaces of course) and if you need apply an ItemTemplate:

<Window.Resources>
    <x:Array x:Key="menuItems" Type="{x:Type local:CustomSubMenuItem}" 
            xmlns:local="clr-namespace:yourNamespace">
            <local:CustomSubMenuItem Property1="value1" Property2="value2" />
            <local:CustomSubMenuItem Property1="value3" />
    </x:Array>
<Window.Resources>

<MyControl ItemsSource="{StaticResource menuItems}">
     <MyControl.ItemTemplate>
           <DataTemplate>
               <TextBlock Text="{Binding Property1}" />
           </DataTemplate>
     </ListBox.ItemTemplate>
</ListBox>