为项目列表选择正确的控件

发布于 2024-10-15 10:41:12 字数 811 浏览 3 评论 0原文

我是 WPF 和 MVVM 新手。在我的 ViewModel 中，我有一些项目的集合，例如：

class Item {
    string Title {get; set;}
    string Description {get; set;}
}

我想创建一个视图，所以一开始我会：

Title1
Title2
Title3

如果用户单击其中一个标题，它将展开以显示描述，例如：

Title1
Description1
Title2
Title3

如果用户单击其他标题，将会出现两个展开的项目：

Title1
Description1
Title2
Description2
Title3

这可能与 Expander 控件非常相似，也许我可以使用它，但我正在以其他方式进行操作，以学习新的东西。

为此我应该使用什么控件？应该是 ItemsControl 还是 ListBox？

我想，如果我使用 ItemsControl，我可能应该扩展我的 Item 类以具有类似 bool IsExpanded 的内容，并将 UI 项目可见性绑定到该类价值。但也许我可以使用 ListBox 并以某种方式将 UI 项目可见性绑定到...是的，绑定到什么？ :)

我怎么能做这么简单的事情呢？

原文

I am new to WPF and MVVM. In my ViewModel I have collection of items, for example:

class Item {
    string Title {get; set;}
    string Description {get; set;}
}

I would like to create a view, so at the beginning I would have:

Title1
Title2
Title3

If user click on one of title it will expand to show description, eg:

Title1
Description1
Title2
Title3

If user click on other title, there will be two expanded items:

Title1
Description1
Title2
Description2
Title3

This is probably very similar to Expander control and maybe I could use it, but I am doing it other way, to learn something new.

What control should I use for this purpose? Should that be ItemsControl or maybe ListBox?

I imagine, that if I use ItemsControl, I should probably extend my Item class to have something like bool IsExpanded and bind UI item visibility to that value. But maybe I could use ListBox and somehow bind UI item visibility to... Yeah, to what? :)

How could I do such a simple thing?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

二智少女 2024-10-22 10:41:12

除非您需要选择，否则您应该使用 ItemsControl，为了实现扩展，您可以在 ItemsControl 的 DataTemplate 中定义此类行为，您' d 只需创建一个轻量级 Expander。原理是有一个 ToggleButton 并将内容的可见性绑定到其 IsChecked 属性。

<ItemsControl ItemsSource="{Binding Data}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <DataTemplate.Resources>
                <BooleanToVisibilityConverter x:Key="B2VConv"/>
            </DataTemplate.Resources>
            <StackPanel Orientation="Vertical">
                <ToggleButton x:Name="tbutton" Content="{Binding Title}">
                    <ToggleButton.Template>
                        <ControlTemplate TargetType="ToggleButton">
                            <ContentPresenter/>
                        </ControlTemplate>
                    </ToggleButton.Template>
                    <ToggleButton.ContentTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}"/>
                        </DataTemplate>
                    </ToggleButton.ContentTemplate>
                </ToggleButton>
                <TextBlock Text="{Binding Description}"
                           Visibility="{Binding ElementName=tbutton, Path=IsChecked,Converter={StaticResource B2VConv}}">
                </TextBlock>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Unless you need selection you should go with the ItemsControl, to achieve the expansion you can define such behaviour in the DataTemplate of the ItemsControl, you'd just create a lightweight Expander. The principle is to have a ToggleButton and bind the visibility of the content to its IsChecked property.

<ItemsControl ItemsSource="{Binding Data}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <DataTemplate.Resources>
                <BooleanToVisibilityConverter x:Key="B2VConv"/>
            </DataTemplate.Resources>
            <StackPanel Orientation="Vertical">
                <ToggleButton x:Name="tbutton" Content="{Binding Title}">
                    <ToggleButton.Template>
                        <ControlTemplate TargetType="ToggleButton">
                            <ContentPresenter/>
                        </ControlTemplate>
                    </ToggleButton.Template>
                    <ToggleButton.ContentTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}"/>
                        </DataTemplate>
                    </ToggleButton.ContentTemplate>
                </ToggleButton>
                <TextBlock Text="{Binding Description}"
                           Visibility="{Binding ElementName=tbutton, Path=IsChecked,Converter={StaticResource B2VConv}}">
                </TextBlock>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

回复收藏 0 原文