Comment appliquer un Contrôle de zone de texte Modèle?
Je vais essayer de simplifier un peu de code et d'améliorer ma gestion.
J'ai d'abord été la recherche d'un moyen d'avoir une zone de texte aligné à gauche, qui peut rétrécir et de l'étendre à un maximum de valeur sans centrage à l'intérieur d'une cellule de la grille après avoir atteint la valeur maximale.
J'ai donc commencé à écrire un peu de code comme ceci...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<TextBox Text="Some text"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
Margin="10"
MaxWidth="150" />
</Grid>(Code 1)
Et qui donne quelque chose comme ceci...
(Figure 1)
Comme vous pouvez le voir, cette centres de la zone de texte avec un max de largeur, mais il est aligné au centre de la cellule de la grille.
Alors j'ai pensé que peut-être que si j'ai changé l'alignement horizontal de la zone de texte comme si...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<TextBox Text="Some text"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10"
MaxWidth="100" />
</Grid>(Code 2)
Mais malheureusement, seulement donne quelque chose comme ceci...
(Figure 2)
Encore une fois, ce n'est pas juste, parce que, en dépit de tout l'espace vide sur la droite, la zone de texte n'est pas l'expansion de sa largeur maximale est de 100 comme je veux.
Finalement, j'ai trouvé que si vous mettez la zone de texte à l'intérieur d'une grille imbriquée, vous allez obtenir l'effet désiré.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"
MaxWidth="120" />
<ColumnDefinition Width="0*" />
</Grid.ColumnDefinitions>
<TextBox Text="Some text"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
Margin="10"
MaxWidth="100" />
</Grid>
</Grid>(Code 3)
Qui donne cette...
(Figure 3)
Comme vous pouvez le voir, la grille imbriquée remplit tout à 200 à l'échelle de l'espace, mais la zone de texte remplit de gauche à 100, et les feuilles de l'espace vide sur la droite. (Si cette fenêtre est re-extensible, il permettra de réduire et développer de façon appropriée)
Je voudrais appliquer les méthodes de la exemple de Code 3 à un style ou d'un modèle de contrôle, afin que je puisse couverture de l'appliquer à des zones de texte où cette situation est applicable.
Dans un scénario parfait, je ferais quelque chose comme...
<TextBox Text="Some text"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
Margin="10"
MaxWidth="100"
Style="{StaticResource ExpandingTextBox}" /> (Code 4)
Et d'atteindre les mêmes résultats que Figure 3.
J'ai essayé les...
<Style TargetType="{x:Type TextBox}"
x:Key="ExpandingTextBox">
<Setter Property="OverridesDefaultStyle"
Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"
MaxWidth="170" />
<ColumnDefinition Width="0*" />
</Grid.ColumnDefinitions>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>(Code 5)
Mais que des causes justes, la zone de texte à disparaître à partir de mon formulaire tous ensemble. Je ne suis pas très bon à l'écriture des modèles de ce genre, donc je suis un peu à perte.
Aussi, une chose que je viens de réaliser, c'est que la largeur de la colonne imbriquée = MaxWidth + 2 x Marge. Je ne me dérangerait pas de réglage de la largeur de la colonne de manière explicite dans la zone de texte de la déclaration, mais si elle pouvait être automatique, ce serait génial.
OriginalL'auteur imdandman | 2013-04-25
Vous devez vous connecter pour publier un commentaire.
Vous avez besoin d'une zone de texte au lieu de ContentPresenter à l'intérieur de votre Modèle. Vous avez remplacé le modèle par défaut pour la zone de texte avec celui qui n'a plus de zone de saisie de texte.
Essayez comme ceci:
Cela devrait fonctionner, mais imo, c'est un peu bizarre..
OriginalL'auteur jure
Grâce à jure de m'avoir commencé. Comme toujours, il s'avère que la solution est un peu plus compliquée qu'à l'origine le laisse.
Examinons ce que j'ai fait.
En utilisant les idées présentées dans le post précédent, et après un peu de finagling, je suis venu avec le code suivant.
(Code 6)
Et bien sûr de l'appliquer à l'balisage XAML pour ma page comme ça...
(Code 7)
Qui donne un résultat de ce genre...
(Figure 4)
Après en regardant cette image, et de la pensée pendant un certain temps, elle s'enfile sur moi que le problème était que, même si j'ai été l'application de la largeur maximale à l'intérieur du style correctement, la largeur maximale de la propriété était toujours appliquée à la racine du contrôle dans le code XAML.
Essentiellement, il a été le serrant jusqu'à la largeur de la page, et puis après ça a été fait, il a appliqué la largeur maximale en vertu du style!
Si simple, mais si difficile à atteindre!
Donc, j'ai modifié le style de la propriété Tag pour appliquer le style de max largeur des éléments, depuis la Balise de propriété ne fait rien à la racine.
(Code 8)
Qui est appliqué dans le code XAML comme ça...
Et enfin donne les résultats escomptés c'est comme ça...
(Figure 5)
(Figure 6)
Donc, le vrai truc a été de réaliser que je n'ai pas forcément envie de limiter la largeur maximale de l'ensemble basé sur un modèle de contrôle, mais plutôt juste voulu limiter la largeur de la zone de texte interne à la de contrôle!
Une fois que j'ai compris, il ne fait sens que pour l'utilisation de la Balise de propriété qui n'a rien fait pour le contrôle au niveau de la racine!
J'espère que cela aide quelqu'un d'autre qui pourrait avoir ce problème!!!!
OriginalL'auteur imdandman