WPF table layout

Question

I am very new to WPF, so I just started creating a very simple card to learn the syntax, etc. In the game, all cards are turned down, you flip two, and if they match, you delete them, otherwise flip them and try to delete all the cards in the shortest amount of flip. As I said, it’s very simple ... :)

My question is, is there a table element, for example, in HTML, so I can easily put the maps in a single format instead of messing up the fields?

Answer 1

Here's an example of it using UniformGrid, as suggested by Matt Hamilton.

First, let's create the classes and data that we will use. Each map will be represented by a Map object and has the Face property:

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

Next, we need a class in which there is our collection of Maps, as well as a property that allows us to set the number of cards. For CardCollection, we can use ObservableCollection , as it will automatically notify the user interface when adding or removing Maps. The NumberOfCards property will require its own user interface notification method, for this we can implement INotifyPropertyChanged . We also want the property that represents the number of rows / columns used to be just the square root of our NumberOfCards:

 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 } 

Finally, we can set this as our DataContext in the window and bind to our map class in XAML. For XAML, I used the simple ItemsControl element, so it is not selectable, and I set the DataTemplate as a button, so that every card can be clicked to get everything you need!

 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> 

Another thing I would like to consider is the implementation of Josh Smith ContentControl3D . Since this may give you the “inverted” behavior that you are looking to implement in the map class is pretty good.

Answer 2

I would recommend UniformGrid for your scenario. A quick search yielded this article , which contains some code and screenshots that might help.

Answer 3

WPF has a table; here is a good article on getting started with it. From experience, a table in WPF is not so easy to use, and using Grid is usually the best option.