Placer des images comme des cartes

**Cestmoi3056** · 26/12/2013, 15h15

Bonjour,

J'aimerai placer par le code des images qui suivraient 2 ellipses, un peu comme sur cette photo :

Comment faire celà ?

Merci !

**GuruuMeditation** · 27/12/2013, 08h43

Il y a toutes sortes de moyens, via l'équation d'une ellipse et de la trigo par exemple.
Mais une façon très simple sans se casser la tête serait de faire comme ça :

1ere carte : position X,Y
2eme : X+dx, Y=Y+dy (dx,dy, delta entre 2 cartes, à choisir par toi)
...
Xeme carte, Y =Ymax => à partir de maintenant:
Yeme carte : X+dx, Y-dy
...

Voilà en simplifié.

**MABROUKI** · 05/01/2014, 23h27

bonjour

Comme dit par GuruuMeditation,il y a 36 milles moyens d' y arriver ...tout depend des fonctionnalites souhaites pour ton jeu de cartes ...
More simplistic way c'est le canvas du 1er exemple....

Tes cartes seront des buttons (ou des controls images si tu as les .png de tes 52 cartes,evidemment c'est un control image à utiliser avec 52 BitmapImages en resources static dans le fichier app.xam ...
)...
Il est base sur :
-increment d'un bon angle de depart
-increment de canvas.left approprie
-& RenderTransform
code 1er exemple tout en xaml(code pour bourrin nul en trigo) .

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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
 
<Window x:Class="WpfJeuCartes.WinCanvasCartes"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WinCanvasCartes" Height="300" Width="300">
    <Window.Resources>
        <!--le style pour ne pas se taper la frappe de presentation des boutons ou 
        des eventuels controls images-->  
        <Style  TargetType="{x:Type Button}">
            <Setter Property="Width" Value="100"></Setter>
            <Setter Property="Height" Value="140"></Setter>
            <Setter Property="Foreground" Value="Red"></Setter>
            <Setter Property="Background" Value="LightBlue"></Setter>
            <Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
            <Setter Property="VerticalContentAlignment" Value="Top"></Setter>
            <Setter Property="FontSize" Value="14"></Setter>
        </Style>
    </Window.Resources>
    <Viewbox>
        <Canvas
            Width="220" Height="400">
            <!--start angle =300  sens horaire et  increment de 10-->
            <!--abscisse Canvas.Left =0 et  increment de 10-->
            <Button  
                Content="H1" 
                Canvas.Left="0"  Canvas.Top="100">
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="300"/>
                    </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="HA" ></Button>
                </Button.ToolTip>
            </Button>
 
            <Button
                Content="H2"
                Canvas.Left="10" Canvas.Top="100">
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="310"/>
                    </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="H2" ></Button>
                </Button.ToolTip>
            </Button>
            <Button
                Content="H3"
                Canvas.Left="20" Canvas.Top="100">
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="320"/>
                </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="H3" ></Button>
                </Button.ToolTip>
            </Button>
            <Button
                Content="H3"
                Canvas.Left="30" Canvas.Top="100">
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="330"/>
                </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="H3" ></Button>
                </Button.ToolTip>
            </Button>
            <Button
                Content="H4"
                Canvas.Left="40" Canvas.Top="100">
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="340"/>
                </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="H4" ></Button>
                </Button.ToolTip>
            </Button>
            <Button
                Content="H5"
                Canvas.Left="50" Canvas.Top="100">
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="350"/>
                </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="H5" ></Button>
                </Button.ToolTip>
            </Button>
            <Button
                Content="H6"
                Canvas.Left="60" Canvas.Top="100">
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="360"/>
                </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="H6" ></Button>
                </Button.ToolTip>
            </Button>
            <Button
                Content="H7"
                Canvas.Left="70" Canvas.Top="100">
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="370"/>
                </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="H7" ></Button>
                </Button.ToolTip>
            </Button>
            <Button
                Content="H8"
                Canvas.Left="80" Canvas.Top="100">
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="380"/>
                </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="H8" ></Button>
                </Button.ToolTip>
            </Button>
            <Button
                Content="H9"
                Canvas.Left="90" Canvas.Top="100">
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="390"/>
                </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="H9" ></Button>
                </Button.ToolTip>
            </Button>
            <Button
                Content="H10"
                Canvas.Left="100" Canvas.Top="100">
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="400"/>
                </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="H10" ></Button>
                </Button.ToolTip>
            </Button>
            <Button
                Content="H11"
                Canvas.Left="110" Canvas.Top="100">
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="410"/>
                </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="H11" ></Button>
                </Button.ToolTip>
            </Button>
            <Button
                Content="H12"
                Canvas.Left="110" Canvas.Top="100">
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="420"/>
                </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="H2" ></Button>
                </Button.ToolTip>
            </Button>
 
            <!--saut ligne suivante et on repart -->
            <!--start angle =300  sens horaire et  increment de 10-->
            <!--abscisse Canvas.Left =0 + Hauteur de saut approprie et  increment de 10-->
            <Button
                Content="H13"
                Canvas.Left="0" Canvas.Top="300"
                Background="NavajoWhite"  >
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="300"/>
                </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="H2" ></Button>
                </Button.ToolTip>
            </Button>
            <Button
                Content="H15"
                Canvas.Left="10" Canvas.Top="310"
                Background="NavajoWhite"  >
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="310"/>
                </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="H2" ></Button>
                </Button.ToolTip>
            </Button>
            <Button
                Content="H15"
                Canvas.Left="20" Canvas.Top="320"
                Background="NavajoWhite"  >
                <Button.RenderTransform>
                    <RotateTransform 
                        CenterX="50" CenterY="140" Angle="320"/>
                </Button.RenderTransform>
                <Button.ToolTip>
                    <Button Content="H2" ></Button>
                </Button.ToolTip>
            </Button>
        </Canvas>
    </Viewbox>
</Window>

Le 2eme exemple plus evolue necessite de coder:
- un custom panel "canvas " qui s'occupe de disposer les cartes dans le panel en 2 rangees ...
- utilise un itemscontrol :listbox qui se binde à un observable collection
d' ItemCarte .
- un mouse_up sur le border du control image permute une carte du sommet avec une carte bas de pile...

- fluiditer : ajout des references aux assembllies System.Windows.Interactivity et Microsoft.Expression.Interactions pour le fluid behavior....

code .cs du class ItemCarte:

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
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Media;
using System.Windows;
using System.Collections.ObjectModel;
using System.ComponentModel;
 
namespace WpfJeuCartes
{
    public class ItemCarte : INotifyPropertyChanged
    {
        private ImageSource image;
        public ImageSource Image
        {
            get { return image; }
            set { 
                image=value;
                RaisePropertyChanged("Image");
            }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(string nameProp)
        {
            PropertyChangedEventHandler h = PropertyChanged;
            if (h != null)
            {
                h(this, new PropertyChangedEventArgs(nameProp));
            }
        }
    }
    public class ItemCartes : ObservableCollection<ItemCarte>
    {
        public ItemCartes() { }
    }
 
 
}

code .cs du custom "canvas":

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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
 
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
 
namespace WpfJeuCartes
{
    public class CarteCanvas : Panel
    {
        public Orientation Orientation
        {
            get { return (Orientation)GetValue(OrientationProperty); }
            set { SetValue(OrientationProperty, value); }
        }
        public static readonly DependencyProperty OrientationProperty =
            DependencyProperty.Register("Orientation", 
            typeof(Orientation),
            typeof(CarteCanvas),
            new FrameworkPropertyMetadata(Orientation.Horizontal,
            FrameworkPropertyMetadataOptions.AffectsArrange));
 
        public double Spacing
        {
            get { return (double)GetValue(SpacingProperty); }
            set { SetValue(SpacingProperty, value); }
        }
        public static readonly DependencyProperty SpacingProperty =
            DependencyProperty.Register("Spacing", 
            typeof(double),
            typeof(CarteCanvas),
            new FrameworkPropertyMetadata(10d,
            FrameworkPropertyMetadataOptions.AffectsArrange));
 
        public double AngleIncrement
        {
            get { return (double)GetValue(AngleIncrementProperty); }
            set { SetValue(AngleIncrementProperty, value); }
        }
        public static readonly DependencyProperty AngleIncrementProperty =
            DependencyProperty.Register("AngleIncrement",
            typeof(double),
            typeof(CarteCanvas),
            new FrameworkPropertyMetadata(10d,
            FrameworkPropertyMetadataOptions.AffectsArrange));
 
        protected override Size MeasureOverride(Size availableSize)
        {
            foreach (UIElement child in this.Children)
            {
                // Give each child all the space it wants
                if (child != null)
                child.Measure(new Size(Double.PositiveInfinity,Double.PositiveInfinity));
            }
            // Un Canvas n'exige pas un size defini...
            return new Size(0, 0);
        }
        protected override Size ArrangeOverride(Size finalSize)
        {
 
            int totalCount = this.Children.Count ;
            int count = totalCount/2;
 
            // Center the children
            Point location = new Point(0, 0);
            double angle = GetStartingAngle(count);
 
            double horizSpacingEllipse = 0.0; 
            double vertSpacingEllipse = 0.0;
 
            UIElement child;
            for (int i = 0; i < totalCount; i++)
            {
                child = this.Children[i];
                if (child != null)
                {
                    horizSpacingEllipse = Math.Max(horizSpacingEllipse, 1.5 * child.DesiredSize.Width);
                    vertSpacingEllipse = Math.Max(vertSpacingEllipse, 1.5 * child.DesiredSize.Height);
                }
            }
            // ELLIPSE 1
            for (int i = 0; i < count ; i++)
            {
                child = this.Children[i];
                if (child != null)
                {
                    // Donner à  child son  desired size
                    child.Arrange(new Rect(location, child.DesiredSize));
 
                    // Surcharge tout RenderTransform aplique aux childs 
                    // arranges children 
                    child.RenderTransform =
                        new RotateTransform(angle,
                        child.RenderSize.Width / 2,
                        child.RenderSize.Height);
 
                    //Maj  offset & angle pour suivant
                    if (Orientation == Orientation.Vertical)
                    {
                        location.Y += Spacing;
                    }
                    else
                    {
                        location.X += Spacing;
                    }
 
                    angle += AngleIncrement;
                }
 
            }
            // ELLIPSE 2
            angle = GetStartingAngle(totalCount-count);
            location.X += horizSpacingEllipse;
            location.Y += vertSpacingEllipse; 
            if (Orientation == Orientation.Vertical)
            {
                location.Y=0.0;
            }
            else
            {
                location.X =0.0;
            }
 
 
            for (int i = count+1; i < totalCount; i++)
            {
                child = this.Children[i];
                if (child != null)
                {
                    // Donner à  child son  desired size
                    child.Arrange(new Rect(location, child.DesiredSize));
 
                    // Surcharge tout RenderTransform aplique aux childs 
                    // arranges children 
                    child.RenderTransform =
                        new RotateTransform(angle,
                        child.RenderSize.Width / 2,
                        child.RenderSize.Height);
 
                    //Maj  offset & angle pour suivant
                    if (Orientation == Orientation.Vertical)
                    {
                        location.Y += Spacing;
                    }
                    else
                    {
                        location.X += Spacing;
                    }
 
                    angle += AngleIncrement;
                }
 
            }
            // Remplir tout l'espace donne
            return finalSize;
        }
        double GetStartingAngle(int count)
        {
            double angle;
            if (count % 2 != 0)
 
            { 
                // Impair: le child milieu aura  angle == 0
                angle = -AngleIncrement * (count / 2);
            }
            else
            { 
                // Pair  
                angle = -AngleIncrement * (count / 2) + AngleIncrement / 2;
 
            }
 
            if (Orientation == Orientation.Vertical) 
            {
                // ajoute  90 degrees s vertical
                angle += 90;
            }
            return angle;
        }
    }
}

xaml du winform utilisateur:

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
 
<Window x:Class="WpfJeuCartes.WinPanelCartes"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfJeuCartes"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
        Title="WinPanelCartes"    Height="350" Width="525"
        DataContext="{Binding}">
    <Window.Resources>
        <DataTemplate 
            x:Key="carteTemplate"
            DataType="{x:Type local:ItemCarte}">
            <Border 
                BorderBrush="Red" 
                BorderThickness="2"  
                Background="BlanchedAlmond"
                MouseUp="Border_MouseUp" Tag="{Binding}">
                <Border.ToolTip>
                    <Image  
                        Width="100"
                        Height="140"
                       Source="{Binding Path=Image}">
                    </Image>
                </Border.ToolTip>
                <Border.Effect>
                    <DropShadowEffect Color="#FFA1A1A1" ShadowDepth="2"/>
                </Border.Effect>
                <Image 
                    Margin="5" 
                    Width="100"
                    Height="140"
                   Source="{Binding Path=Image}">
                </Image>
            </Border>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Button x:Name="btnLoadCartes" Content="LoadCartes" Click="btnLoadCartes_Click" ></Button>
        <Viewbox
            Grid.Row="1"
            MaxWidth="1000" MaxHeight="1000" 
            Stretch="UniformToFill">
            <ListBox 
                BorderThickness="0"
                ItemTemplate="{StaticResource carteTemplate}"
                ItemsSource="{Binding}">
                <ListBox.ItemsPanel >
                    <ItemsPanelTemplate>
                        <local:CarteCanvas
                            Margin="100 40" 
                            Width="1000"  Height="1000"
                            Orientation="Horizontal"      
                            Spacing="25"
                            AngleIncrement="15"
                            >
                            <i:Interaction.Behaviors>
                                <ei:FluidMoveBehavior AppliesTo="Children" Duration="00:00:00.25"/>
                            </i:Interaction.Behaviors>
                        </local:CarteCanvas>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>
        </Viewbox >
    </Grid>
</Window>

et son code behind .cs:

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
 
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.Shapes;
using System.Collections.ObjectModel;
 
namespace WpfJeuCartes
{
    /// <summary>
    /// Logique d'interaction pour WinPanelCartes.xaml
    /// </summary>
    public partial class WinPanelCartes : Window
    {
        public ItemCartes Cartes { get; set; }
        public WinPanelCartes()
        {
            InitializeComponent();
            Cartes = new ItemCartes();
            this.DataContext = Cartes;
 
        }
        //chargement de 10 Cartes du dossier images
        //denommees 1.png à 10.png
        private void btnLoadCartes_Click(object sender, RoutedEventArgs e)
        {
            string b = "pack://application:,,,/WpfJeuCartes;component/MesImages/";
 
            for (int i = 1; i < 11; i++)
            {
                string path = string.Format("{0}{1}.png", b, i);
                ItemCarte item = new ItemCarte { Image = new BitmapImage(new Uri(path)) };
                Cartes.Add(item);
            }
 
        }
 
        private void Border_MouseUp(object sender, MouseButtonEventArgs e)
        {
            ItemCarte item = (ItemCarte)((FrameworkElement)sender).Tag;
 
            int indexOf = Cartes.IndexOf(item);
            Cartes.Move(indexOf, Cartes.Count - 1);
        }
    }
}

bon code...

Placer des images comme des cartes

Windows Presentation Foundation

Vue hybride

Discussions similaires

Partager

Partager