WPF Container/grid layout

J'ai besoin de créer un conteneur WPF qui peut afficher une collection de 3 types de contrôles différents. La hauteur et la largeur de chaque contrôle sont basées sur les autres. Ex, si controlA est 200X200, controlB sera 100X200 et controlC sera 50X50. J'ai besoin de savoir comment je peux créer un conteneur assez intelligent pour organiser ces contrôles en trouvant la meilleure disposition en fonction de l'espace disponible et de la quantité de chaque type de contrôle.WPF Container/grid layout

Prenons le cas ci-dessous où nous avons 1 instance de controlA, 1 instance de controlB et 2 instances de controlC. Remarquez comment cette position élégante lui donnant un aspect compact par opposition à une liste de commandes séquentielles.

container http://onlinegolfpool.com/images/grid.png

Toutes les idées sur la façon d'aborder? Dois-je utiliser une grille et calculer cela par moi-même?

Merci à l'avance

Source

2012-06-22 MickeySixx

Vous avez un exemple dans les commentaires ci-dessous de "5 instances de controlA, 3 instances de controlB et 11 controlC". Dans ce genre de situation, les ratios sont-ils les mêmes? Ce qui signifie que A sera toujours deux fois la hauteur de B, et tout B sera deux fois la largeur de C? – Rachel

Oui, le ratio (taille) pour les types/contrôles est toujours le même - le nombre de types/contrôles est la seule chose qui diffère. – MickeySixx

Il semble que vous ayez besoin de créer votre propre 'Panel' personnalisé, ou de déterminer si vous pouvez effectuer un algorithme sur les données pour déterminer le nombre de lignes/colonnes dont vous aurez besoin et la ligne/colonne pour chaque élément, et utiliser un 'ItemsControl' avec le' ItemsPanelTemplate' mis à un 'Grid' – Rachel

Vous devez absolument utiliser la grille, mais ne pensez même pas de calcul sur votre propre :) Utilisez astérisque (*) pour définir la taille relative pour chaque cellule. WPF fera le reste pour vous.

Exemple:

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="2*"/> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <Rectangle Fill="Pink" Stroke="Black" Grid.RowSpan="2"/> 
    <Rectangle Fill="Blue" Stroke="Black" Grid.Column="1" Grid.ColumnSpan="2"/> 
    <Rectangle Fill="Yellow" Stroke="Black" Grid.Row="1" Grid.Column="1"/> 
    <Rectangle Fill="Yellow" Stroke="Black" Grid.Row="1" Grid.Column="2"/> 
</Grid>

Asterisk est très puissant, et beaucoup de gens ne savent même pas à ce sujet :) Enjoy!

Source

2012-06-22 16:42:07

Ouais mais que se passe-t-il quand j'ai 5 instances de controlA, 3 instances de controlB et 11 controlC? J'ai besoin de quelque chose de flexible et assez intelligent pour gérer ces situations. – MickeySixx

Ensuite, vous pourriez utiliser UniformGrid, imbriqué dans une cellule –

Est-il possible de voir un exemple .xaml, un dans lequel je lie à une liste de couleurs, où je peux définir ItemSource {Binding Path = MyColorsCollection}? – MickeySixx

Ma suggestion est d'utiliser un panneau de pile au lieu de gridpanel. Donnez ensuite la largeur codée en dur à n'importe quel contrôle et le reste de la zone s'ajustera.

<StackPanel Orientation=Horizontal> 
<leftcontrol/> 
<StackPanel Orientation=Vertical> 
<firstcontrol/> 
<StackPanel Orientation=Horizontal> 
<bottomLeftControl/> 
<bottomRightControl/> 
</StackPanel> 
</StackPanel> 
</StackPanel>

Source

2012-06-22 16:46:30 dreamerkumar

Ouais mais ce qui se passe quand j'ai 5 instances de controlA, 3 instances de controlB et 11 controlC? J'ai besoin de quelque chose de flexible et assez intelligent pour gérer ces situations. – MickeySixx

Utilisez DockPanel et laissez-le gérer la disposition – dreamerkumar

Vishal, pouvez-vous me fournir un exemple .xaml, un dans lequel je lie à une liste de couleurs, où je peux définir ItemSource {Binding Path = MyColorsCollection}? – MickeySixx

WPF Container/grid layout

Répondre

Questions connexes