84 - Display those alarms
Got some good work in today, despite my son waking up almost two hours early. Little bastard. Anyways, today mostly focused on the UI stuff for the alarm clock. It's not finished yet, but got a good amount done for only working an hour on it. So I guess today we can cover DataGrid in WPF. XAML and WPF is not really my strong suit, I'm more of a backend guy. But luckily my google-fu is good enough to get me by. Although it might look ugly. Okay, so what is a DataGrid? Well it's basically a table that let's you grammatically change stuff about it. You can add rows or columns in the code if you need to. It also has this really cool thing with data binding. I'll be honestly, I'm not 100% sure how data binding works, but I know how to use it. and in this case I pretty much bind it to a list and anything added to that list will be added to the DataGrid. <DataGrid x:Name="AlarmGrid" HorizontalAlignment="Center" Margin="0,25,0,0" VerticalAlignment="Top" Height="375" Width="850" ScrollViewer.CanContentScroll="True" CanUserAddRows="False" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTextColumn Header="Alarm Type" Binding="{Binding AlarmType}"/> <DataGridTextColumn Header="Alarm Time" Binding="{Binding AlarmTime}" Width="*"/> <DataGridTemplateColumn Header="Edit"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Button Click="EditAlarm" CommandParameter="{Binding ID}">Edit</Button> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> <DataGridTemplateColumn Header="Delete"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Button Click="DeleteAlarm" CommandParameter="{Binding ID}">Delete</Button> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid> Alright so this is basically the code for displaying all the alarms that are currently active. Let's ignore all the formatting stuff like margin, height, width, etc and instead cover the details of how it works. So we have the tag DataGrid.Columns, within this we define our 4 columns. First we have two columns that are just text, so we don't have to do anything complex. You can see we set Binding in the tags, I'll go more into detail how that works later, when we get to the code side. The next two columns we set up a DataTemplate to buttons will be displayed. This time we don't set a binding to change the text, because the text will be the same. Instead we set the binding to the ID, that way we know which button the user clicked on. public AlarmTimer(MainWindow window) { TimeForAlarms = new List(); window.AlarmGrid.ItemsSource = TimeForAlarms; for testing display var temp = new DailyAlarm(0, 5,34); TimeForAlarms.Add(temp); //other stuff } Okay let's quickly show how we are setting the binding. We have this list of TimeForAlarm, and if you remember from last time, that's an abstract class that has three subclasses for the different types of alarms. With that list we are just setting the DataGrids ItemsSource to that list. So let's show how you have to set the variables in a class to have the data binding work correctly. public abstract class TimeForAlarm { public string AlarmType { get; set; } public string AlarmTime { get; set; } public int ID { get; set; } //more stuff } So as you can see, we have those three properties. Now what is a property. In effect it's basically a class level variable. The difference is they can be used in stuble different ways. I don't know all the details, but basically, use whatever you prefer and use the other when you need to. public class WeeklyAlarm : TimeForAlarm { private List Days; public WeeklyAlarm(int id, List days, int hour, int minuites) { ID = id; AlarmType = "Weekly"; SetTime(days, hour, minuites); } public void SetTime(List days, int hour, int minuite) { Days = days; Alarm = new DateTime(1, 1, 1, hour, minuite, 0); AlarmTime = Alarm.ToShortTimeString() + " on " + String.Join(", " , days.OrderBy(x => x).Select(x => x.ToString())); } } Here you can see in the constructor we are setting all those properties to whatever we need to. Then once this object is added to that list we talked about before, boom, it's added to the DataGrid. This is all pretty basic stuff, and some of it we have covered, but I want to talk about one line, mainly cause it's a fun line of code. The last line where we set AlarmTime we have some string manipulation nonsense. So what is going on with the String.Join method? Well we are taking the list Days, a list of DayOfWeek objects, and joining them together with a ", " between each of them. Well we can't just pass that because they are objects, not strings, so we have to call .Select(x => x.ToString(). That will return everything in a list after it has called ToString on it. Then before that line we are calling OrderBy(x => x) to order by the days. That way the days wont show up in just the order we added them. That's pretty much most of what I did today. Hopefully you found some of this interesting or informative. Anyways tomorrow will be the video, not sure if I will write a blog post or not on Wednesday. Also here is a picture of how the main window looks after all that code!
4/10/2018 9:54:27 PM

Add Comment Auther