Status Bar
Status Bar란?
Status Bar는 애플리케이션 창의 하단에 위치하는 UI 요소로, 현재 애플리케이션 상태, 진행 상황, 또는 컨텍스트 정보를 사용자에게 표시하는 데 사용됩니다. Status Bar는 대개 읽기 전용으로 작동하며, 사용자 작업에 따라 동적으로 업데이트됩니다.
Status Bar의 특징
위치
- 대부분 창의 하단에 고정되어 있습니다.
목적
- 애플리케이션의 현재 상태를 표시합니다.
- 사용자 작업이나 시스템 이벤트의 피드백을 제공합니다.
- 추가적인 컨텍스트 정보를 표시합니다(예: 마우스 좌표, 현재 페이지, 진행률).
구성 요소
- 텍스트 블록: 상태 메시지 표시.
- 아이콘: 네트워크 상태나 오류 알림 등 시각적 정보를 표시.
- 프로그레스 바: 작업 진행 상황을 표시.
상호작용
- 대개 읽기 전용이며, 사용자 상호작용은 제한적입니다.
- 일부 애플리케이션에서는 Status Bar에 버튼이나 드롭다운 메뉴를 추가하기도 합니다.
Status Bar의 일반적인 사용 사례
텍스트 상태 메시지
- “저장 중…”, “작업 완료”, “네트워크 연결 끊김” 등의 정보를 표시.
작업 진행 상황
- 작업이 진행 중일 때, 진행률을 프로그레스 바로 시각화.
애플리케이션 상태
- 현재 편집 중인 파일 이름, 라인 및 열 번호, 선택된 도구 등을 표시(예: 텍스트 편집기).
네트워크 상태
- 클라이언트-서버 애플리케이션에서는 연결 상태를 표시.
사용자 피드백
- 오류 발생 시 Status Bar에 메시지를 출력해 사용자에게 피드백 제공.
Status Bar의 구성 요소
TextBlock
- 상태 메시지를 간단하게 표시합니다.
- 예: “저장 완료”, “로딩 중…”
<StatusBar>
<TextBlock>Ready</TextBlock>
</StatusBar>Icon
- 시각적으로 상태를 표시하기 위해 아이콘을 추가할 수 있습니다.
- 예: 저장 상태, 경고 메시지 등.
<StatusBar>
<TextBlock>Network:</TextBlock>
<Image Source="network_connected.png" Width="16" Height="16" />
</StatusBar>ProgressBar
- 작업 진행 상황을 표시합니다.
- 예: 파일 다운로드 진행률.
<StatusBar>
<TextBlock>Loading...</TextBlock>
<ProgressBar Width="100" Height="16" IsIndeterminate="True" />
</StatusBar>다중 영역
- Status Bar를 여러 영역으로 나눠 정보를 표시할 수 있습니다.
- 예: 왼쪽에 상태 메시지, 오른쪽에 날짜와 시간.
<StatusBar>
<StatusBar.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</StatusBar.ItemsPanel>
<TextBlock Grid.Column="0">Ready</TextBlock>
<TextBlock Grid.Column="1">12:00 PM</TextBlock>
</StatusBar>Status Bar 사용 예제
Status Bar에 실시간 데이터 표시
실시간 데이터를 Status Bar에 표시하면 사용자에게 중요한 정보를 즉시 제공할 수 있습니다.
<StatusBar>
<StatusBarItem>
<TextBlock Text="Network Speed:" />
</StatusBarItem>
<StatusBarItem>
<TextBlock Text="{Binding NetworkSpeed}" />
</StatusBarItem>
</StatusBar>// ViewModel에서 실시간 데이터 업데이트
public string NetworkSpeed
{
get => _networkSpeed;
set
{
_networkSpeed = value;
OnPropertyChanged();
}
}
// 네트워크 속도 업데이트 로직 (Timer로 반복)
private void UpdateNetworkSpeed()
{
NetworkSpeed = $"{GetCurrentNetworkSpeed()} Mbps";
}사용자 상호작용 Status Bar
Status Bar에 버튼이나 메뉴를 추가하여 사용자 상호작용을 유도합니다.
예제: 버튼을 통한 세부 정보 표시
<StatusBar>
<StatusBarItem>
<TextBlock Text="Error occurred." />
</StatusBarItem>
<StatusBarItem>
<Button Content="Details" Click="ShowErrorDetails" />
</StatusBarItem>
</StatusBar>private void ShowErrorDetails(object sender, RoutedEventArgs e)
{
MessageBox.Show("Here are the details of the error.");
}다중 영역 Status Bar
여러 개의 영역을 나눠 정보를 그룹화하여 효율적으로 표시합니다.
예제: 영역별 정보 표시
<StatusBar>
<StatusBarItem>
<TextBlock Text="Ready" />
</StatusBarItem>
<StatusBarItem HorizontalAlignment="Right">
<TextBlock Text="Logged in as: Admin" />
</StatusBarItem>
<StatusBarItem HorizontalAlignment="Right">
<TextBlock Text="12:45 PM" />
</StatusBarItem>
</StatusBar>Status Bar와 애니메이션
애니메이션을 활용해 사용자 피드백을 제공하거나 진행 상태를 시각적으로 표시합니다.
예제: 로딩 애니메이션 추가
<StatusBar>
<StatusBarItem>
<TextBlock Text="Loading..." />
</StatusBarItem>
<StatusBarItem>
<ProgressBar Width="100" Height="16" IsIndeterminate="True" />
</StatusBarItem>
</StatusBar>Status Bar와 알림 시스템 통합
Status Bar를 알림 시스템과 통합하여 사용자에게 중요한 이벤트를 알려줍니다.
예제: 알림 메시지 표시
<StatusBar>
<StatusBarItem>
<TextBlock Text="{Binding NotificationMessage}" />
</StatusBarItem>
</StatusBar>// 알림 메시지 업데이트
private void NotifyUser(string message)
{
NotificationMessage = message;
Task.Delay(5000).ContinueWith(_ => NotificationMessage = "Ready"); // 5초 후 기본 상태로 복원
}확장 기능
사용자 정의 드롭다운 Status Bar
Status Bar에 드롭다운 메뉴를 추가해 복잡한 정보나 작업을 효율적으로 표시합니다.
예제: 작업 선택 드롭다운
<StatusBar>
<StatusBarItem>
<ComboBox Width="120" SelectedIndex="0">
<ComboBoxItem Content="Task 1" />
<ComboBoxItem Content="Task 2" />
<ComboBoxItem Content="Task 3" />
</ComboBox>
</StatusBarItem>
</StatusBar>Status Bar와 테마 통합
Status Bar의 색상과 스타일을 애플리케이션 테마와 동기화하여 UI 일관성을 유지합니다.
예제: MahApps.Metro와 테마 통합
<StatusBar Background="{DynamicResource MahApps.Brushes.Accent}">
<StatusBarItem>
<TextBlock Foreground="{DynamicResource MahApps.Brushes.AccentForeground}" Text="Ready" />
</StatusBarItem>
</StatusBar>사용자 정의 컨트롤 삽입
Status Bar에 사용자 정의 컨트롤(예: 그래프, 상태 시각화)을 삽입하여 정보를 더욱 풍부하게 제공합니다.
예제: CPU 사용량 그래프
<StatusBar>
<StatusBarItem>
<TextBlock Text="CPU Usage:" />
</StatusBarItem>
<StatusBarItem>
<ProgressBar Width="100" Height="16" Value="{Binding CpuUsage}" />
</StatusBarItem>
</StatusBar>Status Bar와 국제화(I18N)
Status Bar에 표시되는 메시지를 다국어 지원하도록 설정합니다.
예제: 다국어 메시지 지원
public string StatusMessage => Resources.StatusReady; // 리소스 파일에서 로드<StatusBar>
<StatusBarItem>
<TextBlock Text="{Binding StatusMessage}" />
</StatusBarItem>
</StatusBar>
Buy me a coffee