Question

我有一个带有网格的Stackpanel，并且在网格中有多个按钮，其中包含要显示的内容。这些项目按字母顺序排列，我手动完成。例如，如果游戏的名称是“死亡行”，我将不得不浪费时间手动将每个项目向下移动一个，这样我就可以为新项目腾出空间。这里的问题是，有没有办法组织它，以便我可以只在项目之间实现代码，它会自动调整？代码如何看起来： Code Example Image

Answer 1

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

示例：

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

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

您的主ViewModel：

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>

按字母顺序排序网格项

1 个答案: