按字母順序排列網格項目

Question

我把這個Stackpanel與一個網格，並在網格中的多個按鈕，其中包含內容顯示。這些項目是按字母順序排列的，而且我已經手動執行此操作。例如，如果一個遊戲的名稱是「死亡排」，我不得不浪費時間手動移動每個項目，這樣我就可以爲新項目騰出空間。這裏的問題是，是否有一種方法來組織它，以便我可以在代碼之間實現代碼並自動調整？ 代碼的外觀： Code Example Image

Answer 1

不要使用DataGrid來佈局的動態內容，而使用與DataTemplates的ItemsControl和存儲你的數據收集在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>