Question

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

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

我想要实现的是将此UserControl默认显示为当前默认情况下的项目汇总列表，但是在控件右侧有一个展开箭头，如果单击它，则左侧面板“幻灯片” “向右移动，直到它填满应用程序宽度的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相关。你需要在处理程序中做两件事：

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

完成。希望它可以帮到你。

WPF MVVM扩展了左侧面板的功能

1 个答案: