Building a Construction Daily Report System with Silverlight

  • Interactive date grid with visual indicators
  • Status marking system (complete/incomplete)
  • Progress tracking with visual feedback
  • Context menu operations
  • Full-screen mode support

Silverlight-JavaScript Integration

The system implements bidirectional communication between Silverlight and JavaScript: ``` public class ShowPlans { public ShowPlans() { HtmlPage.RegisterScriptableObject("PlanView", this); }

[ScriptableMember()]
public void ShowProgress()
{
    progressPanel.Visibility = Visibility.Visible;
    ToggleControls(false);
}

[ScriptableMember()]
public void HideProgress(string message)
{
    progressPanel.Visibility = Visibility.Collapsed;
    ToggleControls(true);
    MessageBox.Show(message);
}

}


JavaScript handler implementation: ```
function PlanViewSave(jsonData) {
    setTimeout(function() {
        slControl.Content.PlanView.HideProgress("Operation completed!");
    }, 6000);
}

Date Grid Implementation

The dynamic grid generation handles different time periods (daily/weekly/monthly): ``` private void GenerateDateGrid(List<PlanData> plans) { // Create columns for plan names for (int i = 0; i < nameColumns; i++) { grid.ColumnDefinitions.Add(new ColumnDefinition { MinWidth = 180, Width = GridLength.Auto }); }

// Create date columns
for (int i = 0; i < dateColumnCount + 1; i++)
{
    grid.ColumnDefinitions.Add(new ColumnDefinition());
}

// Generate header row
grid.RowDefinitions.Add(new RowDefinition());

// Additional grid generation logic...

}


### Status Management

The system provides multiple ways to mark items as complete: ```
private void MarkAsComplete(Rectangle target)
{
    if (target == null) return;

    int row, col, startCol, endCol;
    GetCellParameters(target, out row, out col, out startCol, out endCol);

    var dateCell = GetPlanDate(row);
    if (dateCell == null || dateCell.IsComplete) return;

    dateCell.IsComplete = true;
    dateCell.IsModified = true;
    
    UpdateVisualState(row, true);
    UpdateContextMenu(row, false);
}

Visual Styling

The system applies dynamic styling based on status: ``` private void ApplyCellStyle(Rectangle cell, int dateIndex, bool isSelected) { if (dateIndex < rowColors.Count) { cell.Fill = rowColors[dateIndex]; } else { cell.Fill = rowColors[0]; }

cell.Tag = $"{(isSelected ? "1" : "0")}-{dateIndex}";

}


### Data Submission

The submission process includes validation and progress feedback: ```
private void SubmitData()
{
    // Validate required fields
    foreach (var plan in plansData)
    {
        if (!plan.AllowEmpty && !plan.IsComplete)
        {
            ShowWarning(plan);
            return;
        }
    }

    ShowProgress();
    HtmlPage.Window.Invoke("PlanViewSave", 
        JsonConvert.SerializeObject(plansData));
}

Tags: Silverlight WPF XAML javascript construction

Posted on Thu, 16 Jul 2026 17:20:48 +0000 by poncho4u