WPF 페이지 컨트롤 의 전 과정 기록 사용자 정의

1.페이지 컨트롤 기능 설명\#

위의 그림 과 같은 페이지 컨트롤 을 실현 하려 면 몇 가지 기능 이 필요 합 니 다.
  • 페이지 당 보 여줄 수 있 는 최대 열 수 를 설정 할 수 있 습 니 다(예 를 들 어 페이지 당 8 열,페이지 당 16 열 등).
  • 불 러 온 배열 의 총 수량 이 설 정 된 페이지 당 열 수 를 초과 하면 페이지 별로 보 여 줘 야 합 니 다.
  • 지 정 된 열 수 나 상하 페이지 단 추 를 직접 눌 러 페이지 를 돌 릴 수 있다.
  • 2.사용자 정의 페이지 컨트롤 사용 설명\#
    상기 기능 을 실현 하기 위해 주로 다음 과 같은 업 무 를 진행한다.
    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 페이지 컨트롤 에 관 한 내용 은 이전 글 을 검색 하거나 아래 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!

    좋은 웹페이지 즐겨찾기