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 GitHubchristian289/dotnet-with-claudecode
wpf-dev-pack
January 23, 2026
Select agents to install to:
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-indexInstallation paths:
.claude/skills/displaying-slider-index/# 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