0

我有一个 WPF MVVM 应用程序，它分为两列。左侧大约是宽度的 25%，包含一个可供选择的可滚动对象列表和一个计算按钮。右侧窗格是结果窗格，大约是宽度的 75%。

左侧窗格包含在嵌入在主应用程序窗口中的 UserControl 中。主应用程序使用包含两列的网格布局，第一列是 UserControl，第二列是包含结果的 StackPanel。目前，UserControl 绑定到数据的 ViewModel。

我想要实现的是让这个 UserControl 显示为默认情况下与项目的汇总列表一样，但是在控件的右侧有一个展开箭头，如果你单击它，那么左侧面板“滑动”到直到它填满应用程序宽度的 75% 并超出结果窗格的顶部，并且数据模板也需要更改，因此显示从简单的对象列表变为显示每个对象的所有详细信息的大网格目的。

因此应用程序有两种状态，一种是在左侧控件为 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>

展开面板位于底部，以确保它位于其他两个面板的顶部。将简单列表放在左侧面板上，将带有丰富项目模板的复杂列表放在左侧展开面板上，并将结果 UI 放在结果上。

然后定义一组动画和状态来处理LeftExpandPanel的动画切换可见性（从Collapsed到Visible和从Visible到Collapsed）。

最后是处理箭头按钮的点击。您可以将句柄放在代码后面，因为它纯粹与 UI 相关。您需要在处理程序中做两件事：

  1. 更改按钮上的箭头方向，并保存状态（展开或折叠）
  2. 开始动画。

完毕。希望它可以帮助你。

于 2013-07-23T20:46:36.873 回答