3 Replies - 7552 Views - Last Post: 15 July 2013 - 12:02 PM Rate Topic: -----

#1 wesleyCarlsen  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-July 13

Build Schedule Interface with Int Array and Databinding

Posted 12 July 2013 - 08:32 AM

I need a way to take an array (int[64,7,96] there are 64 unique schedules, 7 days per week, and 96 '15 minute segments' per day) and convert it into a schedule using data-binding. I had a method working previously where I drew rectangles into a grid programatically with nested for loops, but this caused some lag and whenever I wanted to updated the schedule information I had to change the variable and redraw the screen manually.

I recently switched my entire app over to using a model-view-viewmodel pattern and am relatively new to data-binding but am starting to learn just how powerful it is so to me it seems like my current solution is bad and am wondering if it is possible to draw a very complex UI hierarchy based off an array like this.

I researched hierarchical data-templates but can't find any good detailed information about how to use them. If anyone has any suggestions or links please let me know!

Thanks, Wesley

Is This A Good Question/Topic? 0
  • +

Replies To: Build Schedule Interface with Int Array and Databinding

#2 tlhIn`toq  Icon User is offline

  • Xamarin Cert. Dev.
  • member icon

Reputation: 6507
  • View blog
  • Posts: 14,377
  • Joined: 02-June 10

Re: Build Schedule Interface with Int Array and Databinding

Posted 12 July 2013 - 08:56 AM

It sounds like you're trying to do this with some pretty primitive techniques. Arrays? Drawing rectangles?

I would suggest modernizing your approach into types like List<T> and making UserControls instead of drawing rectangles. Then you just add a new instance of hte UserControl for each object in your List<T>

You can certainly do a schedule program this way. You could bind a ListView in your View to the ObservableCollection of appointment objects in your ViewModel.
Was This Post Helpful? 1
  • +
  • -

#3 wesleyCarlsen  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-July 13

Re: Build Schedule Interface with Int Array and Databinding

Posted 15 July 2013 - 09:44 AM

I have a ViewModel entirely setup using observable collections and am able to drill down in my interface to a specified schedule and want to display each day of the week and for each day i want to be able to display 96 different time slots (15 minute increments for 24 hours). Below is the ViewModel code as well as the View code.

My question is what is the best way to use a user control. I will want a user control for each day, so I will have 7 controls of the same kind per scedule, but I need someway to get my databound data into the user control. Do I need to make custom dependency properties and pass all 96 variables in?

If I do so once inside the control do I hard code out a grid with 96 columns and three rows and type each data piece into a cooresponding rectangle?

My goal is to have a resizable schedule control that has the day of the week as text, the hours on the bottom and a color representation of each 15 minute. Each segment can be red, blue, or green, for example. Before with the grid and rectangles it would resize with the window which was nice. Is there a better way to draw shapes on the screen? Canvas?

Thanks,
Wesley

public class ScheduleVM
    {
        public ObservableCollection<Schedule> schedules { get; set; }

        private static ScheduleVM viewModel = null;

        public static ScheduleVM getInstance()
        {
            if (viewModel == null)
                viewModel = new ScheduleVM();

            return viewModel;
        }

        private ScheduleVM()
        {
            schedules = new ObservableCollection<Schedule>();

            for (byte i = 0; i < 32; i++)
                schedules.Add(new Schedule());
        }
    }

    public class Schedule
    {
        public ObservableCollection<Day> days { get; set; }

        public Schedule()
        {
            days = new ObservableCollection<Day>();

            for (byte i = 0; i < 8; i++)
            {
                ObservableCollection<int> values = new ObservableCollection<int>();

                for (byte j = 0; j < 96; j++)
                    values.Add(3);

                days.Add(new Day() { data = values });
            }
        }
    }

    public class Day : BaseVM
    {
        private ObservableCollection<int> _data;
        public ObservableCollection<int> data
        {
            get
            {
                return _data;
            }
            set
            {
                _data = value;
                onpropertychanged("data");
            }
        }
    }



<ItemsControl Name="schedule">
            <ItemsControl.Resources>
                <converters:OnOffColorConverter x:Key="colorConverter"/>
            </ItemsControl.Resources>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Canvas Height="20">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding data[0]}" />
                            <TextBlock Text="-" />
                            <TextBlock Text="{Binding data[1]}" />
                        </StackPanel>
                    </Canvas>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>


Was This Post Helpful? 0
  • +
  • -

#4 tlhIn`toq  Icon User is offline

  • Xamarin Cert. Dev.
  • member icon

Reputation: 6507
  • View blog
  • Posts: 14,377
  • Joined: 02-June 10

Re: Build Schedule Interface with Int Array and Databinding

Posted 15 July 2013 - 12:02 PM

Quote

Is there a better way to draw shapes on the screen? Canvas?

Stop thinking about drawing shapes. This is not 1980. You want to think as Displaying Controls. Use the controls that are available. They all have background color as a property.

You can define a ControlTemplate for example that defines an Appointment control as having a red border of 3 points with a 5 point corner radius and a grey background {as the default}

You could use a ListView and have alternating color rows.
You could use a DockPanel and keep adding as
DockPanel.Dock = "Bottom"


I would probably make an Appointment control with a ControlTemplate as I mentioned above, then use that in some flavor of container that I liked such as a ItemsControl, ListView or StackPanel.

I assume the user selects the color from an enum of status:
Status.Busy
Status.Free
Status.OutOfOffice
Status.OutOfMind
Status.Meeting
Status.Drunk

Which could be mapped to an enum of color choices by making a custom converter class.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1