0

2 つの列に分割された WPF MVVM アプリケーションがあります。左側のものは幅の約 25% で、選択するオブジェクトのスクロール可能なリストと計算ボタンが含まれています。右側のペインは結果ペインで、幅の約 75% です。

左側のペインは、メイン アプリケーション ウィンドウに埋め込まれた UserControl 内に含まれています。メイン アプリは 2 つの列を持つグリッド レイアウトを使用します。最初の列は UserControl で、2 番目の列は結果を含む StackPanel です。現在、UserControl はデータの ViewModel にバインドしています。

私が達成したいのは、この UserControl を現在のデフォルトでアイテムの要約リストと同じように表示することですが、コントロールの右側に矢印を展開し、それをクリックすると左側のパネルが「スライド」します。アプリケーションの幅の 75% を占めて結果ペインの上部を超えるまで右に移動し、データ テンプレートも変更する必要があるため、表示はオブジェクトの単純なリストから、それぞれのすべての詳細を示す大きなグリッドに変わります。物体。

したがって、アプリケーションには 2 つの状態があります。1 つは、左側のコントロールが幅の 25% であり、基になるビューモデル データの省略されたレンダリングが含まれている場合に折りたたまれます。展開をクリックすると、目に見えるスライド効果で右にスライドし、開きます。アプリケーション幅の最大 75% で、基になるデータのレンダリングが詳細ビューに変わります。

これを達成するための最善の方法を誰かが提案できますか?

4

1 に答える 1

0

これは純粋な 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>

エキスパンド パネルは下部にあり、他の 2 つのパネルの上にあることを確認します。単純なリストを左側のパネルに配置し、リッチ アイテム テンプレートを含む複雑なリストを左側の展開パネルに配置し、結果 UI を結果に配置します。

次に、アニメーションと状態のグループを定義して、LeftExpandPanel のアニメーション スイッチの可視性 (Collapsed から Visible へ、および Visible から Collapsed へ) を処理します。

最後は、矢印ボタンのクリックを処理することです。ハンドルは純粋に UI 関連であるため、コード ビハインドに配置できます。ハンドラー内で次の 2 つのことを行う必要があります。

  1. ボタンの矢印の方向を変更し、状態を保存します（展開または折りたたみ）
  2. アニメーションを開始します。

終わり。それがあなたを助けることを願っています。

于 2013-07-23T20:46:36.873 に答える