Plateau de jeu avec des cases

**freaks88** · 13/01/2014, 20h05

Bonjour

Selon vous quelles seraient le meilleur moyen pour créer dynamiquement, en wpf/xaml, un plateau de jeu, avec des cases, et en associant un id a chaque case.
Le but étant de faire déplacer un personnage dessus.
Un grid ?

Merci

**GuruuMeditation** · 14/01/2014, 08h42

Grid, ça peut être pas mal, si tu as un plateau style échecs, etc...en gros, un truc avec des lignes et des colonnes. Si tu as des formes un peu plus bizarres, faut peut-être alors passer par un canvas

**freaks88** · 14/01/2014, 10h32

oui c'est style echec.
c'est ce que je pensais merci

Par contre comment connaitre les cases qui seront autour de mon perso ?

**MABROUKI** · 16/01/2014, 04h53

bonjour

Il est recommende d'utiliser le grid comme "panel host" d'un itemscontrol....

1/Selectionner un listboxitem particulier avec:
- ListBox.ItemContainerGenerator.ContainerFromItem(ListBox.SelectedItem)

2/ recuperer le listsource du xaml(observablecollection<dataitem>) tres puissant car son index permet d'acceder au listboxitem sous jacent avec
-ListBox.ItemContainerGenerator.ContainerFromIndex(index dans liste source).
Cela permet par exemple de le deplacer en assignant un autre index à l'item data...!!! avec liste.move,suprimer ,permuter 2 elements grace au binding ) :

3/une boucle sur la liste source permet de connaitre:
- les coords row et col grace à Grid.GetRow(listboxitem) & Grid.GetColumn(listboxItem);
-de savoir s'il se trouve sur la meme row ou col ,une col avant ou arriere,une row dessus ou dessous...par rapport listboxitem selectionne...

code du class player utilise:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Collections.ObjectModel;
using System.ComponentModel;
 
namespace WpfPlateauGrid
{
    public class Position : INotifyPropertyChanged
    {
        public Position()
        {
            x = 0;
            y = 0;
        }
        public Position(int x1, int y1)
            : this()
        {
            X = x1;
            Y = y1;
 
        }
        private int x;
        public int X
        {
            get { return x; }
            set
            {
                x = value;
                RaisePropertyChanged("X");
            }
        }
        private int y;
        public int Y
        {
            get { return y; }
            set
            {
                y = value;
                RaisePropertyChanged("Y");
            }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(string nameProp)
        {
            PropertyChangedEventHandler h = PropertyChanged;
            if (h != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(nameProp));
 
            }
        }
    }
    public class Player : INotifyPropertyChanged
    {
        public Player()
        { }
        public Player(string n, Position pos)
            : this()
        {
            Name = n;
            Location = pos;
        }
        private string name;
        public string Name
        {
            get { return name; }
            set
            {
                name = value;
                RaisePropertyChanged("Name");
            }
        }
        private Position location;
        public Position Location
        {
            get { return location; }
            set
            {
                location = value;
                RaisePropertyChanged("Location");
            }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(string nameProp)
        {
            PropertyChangedEventHandler h = PropertyChanged;
            if (h != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(nameProp));
 
            }
        }
    }
 
    public class Players : ObservableCollection<Player>
    {
        Player pl;
        Random rnd = new Random();
        private int rows = 5;
        private int columns = 5;
        Position pos;
        public Players()
        {
 
 
 
            for (int i = 0; i < rows; i++)
            {
                for (int j = 0; j < columns; j++)
                {
                    pos = new Position(i, j);
                    pl = new Player(
                        "player" + (i + 1).ToString() + (j + 1).ToString(),
                        pos);
                    this.Add(pl);
 
                }
 
            }
        }
 
 
 
    }
}

code xaml du winform:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
<Window x:Class="WpfPlateauGrid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfPlateauGrid"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:Players x:Key="players"></local:Players>
        <DataTemplate 
            x:Key="templatePlayer"
            DataType="{x:Type local:Player}">
            <Grid>
                <Border 
                    BorderBrush ="Yellow"  >
                    <Border.Style>
                        <Style  TargetType="{x:Type Border }">
                            <Setter Property="Background" Value="LimeGreen" />
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Opacity" Value="0.5" />
                                    <Setter Property="Background" Value="#FFE7EE90" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                </Border>
                <TextBlock   
                   Margin="10"  Padding="5" FontSize="14" 
                    Foreground="White" 
                    Text="{Binding Name}"/>
            </Grid>
        </DataTemplate>
        <!-- style pour les  4 cases  adjacentes -->
        <Style x:Key="AdjacentStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Grid.Row" Value="{Binding Path=Location.X}"/>
            <Setter Property="Grid.Column" Value="{Binding Path=Location.Y}"/>
            <Setter Property="BorderBrush" Value="Red"/>
            <Setter Property="BorderThickness" Value="4.0"/>
        </Style>
 
    </Window.Resources>
    <Viewbox >
        <Border BorderBrush="Black">
            <ListBox 
                x:Name="lb"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                ScrollViewer.HorizontalScrollBarVisibility="Visible"
                ScrollViewer.VerticalScrollBarVisibility="Visible"  
                ItemTemplate="{StaticResource templatePlayer}"
                SelectionChanged="ListBox_SelectionChanged"
                ItemsSource="{Binding Source={StaticResource players}}">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid 
                            x:Name="rootGrid"
                            IsItemsHost="true"
                            ShowGridLines="False" 
                            Background="Beige">
                            <!-- attention autant de ColumnDefinition &  RowDefinition 
                            qu'il y de rows et cols dans la collection Source -->
                            <Grid.RowDefinitions>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <!-- style pour les  ColumnDefinition &  RowDefinition -->
                            <Grid.Resources>
                                <Style TargetType="{x:Type ColumnDefinition}">
                                    <Setter Property="Width" Value="100"/>
                                </Style>
                                <Style TargetType="{x:Type  RowDefinition}">
                                    <Setter Property="Height" Value="50"/>
                                </Style>
                            </Grid.Resources>
                        </Grid>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemContainerStyle>
                    <!-- ItemContainerStyle pour binder la "Location" du joueur  sur les ColumnDefinition &  RowDefinition -->
                    <Style  TargetType="{x:Type ListBoxItem}">
                        <Setter Property="Grid.Row" Value="{Binding Path=Location.X}"/>
                        <Setter Property="Grid.Column" Value="{Binding Path=Location.Y}"/>
                        <Setter Property="BorderBrush" Value="Black"/>
                        <Setter Property="BorderThickness" Value="1.0"/>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>
        </Border>
    </Viewbox >
</Window>

code behind .cs du winform:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
 
namespace WpfPlateauGrid
{
    /// <summary>
    /// Logique d'interaction pour MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
       Players players;
 
        Style adjacentStyle = null;
        Style currentStyle = null;
        public MainWindow()
        {
            InitializeComponent();
            //recupere la liste source
            players = lb.ItemsSource as Players;
 
            //recuperes les styles utilises
            currentStyle = lb.ItemContainerStyle;
            adjacentStyle = this.FindResource("AdjacentStyle") as Style;
        }
 
        //les 4 voisins du ListBoxItem  selectionne
        List<ListBoxItem> voisins = new List<ListBoxItem>();
        private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            ListBox listbox = sender as ListBox;
            ListBoxItem lbitem =
                listbox.ItemContainerGenerator.ContainerFromItem(listbox.SelectedItem) as ListBoxItem;
 
            if (lbitem == null) return;
            //retablit le style normal
            foreach (var item in voisins)
            {
                item.Style = currentStyle;
            }
 
            voisins = SearchUIElement(lb, lbitem);
 
            //applique le style de selection des 4 voisins
            foreach (var item in voisins)
            {
                item.Style = adjacentStyle;
            }
 
        }
        private List<ListBoxItem> SearchUIElement(ListBox lb, ListBoxItem lbitem)
        {
            int row = Grid.GetRow(lbitem);
            int col = Grid.GetColumn(lbitem);
            int rowx = 0;
            int coly = 0;
            List<ListBoxItem> voisins = new List<ListBoxItem>();
            foreach (var item in players)
            {
                int i = players.IndexOf(item);
                ListBoxItem currentItem = (ListBoxItem)lb.ItemContainerGenerator.ContainerFromIndex(i);
                rowx = Grid.GetRow(currentItem);
                coly = Grid.GetColumn(currentItem);
                if (rowx == row && coly == col - 1) //left
                {
                    voisins.Add(currentItem);
                }
                if (rowx == row && coly == col + 1)//right
                {
                    voisins.Add(currentItem);
                }
                if (rowx == row - 1 && coly == col)//top
                {
                    voisins.Add(currentItem);
                }
                if (rowx == row + 1 && coly == col)//bottom
                {
                    voisins.Add(currentItem);
                }
            }
            return voisins;
 
        }
    }
}

Au passge les ColumnDefinition & RowDefinition peuvent etre stylees ...
bon code....

Plateau de jeu avec des cases

Windows Presentation Foundation

Discussions similaires

Partager

Partager