2010-10-01 85 views
13

是否有原因導致WPF按鈕的文本內容出現在文本上方的不需要的空間中?WPF按鈕中的文本內容不是垂直居中

我在StackPanel中有一個按鈕。此按鈕是一個簡單的關閉按鈕,所以我希望它顯示爲一個方形按鈕,並在其中居中放置一個「x」。我已經將填充設置爲零,並將Horizo​​ntalContentAlign和VerticalContentAlign設置爲居中,但「x」仍然出現在按鈕的底部(或者如果我的FontSize相對於我的高度過大,則應該截斷)。就好像在按鈕的頂部有一些填充物可以防止文字使用完整的垂直空間。

我的XAML是:

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

的問題是完全一樣的,我應該把我的按鈕VerticalContentAlign財產或者拉伸甚至前。如果我刪除了「高度」和「重量」屬性,以便按鈕確定它自己,那麼控件不會顯示爲正方形,而是直立的矩形,「x」仍然不居中。

更新: 雖然按鈕和內容現在都處於中心位置,但按鈕仍然顯示得比需要的大得多,就好像正在應用高填充一樣。

我的資源風格定義現在如下:

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

按鈕本身被定義爲:

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

的擴展一個StackPanel內的DockPanel中中的組框之內是。

在設計視圖中,按鈕大小正確,只包含X,但在運行時會變大。我該如何糾正?

+0

小寫的「x」的頂部有一些填充,只需因爲它是一個小寫字母。嘗試使用大寫「X」或使用WPF的繪圖功能自己繪製X:http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/bcc46802-cfe8-46a6-a07e-9fbbeddc423a – Heinzi 2010-10-01 13:44:47

回答

11

我的猜測是你看到這個問題,因爲你給它的高度和它實際需要正確渲染它的空間之間存在衝突。

事情可以做,以解決這個問題:

  • 播放與按鈕的Padding屬性。這將控制文本和按鈕邊框之間的距離。
  • 縮小字體大小。
  • 不要在按鈕上放一個明確的高度,或者至少給它一個足夠大的高度來容納你想要的字體大小和填充。

此外,由Heinzi在評論中提到的,你當然應該使用大寫X.

順便說一句,這裏有一個竅門,如果你想使按鈕是一個正確的正方形,而你可以使用確保按鈕獲得所需的大小。

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

這有效地讓按鈕決定它需要的高度,然後將寬度設置爲該計算值。

+0

謝謝,都。這工作很好。我只使用小寫字母「x」,因爲大寫字母被截斷,但現在我使用Isak給出的代碼來允許按鈕設置它自己的高度並使用它來獲得正方形,它全部出現就像我想要的一樣。 – 2010-10-01 14:36:39

15

一個簡單的方法以小寫「x」是使用TextBlock的內容,並與它的上緣發揮來實現:

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

我發現這個解決方案在類似的情況下要簡單得多。我試圖給兩個按鈕添加非常大的'+'和' - '字符,並且隨時將字體大小設置爲40以上,上面所接受的答案無效。具有負上邊距的TextBlock完美工作! – BMB 2013-08-19 14:37:03