WPF 페이지 컨트롤 의 전 과정 기록 사용자 정의
위의 그림 과 같은 페이지 컨트롤 을 실현 하려 면 몇 가지 기능 이 필요 합 니 다.
상기 기능 을 실현 하기 위해 주로 다음 과 같은 업 무 를 진행한다.
1.사용자 정의 단추 PagerButton 클래스 를 추가 합 니 다.속성 에 의존 하 는 IsActive 를 설명 합 니 다.현재 페이지 의 페이지 수 를 기록 하 는 단 추 를 표시 합 니 다.이 단 추 는 테두리 가 하 이 라이트 로 표 시 됩 니 다.구체 적 인 코드 는 다음 과 같 습 니 다.
public class PagerButton : Button
{
public bool IsActive
{
get { return (bool)GetValue(IsActiveProperty); }
set { SetValue(IsActiveProperty, value); }
}
public static readonly DependencyProperty IsActiveProperty =
DependencyProperty.Register("IsActive", typeof(bool), typeof(PagerButton), new PropertyMetadata(false));
}
<Style x:Key="PagerButtonStyle" TargetType="controls:PagerButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:PagerButton">
<Border x:Name="b1" CornerRadius="2" Background="{StaticResource Themes}"
BorderThickness="1" BorderBrush="{StaticResource Disabled}"
Width="32" Height="32" Margin="4,0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="b1" Property="BorderBrush" Value="{StaticResource Accent}"></Setter>
</Trigger>
<Trigger Property="IsActive" Value="True">
<Setter TargetName="b1" Property="BorderBrush" Value="{StaticResource Accent}"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
2.사용자 정의 페이지 컨트롤 PagerBar 클래스 를 추가 하여 페이지 단추(PagerButton 클래스 사용)를 보 여주 고 페이지 전환 을 실현 하려 면 현재 페이지,전체 페이지 수,설정 한 페이지 당 최대 열 수 3 개의 의존 속성 을 정의 해 야 합 니 다.구체 적 으로 다음 과 같 습 니 다.
public int CurrentPageIndex
{
get { return (int)GetValue(CurrentPageIndexProperty); }
set { SetValue(CurrentPageIndexProperty, value); }
}
public int PageSize
{
get { return (int)GetValue(PageSizeProperty); }
set { SetValue(PageSizeProperty, value); }
}
public int PageCount
{
get { return (int)GetValue(PageCountProperty); }
set { SetValue(PageCountProperty, value); }
}
public static readonly DependencyProperty CurrentPageIndexProperty = DependencyProperty.Register("CurrentPageIndex", typeof(int), typeof(PagerBar), new PropertyMetadata(-1, CurrentPageIndexPropertyChangedCallback));
public static readonly DependencyProperty PageSizeProperty = DependencyProperty.Register("PageSize", typeof(int), typeof(PagerBar), new PropertyMetadata(10, PageSizePropertyChangedCallback));
public static readonly DependencyProperty PageCountProperty = DependencyProperty.Register("PageCount", typeof(int), typeof(PagerBar), new PropertyMetadata(-1, PageCountPropertyChangedCallback));
3.도구 클래스 Pager 를 추가 합 니 다.데 이 터 를 요구 에 따라 페이지 를 나 누 는 데 사 용 됩 니 다.이 도구 클래스 는 현재 페이지 수,총 페이지 수,설정 한 페이지 당 최대 열 세 개의 속성 을 설명 합 니 다.구체 적 으로 다음 과 같 습 니 다.
public int PageSize
{
get => _pageSize;
set
{
if (value == _pageSize)
return;
_pageSize = value;
OnPropertyChanged();
SetPageSize(_pageSize);
}
}
public int PageCount
{
get => _pageCount;
set
{
if (value == _pageCount)
return;
_pageCount = value;
// 1
if (_pageCount == 0)
_pageCount = 1;
OnPropertyChanged();
}
}
public int CurPageIndex
{
get => _curPageIndex;
set
{
if (value == _curPageIndex)
return;
_curPageIndex = value;
OnPropertyChanged();
GotoPageOf(_curPageIndex);
}
}
4.Pager 클래스 와 PageBar 컨트롤 을 데이터 로 연결 합 니 다.구체 적 인 체 조 는 바 인 딩 된 ViewModel 에 Pager 류 를 설명 한 다음 에 이 Pager 류 의 속성 과 PagrBar 를 일일이 바 인 딩 합 니 다.구체 적 인 코드 는 다음 과 같다.
<controls:PagerBar Grid.Row="1" Margin="5"
HorizontalAlignment="Center"
PageSize="{Binding Path=Pager.PageSize, Mode=TwoWay}"
PageCount="{Binding Path=Pager.PageCount, Mode=TwoWay}"
CurrentPageIndex="{Binding Path=Pager.CurPageIndex, Mode=TwoWay}"></controls:PagerBar>
5.Pager 클래스 를 초기 화 할 때 화면 에 연 결 된 ViewModel 에서 하나의 배열 을 다시 설명 합 니 다.페이지 뒤의 배열 을 저장 할 때 이 배열 을 보 여 줄 항목 컨트롤(예 를 들 어 ListBox)에 연결 합 니 다.구체 적 으로 다음 과 같 습 니 다.
StudentCollection=new ObservableCollection<Student>();
for (int i = 0; i < 10; i++)
{
StudentCollection.Add(new Student()
{
Id = Index = i,
Source = 10 * (i + 1),
});
}
AddCommand =new RelayCommand(ExecuteAddCommand);
DeleteCommand=new RelayCommand(ExecuteDeleteCommand);
SortCommand=new RelayCommand(ExecuteSortCommand);
Pager=new Pager<Student>(8,StudentCollection);
Pager.PagerUpdated += items =>
{
StudentCollectionPaging = new ObservableCollection<Student>(items);
};
Pager.CurPageIndex = 1;
<ListBox x:Name="ListBoxStudent" Grid.Row="0"
ItemsSource="{Binding StudentCollectionPaging}"
ItemTemplate="{StaticResource StudentDateTemplate}"></ListBox>
3.총괄 설명\#바 인 딩 된 배열 의 추가,삭 제 를 실현 하기 위해 PageBar 그룹 컨트롤 도 컨트롤 을 즉시 업데이트 할 수 있 습 니 다.Pager 도구 류 는 다음 과 같은 구조 함 수 를 추가 합 니 다.먼저 배열 이 같은 참조 임 을 보증 합 니 다.그 다음 에 Observable Collection 을 사용 하여 인터페이스 와 ViewModel 을 즉시 업데이트 합 니 다.
public Pager(int pageSize, ObservableCollection<T> source)
{
_pageSize = pageSize;
_itemsSource = source;
_itemsSource.CollectionChanged += ItemsSourceOnCollectionChanged;
CalculatePaging();
}
private void ItemsSourceOnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
CalculatePaging();
GotoPageOf(CurPageIndex);
}
4.예시 소스 코드\#예제 소스 주소:페이지 컨트롤 원본 코드
질문
실제 응용 프로그램 에서 다음 과 같은 문 제 를 발견 할 수 있 습 니 다.연 결 된 전체 배열 을 정렬 해 야 할 때 Pager 클래스 초기 화 로 들 어 오 는 배열 은 실제 수 와 같은 참조 이 고 Observable Collection 배열 이 어야 합 니 다.그러면 LINQ 정렬 이 완료 되면 ToList 를 사용 하여 변환 해 야 합 니 다.Observable Collection 을 다시 초기 화해 야 합 니 다.그러면 이 Observable Collection 배열 이 바 뀌 었 을 때 Pager 류 의 배열 에 도 알 릴 수 없습니다.이 문 제 를 해결 하기 위해 다음 과 같은 두 가지 방법 을 생각해 보 자.
(1)사용자 정의 정렬,Observable Collection 의 각 배열 대상 에 대해 정렬 합 니 다.이렇게 정렬 이 완료 되면 Observable Collection 인용 은 변 함 이 없습니다.
(2)정렬 된 배열 을 임시 변수 로 저장 한 다음 Observable Collection 을 비우 고 임시 배열 을 반복 해서 추가 합 니 다.이와 같이 Observable Collection 대상 의 앞 뒤 도 통일 적 으로 인용 됐다.
public ICommand SortCommand { get; set; }
private void ExecuteSortCommand(object obj)
{
var list = StudentCollection.ToList().OrderByDescending(item=>item.Source).ToList();
StudentCollection.Clear();
foreach (var item in list)
{
StudentCollection.Add(item);
}
}
현재 잠시 두 번 째 방법 을 채택 하 였 으 나,이 방법 은 효율 이 높 지 않다.후속 적 으로 더 좋 은 해결 방법 이 있 으 면 댓 글로 토론 할 수 있다.총결산
사용자 정의 WPF 페이지 컨트롤 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.사용자 정의 WPF 페이지 컨트롤 에 관 한 내용 은 이전 글 을 검색 하거나 아래 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue 어셈블리에서 여러 번 사용자 정의 매개변수 작업 재사용추가 정보: VUE 구성 요소(슬롯 slot 및 재사용 가능 구성 요소) 하위 구성 요소의 일부 내용이 부모 구성 요소를 통해 DOM을 전달할 때 부모 구성 요소props 전가의 비교적 좌절된 문법을 사용하지 않아도...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.