WPF'de tablo düzeni

Question

WPF'ye çok yeni geldim, bu yüzden sadece sözdizimini öğrenmek için çok basit bir hafıza kartı oyunu yapmaya başladım. Oyun, tüm kartların aşağı baktığı, ikiyi çevirdiğiniz ve onları eşleştirdiğiniz takdirde onları kaldırdığınız, aksi halde onları geri göndereceğiniz ve en kısa sayıdaki tüm saydamları çıkarmaya çalıştığınız yerdir. Dediğim gibi, çok basit ... :)

Sorum şu ki, HTML gibi bir tablo öğesi yok mu, bu yüzden kenar boşluklarıyla uğraşmak yerine kartları düzgün bir düzende kolayca yerleştirebiliyorum?

Answer 1

Matt Hamilton'ın önerdiği gibi UniformGrid'i kullanan bir örnek.

İlk olarak, kullanacağımız sınıfları ve verileri oluşturmanızı sağlar. Her kartın bir kart nesnesi tarafından temsil edilir ve bir yüz özelliği vardır edilecektir:

public class Card 
{ 
    public string Face { get; set; } 
    public Card() { } 
} 

İleri, bize kartların sayısını ayarlamak sağlayan Kartları koleksiyonumuzu bulunan bir sınıf ve ayrıca bir özellik gerekecektir . CardCollection için bir ObservableCollection kullanabiliriz, çünkü bir Kart eklendiğinde veya çıkarıldığında UI'yi otomatik olarak bilgilendirir. NumberOfCards özelliği, kullanıcı arabirimini bilgilendirmek için kendi yöntemine gereksinim duyacaktır, bunun içinINotifyPropertyChanged arabirimini kullanabiliriz. Nihayet

public class Cards : INotifyPropertyChanged 
{ 
    private int myNumberOfCards; 
    public int NumberOfCards 
    { 
     get { return this.myNumberOfCards; } 
     set 
     { 
      this.myNumberOfCards = value; 
      NotifyPropertyChanged("NumberOfCards"); 

      // Logic is going in here since this is just an example, 
      // Though I would not recomend hevily modifying the setters in a finalized app. 
      while (this.myNumberOfCards > CardCollection.Count) 
      { 
       CardCollection.Add(new Card { Face = (CardCollection.Count + 1).ToString() }); 
      } 
      while (this.myNumberOfCards < CardCollection.Count) 
      { 
       CardCollection.RemoveAt(CardCollection.Count - 1); 
      } 

      NotifyPropertyChanged("CardColumns"); 
     } 
    } 
    public int CardColumns 
    { 
     get 
     { 
      return (int)Math.Ceiling((Math.Sqrt((double)CardCollection.Count))); 
     } 
    } 
    private ObservableCollection<Card> myCardCollection; 
    public ObservableCollection<Card> CardCollection 
    { 
     get 
     { 
      if (this.myCardCollection == null) 
      { this.myCardCollection = new ObservableCollection<Card>(); } 
      return this.myCardCollection; 
     } 
    } 
    public Cards(int initalCards) 
    { 
     NumberOfCards = initalCards; 
    } 

    #region INotifyPropertyChanged Members 

    public event PropertyChangedEventHandler PropertyChanged; 

    private void NotifyPropertyChanged(String info) 
    { 
     if (PropertyChanged != null) 
     { 
      PropertyChanged(this, new PropertyChangedEventArgs(info)); 
     } 
    } 

    #endregion 
} 

, biz Pencerede bizim DataContext olarak ayarlayabilirsiniz: Biz de kullanmak Satırlar/Sütunlar sayısını temsil eden bir özellik isteyeceksiniz, bu sadece bizim NumberOfCards karekökü olacak ve XAML'deki Kartlar sınıfına bağlanır. XAML için basit bir ItemsControl kullandı, bu yüzden seçilemez ve DataTemplate'i bir düğme olarak ayarladım, böylece her kartın üzerine tıklanabilir, hepsi bu kadar gerekli! Ben bakarak tavsiye ederim

public partial class Window1 : Window 
{ 
    public Window1() 
    { 
     InitializeComponent(); 
     this.DataContext = new Cards(25); 
    } 
} 

<Window x:Class="Sample_BoolAnimation.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" 
    Height="300" 
    Width="300"> 
    <Grid> 
     <DockPanel> 
      <DockPanel DockPanel.Dock="Top"> 
       <TextBlock Text="Number of Cards:" /> 
       <TextBox Text="{Binding NumberOfCards, UpdateSourceTrigger=PropertyChanged}" /> 
      </DockPanel> 
      <ItemsControl ItemsSource="{Binding CardCollection}"> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <UniformGrid Columns="{Binding CardColumns}" /> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
       <ItemsControl.ItemTemplate> 
        <DataTemplate> 
         <Button Content="{Binding Face}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> 

        </DataTemplate> 
       </ItemsControl.ItemTemplate> 
      </ItemsControl> 
     </DockPanel> 
    </Grid> 
</Window> 

başka şey Josh Smith'in ContentControl3D uygulamasıdır. Bu size Card sınıfında uygulamak için aradığınız 'saygısız' davranışı oldukça güzel verebilir.

Answer 2

Senaryo için UniformGrid öneririm. Hızlı bir arama, yardımcı olabilecek bazı kod ve ekran görüntüleri içeren this article'u verdi.

Answer 3

WPF'de bir Masa var, başlangıçta iyi bir article. Deneyimden WPF'deki Tablo, kullanımı kolay ve bir Grid kullanmak genellikle daha iyi bir seçenektir.