如何在UWP应用中实现类Windows 10开始菜单磁贴系统

一、核心布局选择：GridView + 分组绑定 #

TreeView不适合是因为它是树形层级结构，而Windows 10开始菜单的分组是平铺流式布局，用GridView配合CollectionViewSource做分组是最优解，完全贴合需求逻辑。

二、步骤拆解 #

1. 定义数据模型 #

先创建磁贴项和分组的基础模型，用于数据绑定和动态生成：

public class TileItem
{
    public string Title { get; set; }
    public Uri ImageUri { get; set; }
    public ICommand ClickCommand { get; set; } // 磁贴点击事件
}

public class TileGroup
{
    public string GroupName { get; set; }
    public ObservableCollection<TileItem> Tiles { get; set; } = new ObservableCollection<TileItem>();
}

2. 页面XAML布局 #

用GridView承载内容，通过CollectionViewSource指定分组字段，自定义分组样式和磁贴模板：

<Page.Resources>
    <!-- 分组标题样式 -->
    <Style x:Key="TileGroupStyle" TargetType="GroupItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GroupItem">
                    <StackPanel>
                        <TextBlock Text="{Binding GroupName}" 
                                   FontSize="16" FontWeight="Bold" 
                                   Margin="12,20,0,8"/>
                        <ItemsPresenter/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- 磁贴模板：Button实现图片+文字居中 -->
    <DataTemplate x:Key="TileItemTemplate" x:DataType="local:TileItem">
        <Button Width="120" Height="120" Margin="8" Command="{Binding ClickCommand}">
            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                <Image Source="{Binding ImageUri}" Width="48" Height="48" Margin="0,0,0,8"/>
                <TextBlock Text="{Binding Title}" TextWrapping="Wrap" TextAlignment="Center"/>
            </StackPanel>
        </Button>
    </DataTemplate>

    <!-- 分组数据源 -->
    <CollectionViewSource x:Name="TileGroupsSource" IsSourceGrouped="True" 
                          ItemsPath="Tiles"/>
</Page.Resources>

<Grid>
    <GridView ItemsSource="{Binding Source={StaticResource TileGroupsSource}}"
              GroupStyle="{StaticResource TileGroupStyle}"
              ItemTemplate="{StaticResource TileItemTemplate}"
              Padding="12"
              SelectionMode="None">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="5"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>
</Grid>

3. C#动态添加磁贴与分组 #

在页面后台或ViewModel中初始化数据，绑定到数据源：

public MainPage()
{
    this.InitializeComponent();
    LoadTileData();
}

private void LoadTileData()
{
    var tileGroups = new ObservableCollection<TileGroup>();

    // 示例：Code分组
    var codeGroup = new TileGroup { GroupName = "Code" };
    codeGroup.Tiles.Add(new TileItem
    {
        Title = "Terminal",
        ImageUri = new Uri("ms-appx:///Assets/Terminal.png"),
        ClickCommand = new RelayCommand(() => { /* 此处添加点击逻辑 */ })
    });
    codeGroup.Tiles.Add(new TileItem
    {
        Title = "Visual Studio",
        ImageUri = new Uri("ms-appx:///Assets/VS.png"),
        ClickCommand = new RelayCommand(() => { /* 此处添加点击逻辑 */ })
    });
    tileGroups.Add(codeGroup);

    // 示例：Office分组
    var officeGroup = new TileGroup { GroupName = "Office" };
    officeGroup.Tiles.Add(new TileItem
    {
        Title = "Word",
        ImageUri = new Uri("ms-appx:///Assets/Word.png"),
        ClickCommand = new RelayCommand(() => { /* 此处添加点击逻辑 */ })
    });
    tileGroups.Add(officeGroup);

    // 绑定到数据源
    TileGroupsSource.Source = tileGroups;
}

// 简易RelayCommand实现（无MVVM框架时用）
public class RelayCommand : ICommand
{
    private readonly Action _execute;
    public event EventHandler CanExecuteChanged;

    public RelayCommand(Action execute) => _execute = execute;
    public bool CanExecute(object parameter) => true;
    public void Execute(object parameter) => _execute?.Invoke();
}

4. 可选样式优化 #

• 磁贴交互效果：修改Button的Style，去掉默认边框，添加圆角、阴影，模拟Windows 10磁贴的悬停/点击反馈
• 多尺寸磁贴：通过DataTemplateSelector实现大中小磁贴的切换，匹配开始菜单的磁贴尺寸逻辑

三、为什么不选TreeView？ #

TreeView是树形折叠结构，适合展示有父子层级的内容，而开始菜单的分组是平铺流式布局，GridView+分组绑定的方式能自动处理分组标题和磁贴的横向排列，更贴合需求。

内容的提问来源于stack exchange，提问作者Paolog