0

I could use some suggestions in order to show each object in a list, in different places in a wpf view.

Lets say I have made a view and splitted it up in rows and columns like this:

<Grid.RowDefinitions>
        <RowDefinition Height="0.7*" />
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"></ColumnDefinition>
        <ColumnDefinition Width="1*"></ColumnDefinition>
        <ColumnDefinition Width="1*"></ColumnDefinition>
        <ColumnDefinition Width="1*"></ColumnDefinition>
        <ColumnDefinition Width="1*"></ColumnDefinition>
        <ColumnDefinition Width="0.3*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

Then I have created stack planels for each of these boxes where I want to show information of a certain room (Hotel room)

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5">
    <TextBlock FontFamily="../Fonts/bold.ttf#bold">Room 101</TextBlock>
</StackPanel>

<StackPanel Grid.Row="1" Grid.Column="2" Margin="5">
    <TextBlock FontFamily="../Fonts/bold.ttf#bold">Room 102</TextBlock>
</StackPanel>

I'm using MVVM, and have a RoomsViewModel that have a list like this:

public ObservableCollection<AvailableRoomModel> AvailableRooms { get; private set; }

Basically a list of AvailableRoomModel objects. I know I can use a listView to show the data or a ListBox, but want to make a nice overview of all rooms in a hotel and if they are available at the moment.

The first Box with room 101, should be binded to the first object in the list and so on?

Do some of you know what to use so I can show all rooms in hotel? Idea is to mark each room with a color or something if the room is available at the given time.

Good day ;)

Mikkel
  • 1,771
  • 11
  • 35
  • 59

1 Answers1

1

You should use ItemsControl for that. Inside ItemsControl, you should define its ItemsPanel property, which will contain each item, and the ItemTemplate panel, which will be used for each AvailableRoom. You need to bind ItemsPanel.ItemsSource property to the ObservableCollection on your ViewModel.

With respect to your specific layout, I would choose UniformGrid for the ItemsPanel, usually binding its Columns or Rows to an appropriate property on ViewModel (or hard-coding it if I it is fixed).

With respect to the ItemTemplate, there you can use a StackPanel, with elements bound to each of the interesting properties of AvailableRoom.

heltonbiker
  • 26,657
  • 28
  • 137
  • 252
  • Are you sure you mean ItemsPanel?, when I use it , it gives me an error its not supported. – Mikkel Apr 23 '16 at 18:01
  • What he means is called ItemsControl, except the property, which actually is ItemsPanel. See this for example: http://stackoverflow.com/a/22325266/1136211 – Clemens Apr 23 '16 at 18:08
  • Sorry, folks, my mistake! I corrected the answer and added a link. Thanks @Clemens for your comment! Also, your example from the comment is more complete, with `ItemContainerStyle` which I didn't remember existed! – heltonbiker Apr 23 '16 at 18:20
  • Thanks, will try this out ... I will update my post as my progress follows, shouldn't take long ^^ – Mikkel Apr 23 '16 at 18:23