Borders won't appear on UserControl Instances

Question

I have created a custom control that utilizes pre-existing WPF controls. Inside the control I made some borders that visually separates the individual elements.

Here's the XAML code for the UserControl: TimeEntry:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="ClockWatcher.TimeEntry"
    x:Name="UserControl"
    d:DesignWidth="365" d:DesignHeight="40" VerticalAlignment="Top" HorizontalAlignment="Left">
    <UserControl.Resources>
        <Thickness x:Key="borderDim">0,0,1,0</Thickness>
        <Thickness x:Key="labelPadding">2,0</Thickness>
        <Color x:Key="borderColor">#FF151E3E</Color>
        <Color x:Key="buttonColorBackground">#FFB3D6E6</Color>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Border x:Name="mainBorder" BorderThickness="3" CornerRadius="1" Padding="1" Background="#FF9DB6BF" HorizontalAlignment="Left" VerticalAlignment="Top">
            <Border.BorderBrush>
                <SolidColorBrush Color="{DynamicResource borderColor}"/>
            </Border.BorderBrush>
            <Grid x:Name="borderGrid">
                <StackPanel x:Name="mainStack" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top">
                    <Border x:Name="timeInBorder" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="{DynamicResource borderDim}" Padding="{DynamicResource labelPadding}">
                        <Border.BorderBrush>
                            <SolidColorBrush Color="{DynamicResource borderColor}"/>
                        </Border.BorderBrush>
                        <StackPanel x:Name="timeInStack" Orientation="Vertical" Height="31.92" Width="50.46">
                            <Label x:Name="timeInLabel" Content="Time In" VerticalAlignment="Top" Padding="{DynamicResource labelPadding}" BorderThickness="0,0,0,1">
                                <Label.BorderBrush>
                                    <SolidColorBrush Color="{DynamicResource borderColor}"/>
                                </Label.BorderBrush>
                            </Label>
                            <TextBlock x:Name="timeInBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding timeIn.TimeOfDay, ElementName=UserControl}" VerticalAlignment="Top"/>
                        </StackPanel>
                    </Border>
                    <Border x:Name="timeOutBorder" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="{DynamicResource borderDim}" Padding="{DynamicResource labelPadding}">
                        <Border.BorderBrush>
                            <SolidColorBrush Color="{DynamicResource borderColor}"/>
                        </Border.BorderBrush>
                        <StackPanel x:Name="timeOutStack" Orientation="Vertical" Height="31.92" Width="54.46">
                            <Label x:Name="timeOutLabel" Content="Time Out" HorizontalAlignment="Left" VerticalAlignment="Top" Padding="{DynamicResource labelPadding}" BorderThickness="0,0,0,1">
                                <Label.BorderBrush>
                                    <SolidColorBrush Color="{DynamicResource borderColor}"/>
                                </Label.BorderBrush>
                            </Label>
                            <TextBlock x:Name="timeOutBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding timeOut.TimeOfDay, ElementName=UserControl}" VerticalAlignment="Top" Padding="{DynamicResource labelPadding}"/>
                        </StackPanel>
                    </Border>
                    <Border x:Name="timeSpentBorder" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="{DynamicResource borderDim}" Padding="{DynamicResource labelPadding}">
                        <Border.BorderBrush>
                            <SolidColorBrush Color="{DynamicResource borderColor}"/>
                        </Border.BorderBrush>
                        <StackPanel x:Name="timeSpentStack" Orientation="Vertical" Height="31.92" Width="63.653">
                            <Label x:Name="timeSpentLabel" Content="Time Spent" HorizontalAlignment="Left" VerticalAlignment="Top" Padding="{DynamicResource labelPadding}" BorderThickness="0,0,0,1">
                                <Label.BorderBrush>
                                    <SolidColorBrush Color="{DynamicResource borderColor}"/>
                                </Label.BorderBrush>
                            </Label>
                            <TextBlock x:Name="timeSpentBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding timeSpent,ElementName=UserControl}" VerticalAlignment="Top" Padding="{DynamicResource labelPadding}"/>
                        </StackPanel>
                    </Border>
                    <Button x:Name="alarmButton" Content="Alarm" HorizontalAlignment="Center" BorderThickness="0,0,1,0">
                        <Button.Background>
                            <SolidColorBrush Color="{DynamicResource buttonColorBackground}"/>
                        </Button.Background>
                        <Button.BorderBrush>
                            <SolidColorBrush Color="{DynamicResource borderColor}"/>
                        </Button.BorderBrush>
                    </Button>
                    <StackPanel x:Name="commentStack1" Orientation="Horizontal">
                        <TextBox x:Name="commentBox" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding comment,ElementName=UserControl}" VerticalAlignment="Top" Padding="{DynamicResource labelPadding}" BorderThickness="0" SourceUpdated="commentBox_SourceUpdated">
                            <TextBox.BorderBrush>
                                <SolidColorBrush Color="{DynamicResource borderColor}"/>
                            </TextBox.BorderBrush>
                        </TextBox>
                        <Button x:Name="commentButton" VerticalAlignment="Top" Content="Ad" BorderThickness="1,0" Padding="{DynamicResource labelPadding}">
                            <Button.Background>
                                <SolidColorBrush Color="{DynamicResource buttonColorBackground}"/>
                            </Button.Background>
                            <Button.BorderBrush>
                                <SolidColorBrush Color="{DynamicResource borderColor}"/>
                            </Button.BorderBrush>
                        </Button>
                    </StackPanel>
                    <Button x:Name="deleteButton" Content="X" Padding="{DynamicResource labelPadding}" HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="{x:Null}" BorderThickness="{DynamicResource borderDim}">
                        <Button.Background>
                            <SolidColorBrush Color="{DynamicResource buttonColorBackground}"/>
                        </Button.Background>
                    </Button>
                </StackPanel>

            </Grid>
        </Border>
    </Grid>
</UserControl>

In Blend, or the designer view in VS2013, the borders will appear just fine. However, when I place an instance of this control into a grid in the MainWindow, the borders won't appear.

All I do is this in MainWindow:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ClockWatcher" x:Class="ClockWatcher.MainWindow"
        Title="MainWindow" Height="554" Width="949">
    <Window.Resources>
        <UserControl x:Key="timeEntry"/>
    </Window.Resources>
    <Grid x:Name="mainGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250*"/>
            <ColumnDefinition Width="445*"/>
            <ColumnDefinition Width="246*"/>
        </Grid.ColumnDefinitions>
        <Grid x:Name="leftGrid" Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
        </Grid>
        <Grid x:Name="rightGrid" Grid.Column="2">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
        </Grid>
        <ScrollViewer x:Name="timeEntryList" Grid.Column="1" HorizontalAlignment="Left">
            <StackPanel x:Name="scrollStack" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left">
                <local:TimeEntry/>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Window>

Can someone help me find out what I did wrong here? I've been reading a book to find out about dependency objects and dependency properties, which I've also added the UserControl, but I'm not sure what's really wrong with it right now.

Answer 1

Declare all these resources in App.xaml and it will work,

<Application.Resources>
    <Thickness x:Key="borderDim">0,0,1,0</Thickness>
    <Thickness x:Key="labelPadding">2,0</Thickness>
    <Color x:Key="borderColor">#FF151E3E</Color>
    <Color x:Key="buttonColorBackground">#FFB3D6E6</Color>
</Application.Resources>