Nội dung văn bản trong một nút WPF không được làm trung tâm theo chiều dọc

Question

Có lý do nào khiến nội dung văn bản của nút WPF xuất hiện với không gian không mong muốn phía trên văn bản không?

Tôi có một nút trong StackPanel. Nút này là một nút đóng đơn giản vì vậy tôi muốn nó xuất hiện dưới dạng nút hình vuông có chữ "x" ở giữa. Tôi đã đặt padding của tôi là 0 và đặt cả HorizontalContentAlign và VerticalContentAlign thành Center nhưng "x" vẫn xuất hiện ở cuối nút (hoặc thậm chí cắt ngắn nếu tôi có FontSize quá lớn so với Height). Nó giống như có một số đệm ở trên cùng của nút ngăn chặn các văn bản bằng cách sử dụng không gian dọc đầy đủ.

My XAML là:

<StackPanel Orientation="Horizontal"> 
     <Label Content="{Binding GenderFilter.Title}" FontWeight="Bold" Width="60" /> 
     <Button Padding="0" Width="15" Height="15" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="12">x</Button> 
     <Label Content="{Binding GenderFilterExpander.SelectedValue}" /> 
</StackPanel> 

Vấn đề là chính xác giống tôi nên đặt nút của tôi sở hữu VerticalContentAlign hoặc là Stretch hoặc thậm chí trên. Nếu tôi loại bỏ các thuộc tính chiều cao và trọng lượng để nút xác định riêng của nó thì điều khiển không xuất hiện như một hình vuông nhưng một hình chữ nhật thẳng đứng và "x" vẫn không được căn giữa.

CẬP NHẬT: Trong khi nút và nội dung hiện được căn giữa hoàn toàn, nút vẫn được hiển thị lớn hơn nhiều so với mức cần thiết, như thể đang áp dụng Đệm cao.

định nghĩa kiểu tài nguyên của tôi bây giờ là như sau:

<Style x:Key="ClearFilterButtonStyle" TargetType="{x:Type Button}"> 
    <Setter Property="Padding" Value="0" /> 
    <Setter Property="Width" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=ActualHeight}" /> 
    <Setter Property="HorizontalContentAlignment" Value="Center" /> 
    <Setter Property="VerticalContentAlignment" Value="Center" /> 
    <Setter Property="Content" Value="X" /> 
    <Setter Property="FontSize" Value="8" /> 
</Style> 

Nút tự nó được định nghĩa là:

<Expander.Header> 
    <StackPanel Orientation="Horizontal"> 
      <Label Content="{Binding GenderFilter.Title}" FontWeight="Bold" Width="60" /> 
      <Button Style="{StaticResource ClearFilterButtonStyle}" 
            Visibility="{Binding GenderFilterExpander.ClearFilterVisibility}" /> 
      <Label Content="{Binding GenderFilterExpander.SelectedValue}" 
            Visibility="{Binding GenderFilterExpander.SelectedValueVisibility}" /> 
    </StackPanel> 
</Expander.Header> 

Các Expander là trong vòng một StackPanel trong một GroupBox trong một DockPanel.

Trong giao diện thiết kế, các nút được định kích thước chính xác, chỉ có chứa X, nhưng tại thời gian chạy chúng trở nên mở rộng. Làm thế nào tôi có thể sửa nó?

Answer 1

Tôi đoán là bạn thấy vấn đề này vì có xung đột giữa độ cao bạn đã cung cấp và không gian thực sự cần để hiển thị chính xác.

Những điều bạn có thể làm để giải quyết này:

• Chơi với tài sản Padding của nút. Điều này kiểm soát không gian giữa văn bản và đường viền của nút.
• Giảm kích thước phông chữ.
• Không đặt chiều cao rõ ràng lên nút hoặc ít nhất là đặt chiều cao đủ lớn để phù hợp với kích thước phông chữ và vùng đệm bạn muốn.

Ngoài ra, như đã đề cập bởi Heinzi trong các ý kiến, bạn nên dĩ nhiên sử dụng một chữ hoa X.

Bằng cách này, đây là một thủ thuật bạn có thể sử dụng nếu bạn muốn làm cho các nút được một hình vuông trong khi thích hợp đảm bảo nút có kích thước cần thiết.

<Button Padding="0" 
    Width="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=ActualHeight}" 
    HorizontalContentAlignment="Center" VerticalContentAlignment="Center" 
    FontSize="12" Content="X" /> 

Điều này cho phép nút này quyết định chiều cao cần thiết và sau đó bạn đặt Độ rộng thành giá trị được tính.

Answer 2

Một cách đơn giản để thực hiện điều này với một chữ "x" là sử dụng một TextBlock như nội dung và chơi với lề trên của nó:

<Button Command="{Binding myCommand}"> 
    <TextBlock Text="x" Margin="0,-3,0,0"/> 
</Button>