2010-10-12 6 views
1

gars J'ai StackPanel. J'ai besoin d'y placer TextBlock avec TextAlignment = TextAlignment.Center [Center of stackPanel] et le bouton sur le côté droit avec une petite marge. Comment puis-je obtenir une telle mise en page avec wpf.WPF. Problème de mise en page

Comment puis-je ajouter un bouton à StackPanel, que mon TextBlock ne bouge pas du centre.

+0

Voulez-vous dire que vous voulez que la zone de texte à aligner point mort de votre mise en page, et le bouton pour le droit de la zone de texte (sans affecter le centrage)? –

+0

Oui. J'ai besoin de TextBox aligné au centre mort –

Répondre

3

Essayez quelque chose comme ceci:

<Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="Auto"/> 
     </Grid.ColumnDefinitions> 

     <TextBox x:Name="txtCentered" 
       Grid.Column="0" 
       Grid.ColumnSpan="2" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center" 
       Text="Here Is My Text Box" /> 

     <StackPanel x:Name="stackButtons" 
        Grid.Column="1" 
        Orientation="Vertical" 
        VerticalAlignment="Center"> 
      <Button x:Name="btnOne" Content="Button One" /> 
      <Button x:Name="btnTwo" Content="Button Two" /> 
      <Button x:Name="btnThree" Content="Button Three" /> 
     </StackPanel> 
</Grid> 

Notez que la zone de texte couvre l'ensemble du réseau (columnspan = "2"), de sorte qu'il sera tout à fait centrée sur la grille (HorizontalAlignment = "Centre "). La deuxième colonne aura juste un StackPanel (ou Grid, ou UniformGrid, ou ...) avec les boutons.

REMARQUE: L'inconvénient connu de cette conception est que les boutons peuvent chevaucher la zone de texte si la zone de texte est assez grande et la grille est suffisamment petite. Des précautions devront être prises pour éviter cela, et est laissée comme un exercice pour le développeur. Toutefois, cet inconvénient se produira sur toute mise en œuvre où l'exigence est que le TextBox est au centre de la mise en page.

+0

Évidemment, si vous voulez utiliser TextBlock au lieu de TextBox, vous pouvez. Votre question et vos commentaires mentionnent les deux, et je lis "TextBox" en dernier. :) –

+0

Grid.ColumnSpan = "2" était la caractéristique clé que je Oublie. Merci beaucoup!!! –

0

Que diriez-vous quelque chose comme:

<StackPanel> 
    <Grid HorizontalAlignment="Stretch"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
      <ColumnDefinition Width="Auto"/> 
     </Grid.ColumnDefinitions> 
     <TextBlock Text="MyTextBlock" TextAlignment="Center"/> 
     <Button HorizontalAlignment="Right" Grid.Column="1">MyButton</Button> 
    </Grid> 
</StackPanel> 

EDIT:

Si vous voulez TextBlock être au centre de la grille, vous pouvez simplement supprimer les ColumnDefinitions ci-dessus. Cependant, notez que si la grille devient assez petite ici, le bouton chevauchera le TextBlock.

<StackPanel> 
     <Grid HorizontalAlignment="Stretch"> 
      <TextBlock Text="MyTextBlock" TextAlignment="Center"/> 
      <Button HorizontalAlignment="Right">MyButton</Button> 
     </Grid> 
    </StackPanel> 
+0

voir EDIT. vérifier si cela fonctionne assez pour vous. – ASanch

+0

Merci, mais si je veux plus complexe mise en page de cette grille? Cette variante sans colonnes n'est pas très flexible. Si je veux deux ou trois boutons à droite. Je pense que les marges absolues ne sont pas sympas. –

+0

Si vous utilisez une grille, pourquoi utiliser le StackPanel? –

0

Pour éviter un chevauchement potentiel entre TextBlock et Button, vous pouvez calculer la marge gauche du bouton qui se trouve à côté du TextBlock au centre à l'aide d'un convertisseur de valeur. Cela dit, j'aime toujours la réponse fournie par @Wonko car elle est simple et standard.

Voici le XAML:

<Window x:Class="TextBoxInCenter.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:TextBoxInCenter" 
    Title="MainWindow" 
    Height="350" Width="525"> 
    <Grid> 
    <Grid.Resources> 
     <local:CustomThicknessValueConverter x:Key="CustomThicknessValueConverter" /> 
    </Grid.Resources> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 
    <TextBlock 
     x:Name="CenterTextBox" 
     Grid.Column="0" 
     Grid.ColumnSpan="2" 
     Grid.Row="0" 
     Text="Text in Center" 
     HorizontalAlignment="Center" 
     VerticalAlignment="Center" 
     TextAlignment="Center"/> 
    <StackPanel 
     Grid.Column="1" 
     Grid.Row="0" 
     Orientation="Horizontal"> 
     <Button 
      Margin="{Binding ElementName=CenterTextBox, 
         Path=ActualWidth, 
         Converter={StaticResource CustomThicknessValueConverter}}" 
      Height="23" 
      Content="Click me 1"> 
     </Button> 
     <Button 
      Height="23" 
      Content="Click me 2"> 
     </Button> 
    </StackPanel> 
    </Grid> 
</Window> 

est ici le convertisseur de valeur:

using System; 
using System.Diagnostics; 
using System.Windows; 
using System.Windows.Data; 

namespace TextBoxInCenter 
{ 
    public class CustomThicknessValueConverter : IValueConverter 
    { 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     Debug.WriteLine("Convert"); 

     Thickness thickness = new Thickness(0, 0, 0, 0); 

     if (value != null) 
     { 
     double actaulwidth = (double)value; 
     thickness.Left = actaulwidth/2; 
     } 

     return thickness; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
    } 
}