c# - 创建一个列表框，其中的项目在被选中时会展开( Accordion )

Question

针对较旧的基于 XAML 的 UI 框架 (WPF/SL) 有解决此问题的方法，但它们不容易适应通用 Windows 平台。

我正在尝试创建一个项目列表，这些项目在默认状态下仅显示有限的详细信息，并在选择时扩展以快速编辑一些数据。
我还没有找到一种方法来创建这种扩展行为，尽管它类似于 Windows 10 邮件应用程序所做的对话。选择对话中的一条消息时，该对话中的其他消息会下拉或向下滑动。

下面是一个列表示例，我想一开始只显示名称。

<ListBox ItemsSource="{x:Bind Persons}">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemTemplate>
        <DataTemplate x:DataType="src:Person">
            <StackPanel HorizontalAlignment="Stretch" Width="Auto">
                <TextBlock Text="{x:Bind Path=Name, Mode=OneWay}" Margin="12, 15, 12, 0" FontSize="18.667" />
                <TextBox HorizontalAlignment="Stretch" Margin="12, 12, 12, 0" FontSize="18.667" Text="{x:Bind Path=Name, Mode=TwoWay}" />
                <TextBlock Text="Date of birth" Margin="12, 15, 12, 0" />
                <DatePicker Margin="12, 5, 12, 0" Date="{x:Bind Path=DateOfBirth, Mode=TwoWay}" />
                <TextBlock Text="Domicile" Margin="12, 15, 12, 0" />
                <TextBox Margin="12, 5, 12, 0" Text="{x:Bind Path=Domicile, Mode=OneWay}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

在 WPF 中，这种行为可以通过触发器 Style.Triggers 实现，但它们不再可用。

GitHub 上的原始源代码

Answer 1

这就是你想要做的。您想要使用由 ListView native 设置的 ListViewItem.IsSelected 属性。然后，您想对该值变化使用react并设置显示或隐藏您的详细信息的视觉状态。

像这样:

class MyModel
{
    public bool IsSelected { get; set; }
}

class MyList : Windows.UI.Xaml.Controls.ListView
{
    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        var model = item as MyModel;
        var listViewItem = element as Windows.UI.Xaml.Controls.ListViewItem;

        var binding = new Windows.UI.Xaml.Data.Binding
        {
            Source = model,
            Mode = Windows.UI.Xaml.Data.BindingMode.TwoWay,
            Path = new PropertyPath(nameof(model.IsSelected)),
        };
        listViewItem.SetBinding(Windows.UI.Xaml.Controls.ListViewItem.IsSelectedProperty, binding);
        base.PrepareContainerForItemOverride(element, item);
    }
}

很有趣，但这段代码在某种程度上是基于用于可变大小环绕网格的代码。您可以在此处阅读原始文章。

http://blog.jerrynixon.com/2012/08/windows-8-beauty-tip-using.html

如果您想了解更多关于视觉状态的信息，您可以阅读我写的关于同一主题的博客文章。

http://blog.jerrynixon.com/2013/11/windows-81-how-to-use-visual-states-in.html

像这样:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Interactivity:Interaction.Behaviors>
        <Core:DataTriggerBehavior Binding="{Binding IsSelected}" Value="True">
            <Core:GoToStateAction StateName="BigVisualState"/>
        </Core:DataTriggerBehavior>
        <Core:DataTriggerBehavior Binding="{Binding IsSelected}" Value="False">
            <Core:GoToStateAction StateName="LittleVisualState"/>
        </Core:DataTriggerBehavior>
    </Interactivity:Interaction.Behaviors>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="BigVisualState"/>
            <VisualState x:Name="LittleVisualState"/>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

</Grid>

如果您想详细了解 Windows 应用程序中的 XAML 行为，可以阅读我写的有关该主题的文章。

http://blog.jerrynixon.com/2013/10/everything-i-know-about-behaviors-in.html

我还录制了您可能喜欢的类(class)。

https://mva.microsoft.com/en-US/training-courses/designing-your-xaml-ui-with-blend-jump-start-8260?l=p2dPykKy_5104984382

希望对您有所帮助。

祝你好运!