По алфавиту Сортировка элементов сетки

Question

У меня есть эта Stackpanel с сеткой, а в сетке много кнопок, содержащих контент для отображения. Элементы упорядочены по алфавиту, и я делаю это вручную. Например, если название игры было бы «Death Row», мне пришлось бы тратить время вручную, перемещая каждый предмет вниз, чтобы я мог освободить место для нового предмета. Вопрос здесь был бы, есть ли способ его организовать, чтобы я мог просто реализовать код между элементами и автоматически его настроить? Как выглядит код: Code Example Image

Answer 1

Не используйте DataGrid для Компоновка динамического контента, а использовать ItemsControl с DataTemplates и хранить вам данные в коллекции в ViewModel, а затем использовать привязки данных для отображения содержимого. Это позволит вам изменить свой сбор данных и обновить свой пользовательский интерфейс.

Пример:

Простой класс для хранения деталей каждой игры:

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>