WPF-集合之按钮排布

使用视图模型和数据绑定来实现按分类显示按钮的功能。以下是一个简单的示例，演示如何在WPF中点击按钮以按分类显示不同按钮。

首先，你需要一个视图模型，其中包含按钮数据和当前选定的分类。使用MVVM框架（如MVVM Light或Stylet）来管理视图模型。这是一个示例：

1.View层：首先实现按钮的横向排布

功能1：

    <Grid>
        <Button Content="Button 1" HorizontalAlignment="Left" Margin="10,10,0,1016" Command="{Binding ShowCategory1Command}" Grid.Row="0"/>
        <Button Content="Button 2" HorizontalAlignment="Left" Margin="92,10,0,1016" Command="{Binding ShowCategory2Command}" Grid.Row="0"/>
        <Button Content="Button 3" HorizontalAlignment="Left" Margin="165,10,0,1016" Command="{Binding ShowCategory3Command}" Grid.Row="0"/>
        <UniformGrid Background="#FF919CF7" Margin="619,14,285,809">
            <!-- 用于生成按钮的 ItemsControl -->
            <ItemsControl ItemsSource="{Binding DisplayedButtons}" BorderThickness="0">
                <!-- 设置 ItemsControl 的 ItemsPanel 为 VirtualizingStackPanel，按水平方向排列 -->
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <!-- 设置每个按钮的样式，数据绑定等 -->
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Button Content="{Binding ButtonText}"
                        Command="{Binding DataContext.ButtonClickCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
                        Margin="5"
                        Width="100"
                        Height="30"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </UniformGrid>
    </Grid>

功能二：希望使用 UniformGrid 嵌套在 ItemsControl 内部以生成四行四列的按钮，可以使用以下

代码：

    <Grid>
        <Button Content="Button 1" HorizontalAlignment="Left" Margin="10,10,0,1016" Command="{Binding ShowCategory1Command}" Grid.Row="0"/>
        <Button Content="Button 2" HorizontalAlignment="Left" Margin="92,10,0,1016" Command="{Binding ShowCategory2Command}" Grid.Row="0"/>
        <Button Content="Button 3" HorizontalAlignment="Left" Margin="165,10,0,1016" Command="{Binding ShowCategory3Command}" Grid.Row="0"/>
        <UniformGrid Rows="4" Columns="4" Background="#FF919CF7" Margin="619,14,285,809">
            <!-- 用于生成四行四列的按钮的 ItemsControl -->
            <ItemsControl ItemsSource="{Binding DisplayedButtons}" BorderThickness="0" Margin="0,0,-633,-194">
                <!-- 设置 ItemsControl 的 ItemsPanel 为 UniformGrid，确保四行四列的按钮网格 -->
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Rows="4" Columns="4"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <!-- 设置每个按钮的样式，数据绑定等 -->
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Button Content="{Binding ButtonText}"
                        Command="{Binding DataContext.ButtonClickCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
                        Margin="5"
                        Width="100"
                        Height="30"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </UniformGrid>

    </Grid>

2.ViewModel层：

在这个示例中，CeshiModel 表示按钮的数据模型，包括按钮文本和所属的分类。CeshiViewModel 包括一个 DisplayedButtons 属性，用于存储当前显示的按钮，以及三个命令 ShowCategory1Command 和 ShowCategory2Command，ShowCategory3Command分别用于显示不同的分类按钮。

using ExperimentalPlatforms.Models;
using GalaSoft.MvvmLight.Command;
using Stylet;
using System.Collections.ObjectModel;
using System.Linq;
using System.Windows.Input;

namespace ExperimentalPlatforms.ViewModels.Windows
{
    public  class CeshiViewModel:Screen
    {
        private ObservableCollection<CeshiModel> allButtons;
        private ObservableCollection<CeshiModel> displayedButtons;
        private string selectedCategory;
        public ICommand ShowCategory1Command { get; private set; }
        public ICommand ShowCategory2Command { get; private set; }
        public ICommand ShowCategory3Command { get; private set; }
        public CeshiViewModel()
        {
            // 初始化按钮数据（这里你可以从数据源加载按钮数据）
            allButtons = new ObservableCollection<CeshiModel>
            {
                new CeshiModel { ButtonText = "Button 1", Category = "Category 1" },
                new CeshiModel { ButtonText = "Button 2", Category = "Category 2" },
                new CeshiModel { ButtonText = "Button 3", Category = "Category 3" },
                new CeshiModel { ButtonText = "Button 3", Category = "Category 3" },
                 new CeshiModel { ButtonText = "Button 3", Category = "Category 3" },
                 new CeshiModel { ButtonText = "Button 3", Category = "Category 3" },
                  new CeshiModel { ButtonText = "Button 3", Category = "Category 3" },
                 new CeshiModel { ButtonText = "Button 3", Category = "Category 3" },
                 new CeshiModel { ButtonText = "Button 3", Category = "Category 3" },
                // 添加更多按钮
            };

            // 初始状态下显示所有按钮
            displayedButtons = new ObservableCollection<CeshiModel>(allButtons);

            // 初始化命令
            ShowCategory1Command = new RelayCommand(ShowCategory1);
            ShowCategory2Command = new RelayCommand(ShowCategory2);
            ShowCategory3Command = new RelayCommand(ShowCategory3);
        }

        public ObservableCollection<CeshiModel> DisplayedButtons
        {
            get { return displayedButtons; }
            set
            {
                if (displayedButtons != value)
                {
                    displayedButtons = value;
                    OnPropertyChanged(nameof(DisplayedButtons)); // 触发属性更改通知
                }
            }
        }
        private void ShowCategory1()
        {
            // 仅显示Category 1 的按钮
            DisplayedButtons = new ObservableCollection<CeshiModel>(allButtons.Where(b => b.Category == "Category 1"));
        }

        private void ShowCategory2()
        {
            // 仅显示Category 2 的按钮
            DisplayedButtons = new ObservableCollection<CeshiModel>(allButtons.Where(b => b.Category == "Category 2"));
        }
        private void ShowCategory3()
        {
            // 仅显示Category 2 的按钮
            DisplayedButtons = new ObservableCollection<CeshiModel>(allButtons.Where(b => b.Category == "Category 3"));
        }
    }
}

3.Model层：

CeshiModel是包含按钮数据模型的集合。每个按钮数据模型包括Category 和ButtonText属性，用于区分按钮的类别和文本。

  public  class CeshiModel
    {
        public string ButtonText { get; set; }
         public string Category { get; set; }  //类别
    }