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

Question

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.

A C# based example with mui would really be fantastic as the wiki from https://github.com/firstfloorsoftware/mui/wiki is quite limited. — Vivian Lobo, Sep 14 '15 at 21:48

Glen Thomas · Accepted Answer · 2015-09-15T20:45:58.017

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>

Thank you Glen, however. It is still blank : http://i61.tinypic.com/1590ug.png The IPList does have the entries. Just not displaying it. I have set the context, copying from your suggestion. — Vivian Lobo, Sep 15 '15 at 08:08
No your Visual Studio version should not make any difference. I will attempt to reproduce this later today — Glen Thomas, Sep 15 '15 at 14:16
@VivianLobo I fixed your code. Have tried to email it to you but keeps coming back. Probably your mail server doesn't like zip file attachments. Do you have another email? — Glen Thomas, Sep 15 '15 at 21:42
Thank you so much Glen, I have emailed you again. I am so sorry for the trouble. — Vivian Lobo, Sep 16 '15 at 07:09

score 0 · Answer 2 · answered Mar 26 '17 at 12:37

For me worked when i changed the order from

public ListOfIP()
{
       DataContext = this;
       InitializeComponent();
       IPList = new LinkCollection();
       testMethod(IPList);
}

to

public ListOfIP()
{
        DataContext = this;
        IPList = new LinkCollection();
        testMethod(IPList); 
        InitializeComponent();
}

and it worked perfectly ;)

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

2 Answers2