Vivian Lobo Vivian Lobo -4 years ago 148
C# Question

modern-ui ListPages - Populate Links using C# without MVVM

When I create a new listPage, the xaml code is the following:

<Grid Style="{StaticResource ContentRoot}">
<!-- TODO: set @SelectedSource -->
<mui:ModernTab Layout="List">
<mui:ModernTab.Links>
<!-- TODO: set @Source -->
<mui:Link DisplayName="Item 1" />
<mui:Link DisplayName="Item 2" />
</mui:ModernTab.Links>
</mui:ModernTab>
</Grid>


The problem is I want to be able to create Item1, Item2.. programatically in C#. That is Link's here should be populated from a list which I will add dynamically. I have not used MVVM and searching for answers. Any suggestion would be appreciated.

This is what I have tried so far in Xaml

<mui:ModernTab Layout="List" Links="{Binding Path=IPList}">


In C#

public partial class ListOfIP : UserControl
{
public LinkCollection IPList { get; private set; }
public ListOfIP()
{
InitializeComponent();
IPList = new LinkCollection();
testMethod(IPList);
}

public void testMethod(LinkCollection IPList)
{
IPList.Add(new Link() { DisplayName = "IP1" });
IPList.Add(new Link() { DisplayName = "IP2" });
IPList.Add(new Link() { DisplayName = "IP3" });
}
}


Sorry if this is a stupid try, but I am still learning binding in WPF.

Answer Source

If you data you are binding to is in the user control's code-behind then set the DataContext of the user control to the code-behind class:

public partial class ListOfIP : UserControl
{
    public LinkCollection IPList { get; private set; }
    public ListOfIP()
    {
        DataContext = this;
        InitializeComponent();
        IPList = new LinkCollection();
        testMethod(IPList);
    }

    public void testMethod(LinkCollection IPList)
    {
        IPList.Add(new Link() { DisplayName = "IP1" });
        IPList.Add(new Link() { DisplayName = "IP2" });
        IPList.Add(new Link() { DisplayName = "IP3" });
    }
}

XAML is correct:

<mui:ModernTab Layout="List" Links="{Binding Path=IPList}">

I the problem is that you have tried to directly set the content of the ModernWindow control to some UI controls. This will not work with ModernWindow because it has a built-in navigation system. You need to set the ContentSource property of ModernWindow to a URI that points to a UserControl.

<mui:ModernWindow x:Class="ModernUITest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mui="http://firstfloorsoftware.com/ModernUI"
        Title="MainWindow" Height="350" Width="525"
        ContentSource="/Pages/Home.xaml">   
</mui:ModernWindow>

Pages/Home.xaml:

<UserControl x:Class="ModernUITest.Pages.Home"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mui="http://firstfloorsoftware.com/ModernUI">
    <Grid>
        <mui:ModernTab Layout="List" Links="{Binding Path=IPList}"/>
    </Grid>
</UserControl>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download