WPF 왼쪽 패널 용 MVVM 확장 기능

Question

두 개의 열로 나뉘어 진 WPF MVVM 응용 프로그램이 있습니다. 왼손은 너비의 약 25 %이고 스크롤 할 수있는 개체 목록과 선택 버튼이 있습니다. 오른쪽 창은 결과 창이며 너비의 약 75 %입니다.

왼쪽 창은 주 응용 프로그램 창에 포함 된 UserControl 내에 포함되어 있습니다. 주 앱은 두 개의 열이있는 Grid 레이아웃을 사용합니다. 첫 번째 열은 UserControl이고 두 번째 열은 결과가 포함 된 StackPanel입니다. 현재 UserControl은 데이터에 대한 ViewModel에 바인딩합니다.

내가 달성하고자하는 것은 현재 요약 된 항목 목록을 사용하지만 현재 컨트롤의 오른쪽에 확장 화살표가 있고이 컨트롤을 클릭하면 왼쪽 패널 " 슬라이드 "를 응용 프로그램 너비의 75 %까지 채우고 결과 창의 맨 위로 이동하고 데이터 형식을 변경하여 디스플레이가 단순한 개체 목록에서 전체를 보여주는 큰 눈금으로 바뀔 때까지 각 객체의 세부 사항.

응용 프로그램에는 왼손잡이 컨트롤이 너비의 25 % 일 때 축소되고 기본 뷰어 모델 데이터의 약식 렌더링이 포함되어 있으며 확장을 클릭하면 표시되는 슬라이드 효과와 함께 슬라이드됩니다 오른쪽, 응용 프로그램 폭의 75 %까지 열림, 기본 데이터의 렌더링이 상세보기로 변경됩니다.

누구나 최선을 다해 제안 할 수 있습니까?

Answer 1

이것은 순수한 WPF 시각 효과라고 생각할 수 있습니다. 먼저 다음과 같이 눈금을 정의하십시오.

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="2*"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 

    <Border x:Name="Results" Grid.Column="1" Grid.ColumnSpan="2"/> 

    <Border x:Name="LeftPanel" Grid.Column="0"/> 

    <Border x:Name="LeftExpandPanel" Grid.Column="0" Grid.ColumnSpan="2" Visibility="Collapsed"/> 

</Grid> 

확장 패널이 맨 아래에 오도록 확장 패널이 맨 아래에 있는지 확인하십시오. 왼쪽 패널에 간단한 목록을 넣고, 왼쪽 패널에 서식있는 서식 파일이있는 복잡한 목록과 결과의 결과 UI를 놓습니다.

그런 다음 LeftExpandPanel의 애니메이션 전환 표시 (축소에서 표시, 표시에서 축소로)를 처리 할 애니메이션 및 상태 그룹을 정의합니다.

마지막으로 화살표 버튼을 클릭하면됩니다. 순전히 UI와 관련되어 있으므로 핸들을 코드 뒤에 넣을 수 있습니다. 버튼을

1. 변경 화살표 방향 및 상태 (확장 또는 축소)
2. 시작 애니메이션을 저장 : 당신은 핸들러 내부에 두 가지 일을 할 필요가있다.

완료. 그것이 당신을 도울 수 있기를 바랍니다.