Question

人我有StackPanel。我需要将TextBlock与TextAlignment = TextAlignment.Center [stackPanel的中心]放在一起，右边的按钮带有小边距。如何使用wpf实现这种布局。

如何向StackPanel添加按钮，我的TextBlock不会从中心移动。

Answer 1

尝试这样的事情：

<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>

请注意，TextBox跨越整个Grid（ColumnSpan =“2”），因此它将绝对居中于Grid（HorizontalAlignment =“Center”）。第二列只有一个带有按钮的StackPanel（或Grid，或UniformGrid，或......）。

注意：此设计的已知缺点是，如果TextBox足够大且Grid足够小，则按钮可能与TextBox重叠。必须注意避免这种情况，并将其作为开发人员的练习。但是，任何需要TextBox都是布局死角的实现都会出现这个缺点。

Answer 2

如下：

<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>

编辑：

如果您希望文本块位于网格的中心，则可以删除上面的ColumnDefinitions。但请注意，如果网格在此处变小，则按钮将与TextBlock重叠。

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

Answer 3

为避免TextBlock和Button之间可能出现重叠，您可以使用值转换器计算最后在中心TextBlock旁边的Button的左边距。这就是说我仍然喜欢@Wonko提供的答案，因为它简单而标准。

这是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>

这是价值转换器：

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();
    }
  }
}

WPF。布局问题

3 个答案: