Back to Skills

displaying-slider-index

verified

Displays 0-based collection indices as 1-based numbers in WPF Slider controls. Use when showing user-friendly slice/page numbers while maintaining 0-based internal indexing.

View on GitHub

Marketplace

dotnet-claude-plugins

christian289/dotnet-with-claudecode

Plugin

wpf-dev-pack

development

Repository

christian289/dotnet-with-claudecode
5stars

wpf-dev-pack/skills/displaying-slider-index/SKILL.md

Last Verified

January 23, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/christian289/dotnet-with-claudecode/blob/main/wpf-dev-pack/skills/displaying-slider-index/SKILL.md -a claude-code --skill displaying-slider-index

Installation paths:

Claude
.claude/skills/displaying-slider-index/
Powered by add-skill CLI

Instructions

# WPF Slider 0-based Index Display Pattern

## Problem Scenario

When displaying collection indices with a slider, **internally using 0-based index** but **displaying as 1-based to users** is a common requirement.

### Symptoms
- 120 images exist but displayed as "0 / 120" ~ "119 / 120"
- Users expect "1 / 120" ~ "120 / 120"
- Dragging slider to the end doesn't reach the last item

### Cause
- If slider's `Maximum` is set to `TotalCount`, it exceeds the valid range
- Displaying 0-based index directly confuses users

---

## Solution

### Add Display Properties to ViewModel

```csharp
public partial class ViewerViewModel : ObservableObject
{
    // Internal index (0-based)
    [NotifyPropertyChangedFor(nameof(SliceDisplayNumber))]
    [ObservableProperty] private int _currentSliceIndex;

    // Total count
    [NotifyPropertyChangedFor(nameof(MaxSliceIndex))]
    [ObservableProperty] private int _totalSliceCount;

    /// <summary>
    /// Slider Maximum value (0-based index maximum)
    /// </summary>
    public int MaxSliceIndex => Math.Max(0, TotalSliceCount - 1);

    /// <summary>
    /// User display number (1-based)
    /// </summary>
    public int SliceDisplayNumber => CurrentSliceIndex + 1;
}
```

### XAML Binding

```xml
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <!-- Current number (1-based display) -->
    <TextBlock Grid.Column="0"
               Text="{Binding SliceDisplayNumber}" />

    <!-- Slider (0-based index, Maximum is Count-1) -->
    <Slider Grid.Column="1"
            Minimum="0"
            Maximum="{Binding MaxSliceIndex}"
            Value="{Binding CurrentSliceIndex}" />

    <!-- Total count -->
    <TextBlock Grid.Column="2"
               Text="{Binding TotalSliceCount}" />
</Grid>
```

---

## Key Points

| Property | Value Range | Purpose |
|----------|-------------|---------|
| `Curr

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
2723 chars