c# - 按字母顺序排列网格项目

Question

我有这个带有网格的 Stackpanel，并且在网格中有多个包含要显示的内容的按钮。这些项目是按字母顺序排列的，我已经手动完成了。例如，如果游戏的名称是“死囚牢房”，我将不得不浪费时间手动将每个项目向下移动一个，以便为新项目腾出空间。这里的问题是，有没有办法组织它，以便我可以在项目之间实现代码并且它会自动调整？代码的外观： 代码 示例图像

Answer 1

不要使用 aDataGrid来布局动态内容，而是使用ItemsControlwithDataTemplates并将您的数据存储在 a 中的集合中ViewModel，然后使用数据绑定来显示您的内容。这将允许您更改数据收集并适当地更新您的 UI。

例子：

一个简单的类来保存每个游戏的细节：

public class GameViewModel
{
    public string Name { get; set; }
    public string ImagePath { get; set; }
}

您的主要视图模型：

public class SortedContentViewModel
{
    public ObservableCollection<GameViewModel> GameList { get; set; }

    public SortedContentViewModel()
    {
        GameList = new ObservableCollection<GameViewModel>()
        {
            new GameViewModel() {Name="Brink", ImagePath = @"Resources/brink.png" },
            new GameViewModel() {Name="Bulletstorm", ImagePath = @"Resources/bulletstorm.png" }
        };
    }
}

和你的 XAML：

<UserControl x:Class="Wpf_Playground.Views.SortedContentView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:vm="clr-namespace:Wpf_Playground.ViewModels"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300"
         DataContext="{DynamicResource ViewModel}">
<UserControl.Resources>
    <vm:SortedContentViewModel x:Key="ViewModel" />

    <DataTemplate DataType="{x:Type vm:GameViewModel}">
        <Button>
            <Grid>
                <Image Source="{Binding ImagePath}" Stretch="Fill" />
                <Border Background="#66000000" Height="30" VerticalAlignment="Bottom">
                    <TextBlock Text="{Binding Name}" Margin="10,-2,10,0" VerticalAlignment="Bottom" />
                </Border>
            </Grid>
        </Button>
    </DataTemplate>
</UserControl.Resources>
    <Grid>
        <ItemsControl ItemsSource="{Binding GameList}" >
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
    </ItemsControl>

    </Grid>
</UserControl>