CODEWITHSUNDEEP
c#wpfxaml
P. Danielski
P. Danielski

Reputation: 560

How to format properly my data in WPF Template C#


I'm making a little project in C# using WPF and I have some problems in formatting properly my data in the xaml file.

My program downloads from an url an xml file containing several serialized news objects, which have attributes like title, release date. content etc.
I have to display all these news in my window accordly to a specific template.

I can't figure out with which controls should I work with and how I should correctly use bindings after I have parsed all my data to a List of news.

I want to create a template which I can use for each News object repetitively, without knowing exactly the amount of objects.
I searched some info and I found that I need the DataTemplate Control, which should be the graphical rapresentation of each object, but I'm not sure on how I can combine this template to my data and generally, what I should write outside the <Window.Resources> tag(where the DataTemplate is)

A little of help would be appreciated,
Thanks

PS: In another part of my project I have done a similar thing using a combobox, but in this case I don't want to work with a combobox, but with a more complex template, with textblocks, labels etc.

The template should like this:

Updates

ChangeLog 18/08/2016

  • Change number 1
  • Change number 2
  • Change number N


ChangeLog 17/08/2016

  • Change number 1
  • Change number 2
  • Change number N


ChangeLog 16/08/2016

  • Change number 1
  • Change number 2
  • Change number N

Upvotes: 0

Views: 95

Answers (1)

Matt Wilkinson
Matt Wilkinson

Reputation: 590

I am going to give you a brief run down on how to do this MVVM Style. So first thing you have to realize is that your view have a ViewModel behind it. To get the binding to work you will need to assign your ViewModel to the DataContext. There is alot of ways to do this but I am going to do this quick and dirty. You should read up on the MVVM ways to delievering solutions.

In general you will need 3 types of classes to generate the templates. The View, ViewModel and the Model. The Model will be your data that you downloaded. The ViewModel will be where you are keeping your collection of the data. (note: if you are planning to download the data continously and add it into a list you will need to make it an observable list) Your ViewModel will generally be as below. 

public class MainViewModel
{
    ObservableCollection<SimpleModel> _list = new ObservableCollection<SimpleModel>();
    public ObservableCollection<SimpleModel> List
    {
        get { return _list; }
    }

    public MainViewModel()
    {
        _list.Add(new SimpleModel() { Name = "obj1" });
        _list.Add(new SimpleModel() { Name = "obj2" });
        _list.Add(new SimpleModel() { Name = "obj3" });
    }


}

The simple model is just a place holder for you data but looks like this.

public class SimpleModel
{
    public String Name { get; set; }
}

Now in your view you will need to connect the View to the viewmodel in the code behind by applying the ViewModel to DataContext.

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new MainViewModel();
    }
}

Now that you have the DataContext working you can get your list to display by applying it to one of the core containers. You will also need to declare a datatemplate for your datatype. (note you will need to add the data type to your namespace). It will look similar to this.

<Grid>
    <Grid.Resources>
        <DataTemplate DataType="{x:Type local:SimpleModel}">
            <Label Foreground="Red"
                   Content="{Binding Name}" />
        </DataTemplate>
    </Grid.Resources>
    <ListView ItemsSource="{Binding List}">

    </ListView>
</Grid>

All you have to do is change the insides of your datatemplate to be what you want to display. This will allow you to show it in a MVVM fashion. This is just a brief overall introduction you should read up more about this though.

Upvotes: 1

Related Questions