Hey Guys,

I'm starting a WPF project, and just finished the base of the UI, it seems very convoluted though, so I'm not sure if I've gone around laying it out in the right way. I don't want to get to start developing the back-end and realise that I've done the front wrong, and make life harder for myself.

Coming from a background of <DIV>'s and CSS to style this is a lot different, and really want to get it right from the start.

Essentially it's a one week calendar (7 days, Mon-Sunday, defaulting to the current week.) Which will eventually link up to a DB and if I have an appointment for something on this day it will show it in the relevant day.

I've opted for a Grid rather than ListView because of the way it will work I will not be binding the results to a collection or anything along those lines. Rather I will be filling out a Combo box within the canvas for each day (yet to be placed in the code) for each event and on selection it will show me further details.

XAML:

<Window x:Class="WOW_Widget.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="clr-namespace:System;assembly=mscorlib"
    xmlns:Extensions="clr-namespace:WOW_Widget"
    DataContext="{Binding RelativeSource={RelativeSource Self}}"
    Title="Window1" Height="239" Width="831">

    <Window.Resources>
        <LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Offset="1.0" Color="White"/>
                    <GradientStop Offset="0.0" Color="LightSlateGray"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="grdDayHeader" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Offset="0.0" Color="Peru" />
                    <GradientStop Offset="1.0" Color="White" />
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="grdToday" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Offset="0.0" Color="LimeGreen"/>
                    <GradientStop Offset="1.0" Color="DarkGreen" />
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <Style TargetType="{x:Type GridViewColumnHeader}">
            <Setter Property="Background" Value="Khaki" />
        </Style>
        <Style x:Key="DayHeader" TargetType="{x:Type Label}">
            <Setter Property="Background" Value="{StaticResource grdDayHeader}" />
            <Setter Property="Width" Value="111" />
            <Setter Property="Height" Value="25" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
        </Style>
        <Style x:Key="DayField">
            <Setter Property="Canvas.Width" Value="111" />
            <Setter Property="Canvas.Height" Value="60" />
            <Setter Property="Canvas.Background" Value="White" />
        </Style>
        <Style x:Key="Today">
            <Setter Property="Canvas.Background" Value="{StaticResource grdToday}" />
        </Style>
        <Style x:Key="CalendarColSpacer">
            <Setter Property="Canvas.Width" Value="1" />
            <Setter Property="Canvas.Background" Value="Black" />
        </Style>
        <Style x:Key="CalendarRowSpacer">
            <Setter Property="Canvas.Height" Value="1" />
            <Setter Property="Canvas.Background" Value="Black" />
        </Style>
    </Window.Resources>

    <Grid Background="{StaticResource NormalBrush}">
        <Border BorderBrush="Black" BorderThickness="1" Width="785" Height="86" Margin="12,12,12,104">
            <Canvas Height="86" Width="785" VerticalAlignment="Top">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Label Grid.Column="0" Grid.Row="0" Content="Monday" Style="{StaticResource DayHeader}" />
                    <Canvas Grid.Column="1" Grid.RowSpan="3" Grid.Row="0"  Style="{StaticResource CalendarColSpacer}" />
                    <Label Grid.Column="2" Grid.Row="0" Content="Tuesday" Style="{StaticResource DayHeader}" />
                    <Canvas Grid.Column="3" Grid.RowSpan="3" Grid.Row="0"  Style="{StaticResource CalendarColSpacer}" />
                    <Label Grid.Column="4" Grid.Row="0" Content="Wednesday" Style="{StaticResource DayHeader}" />
                    <Canvas Grid.Column="5" Grid.RowSpan="3" Grid.Row="0"  Style="{StaticResource CalendarColSpacer}" />
                    <Label Grid.Column="6" Grid.Row="0" Content="Thursday" Style="{StaticResource DayHeader}" />
                    <Canvas Grid.Column="7" Grid.RowSpan="3" Grid.Row="0"  Style="{StaticResource CalendarColSpacer}" />
                    <Label Grid.Column="8" Grid.Row="0" Content="Friday" Style="{StaticResource DayHeader}" />
                    <Canvas Grid.Column="9" Grid.RowSpan="3" Grid.Row="0"  Style="{StaticResource CalendarColSpacer}" />
                    <Label Grid.Column="10" Grid.Row="0" Content="Saturday" Style="{StaticResource DayHeader}" />
                    <Canvas Grid.Column="11" Grid.RowSpan="3" Grid.Row="0"  Style="{StaticResource CalendarColSpacer}" />
                    <Label Grid.Column="12" Grid.Row="0" Content="Sunday" Style="{StaticResource DayHeader}" />

                    <Canvas Grid.Column="0" Grid.ColumnSpan="13" Grid.Row="1" Style="{StaticResource CalendarRowSpacer}" />

                    <Canvas Grid.Column="0" Grid.Row="2" Margin="0" Style="{StaticResource DayField}">
                        <Label Name="lblMondayDate" />
                    </Canvas>
                    <Canvas Grid.Column="2" Grid.Row="2" Margin="0" Style="{StaticResource DayField}">
                        <Label Name="lblTuesdayDate" />
                    </Canvas>
                    <Canvas Grid.Column="4" Grid.Row="2" Margin="0" Style="{StaticResource DayField}">
                        <Label Name="lblWednesdayDate" />
                    </Canvas>
                    <Canvas Grid.Column="6" Grid.Row="2" Margin="0" Style="{StaticResource DayField}">
                        <Label Name="lblThursdayDate" />
                    </Canvas>
                    <Canvas Grid.Column="8" Grid.Row="2" Margin="0" Style="{StaticResource DayField}">
                        <Label Name="lblFridayDate" />
                    </Canvas>
                    <Canvas Grid.Column="10" Grid.Row="2" Margin="0" Style="{StaticResource DayField}">
                        <Label Name="lblSaturdayDate" />
                    </Canvas>
                    <Canvas Grid.Column="12" Grid.Row="2" Margin="0" Style="{StaticResource DayField}">
                        <Label Name="lblSundayDate" />
                    </Canvas>
                </Grid>
            </Canvas>
        </Border>
        <Canvas Height="86" HorizontalAlignment="Right" Margin="0,0,12,12" Name="canvas1" VerticalAlignment="Bottom" Width="198"></Canvas>        
    </Grid>
</Window>

CS:

    public partial class Window1 : Window {
        private DateTime today = new DateTime();
        private Label[] Dates = new Label[7];
        public Window1() {
            DateTime start = today = DateTime.Now;
            int day = (int)today.DayOfWeek;
            while (day != 1) {
                start = start.Subtract(new TimeSpan(1, 0, 0, 0));
                day--;
            }
            InitializeComponent();
            Dates[0] = lblMondayDate;
            Dates[1] = lblTuesdayDate;
            Dates[2] = lblWednesdayDate;
            Dates[3] = lblThursdayDate;
            Dates[4] = lblFridayDate;
            Dates[5] = lblSaturdayDate;
            Dates[6] = lblSundayDate;
            FillWeek(start);
        }

        private void FillWeek(DateTime start) {
            for (int d = 0; d < Dates.Length; d++) {
                TimeSpan td = new TimeSpan(d, 0, 0, 0);
                DateTime _day = start.Add(td);
                if (_day.Date == today.Date) {
                    Canvas dayCanvas = (Canvas)Dates[d].Parent;
                    dayCanvas.Style = (Style)this.Resources["Today"];
                }
                Dates[d].Content = (int)start.Add(td).Day;
            }
        }
    }

Thanks for any tips you guys can give

Psytronic