Skip to content

964819-Change the code snippet in data binding menuadv UG wpf #1831

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 26, 2025
Merged

964819-Change the code snippet in data binding menuadv UG wpf #1831

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 82 additions & 74 deletions wpf/Menu/Data-Binding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,14 @@ documentation: ug

The topics under this section explain the data binding support for the MenuAdv control.

## Data-Binding to Objects
## Data Binding to Objects

The MenuAdv control also supports binding to objects. The following example shows this.

1. Create a class that act as a model for MenuAdv.

~~~csharp
{% tabs %}
{% highlight C# %}

public class Model
{
Expand All @@ -29,12 +30,14 @@ public class Model
public ObservableCollection<Model> SubItems { get; set; }
}

~~~
{% endhighlight %}
{% endtabs %}


2. Create a ViewModel class and initialize the items.

~~~csharp
{% tabs %}
{% highlight C# %}

public class ViewModel
{
Expand Down Expand Up @@ -87,108 +90,113 @@ public class ViewModel
}
}

~~~

{% endhighlight %}
{% endtabs %}

3. Create a ViewModel instance and use it as DataContext for the root window.

~~~xaml
{% tabs %}
{% highlight xaml %}

<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>

~~~
{% endhighlight %}
{% endtabs %}

4. Now configure the ItemsSource and ItemTemplate of MenuAdv.

~~~xaml
{% tabs %}
{% highlight xaml %}

<syncfusion:MenuAdv ItemsSource="{Binding MenuItems}">
<syncfusion:MenuAdv.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding SubItems}">
<TextBlock Text="{Binding Header}" />
</HierarchicalDataTemplate>
</syncfusion:MenuAdv.ItemTemplate>
</syncfusion:MenuAdv>

~~~
<syncfusion:MenuAdv ItemsSource="{Binding MenuItems}">
<syncfusion:MenuAdv.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding SubItems}">
<TextBlock Text="{Binding Header}" />
</HierarchicalDataTemplate>
</syncfusion:MenuAdv.ItemTemplate>
</syncfusion:MenuAdv>

{% endhighlight %}
{% endtabs %}

Implementing the above code will generate the following control.

![Data-Binding_images1](Data-Binding_images/Data-Binding_img1.png)



## Data-Biding with XML
## Data Binding with XML

An XML file can also be used as _ItemsSource_ for the MenuAdv control. The following example illustrates this.

1. Create an XML file with the following details as follows and name it as Data.xml.


~~~xaml

<Categories>
<Root Name="Products">
<SubItem Name="User Interface">
<SubItem Name="ASP .NET"/>
<SubItem Name="ASP .NET MVC"/>
<SubItem Name="WPF">
<SubItem Name="Tools"/>
<SubItem Name="Chart"/>
<SubItem Name="Grid"/>
<SubItem Name="Diagram"/>
<SubItem Name="Gauge"/>
<SubItem Name="Schedule"/>
<SubItem Name="Edit"/>
</SubItem>
<SubItem Name="Silverlight"/>
<SubItem Name="Mobile MVC"/>
<SubItem Name="Windows Phone"/>
<SubItem Name="Windows Forms"/>
</SubItem>

<SubItem Name="Business Intelligence">
<SubItem Name="WPF"/>
<SubItem Name="ASP.NET"/>
<SubItem Name="ASP.NET MVC"/>
<SubItem Name="Silverlight"/>
</SubItem>

<SubItem Name="Reporting">
<SubItem Name="WPF"/>
<SubItem Name="Windows Forms"/>
</SubItem>
</Root>
{% tabs %}
{% highlight xaml %}

<Categories>
<Root Name="Products">
<SubItem Name="User Interface">
<SubItem Name="ASP .NET"/>
<SubItem Name="ASP .NET MVC"/>
<SubItem Name="WPF">
<SubItem Name="Tools"/>
<SubItem Name="Chart"/>
<SubItem Name="Grid"/>
<SubItem Name="Diagram"/>
<SubItem Name="Gauge"/>
<SubItem Name="Schedule"/>
<SubItem Name="Edit"/>
</SubItem>
<SubItem Name="Silverlight"/>
<SubItem Name="Mobile MVC"/>
<SubItem Name="Windows Phone"/>
<SubItem Name="Windows Forms"/>
</SubItem>
<SubItem Name="Business Intelligence">
<SubItem Name="WPF"/>
<SubItem Name="ASP.NET"/>
<SubItem Name="ASP.NET MVC"/>
<SubItem Name="Silverlight"/>
</SubItem>
<SubItem Name="Reporting">
<SubItem Name="WPF"/>
<SubItem Name="Windows Forms"/>
</SubItem>
</Root>
</Categories>

~~~

{% endhighlight %}
{% endtabs %}

2. Add XmlDataProvider for the above XML document.

~~~xaml
{% tabs %}
{% highlight xaml %}

<XmlDataProvider Source="Data.xml"
<XmlDataProvider Source="Data.xml"
x:Key="xmlSource" XPath="Categories"/>

~~~
{% endhighlight %}
{% endtabs %}


3. Set ItemsSource property for the MenuAdv.

~~~xaml

<syncfusion:MenuAdv ItemsSource="{Binding Source={StaticResource xmlSource}, XPath=Root}">
<syncfusion:MenuAdv.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding XPath=SubItem}">
<TextBlock Text="{Binding XPath=@Name}" />
</HierarchicalDataTemplate>
</syncfusion:MenuAdv.ItemTemplate>
</syncfusion:MenuAdv>

~~~
{% tabs %}
{% highlight xaml %}

<syncfusion:MenuAdv ItemsSource="{Binding Source={StaticResource xmlSource}, XPath=Root}">
<syncfusion:MenuAdv.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding XPath=SubItem}">
<TextBlock Text="{Binding XPath=@Name}" />
</HierarchicalDataTemplate>
</syncfusion:MenuAdv.ItemTemplate>
</syncfusion:MenuAdv>

{% endhighlight %}
{% endtabs %}

This will create the following MenuAdv control.

Expand Down