自定義按鈕內容對齊

我正試圖在xaml中創建自定義按鈕。這很好，但我有一些奇怪的問題與內容的一致性。自定義按鈕內容對齊

如果我在"root grid"中放置了一個自定義按鈕，整個按鈕都是可點擊的，並且內容（按鈕的文本）正確地居中對齊。

但是，如果我把我的自定義按鈕，以這樣的方式

邊境
- 的StackPanel
  - MyButtons
  - MyButtons
  - 等...

然後，我的按鈕的內容也正確居中，但只能點擊內容的文本。不是整個按鈕...

如果我設置我的內容對齊來拉伸，它是可點擊的，但文本不是中心。

這是我的xaml：我如何讓整個按鈕在上面的設置中可點擊？

控件模板：

<ControlTemplate x:Key="ollema"> 
    <Grid Background="{TemplateBinding Background}" VerticalAlignment="Stretch"> 
     <Border Name="border" 
      BorderBrush="{TemplateBinding BorderBrush}" 
      BorderThickness="{TemplateBinding BorderThickness}"> 
      <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> 
       <ContentPresenter Content="{TemplateBinding Property=ContentControl.Content}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
       </ContentPresenter> 
      </StackPanel> 
     </Border> 
    </Grid> 
</ControlTemplate>

XAML在我的主窗口：

<Border BorderBrush="White" BorderThickness="1" Margin="0" Width="200" Background="#FF00641E" HorizontalAlignment="Center" VerticalAlignment="Center"> 
    <StackPanel Width="150" HorizontalAlignment="Center" VerticalAlignment="Center"> 
      <ToggleButton Template="{StaticResource ollema}" Content="ToggleButton" Height="57" BorderBrush="White" Foreground="#FFE8E8E8" Background="{x:Null}" BorderThickness="0,0,0,1"/> 
      <ToggleButton Template="{StaticResource ollema}" Content="ToggleButton" Height="57" BorderBrush="White" Foreground="#FFE8E8E8" Background="{x:Null}" BorderThickness="0,0,0,1"/> 
      <ToggleButton Template="{StaticResource ollema}" Content="ToggleButton" Height="57" BorderBrush="White" Foreground="#FFE8E8E8" Background="{x:Null}" BorderThickness="0,0,0,1"/> 
      <ToggleButton Template="{StaticResource ollema}" Content="ToggleButton" Height="57" BorderBrush="White" Foreground="#FFE8E8E8" Background="{x:Null}" BorderThickness="0,0,0,1"/> 
      <ToggleButton Template="{StaticResource ollema}" Content="ToggleButton" Height="57" BorderBrush="White" Foreground="#FFE8E8E8" Background="{x:Null}" BorderThickness="0,0,0,1"/> 
      <ToggleButton Template="{StaticResource ollema}" Content="ToggleButton" Height="57" BorderBrush="{x:Null}" Foreground="#FFE8E8E8" Background="{x:Null}" BorderThickness="0"/> 
    </StackPanel> 
</Border>

來源

2013-05-03 DeMama

這是'Button'本身的'ControlTemplate'嗎？如果這樣的話，將其中的ContentControl控件切換到ContentPresenter。並將'Style'設置爲'Background'的默認'Setter'爲'Transparent'，並在'Grid'中添加'Background =「{TemplateBinding Background}」''。 – Viv 2013-05-03 10:27:27

@Viv是的，它是ControlTemplate本身。我嘗試了你的建議，但它給了我相同的結果。我認爲這與我的'buttons'包含在'stackpanel'中，而我的堆棧面板包含在'border'中有關係。我會玩更多.. – DeMama 2013-05-03 10:47:00

好，你可以添加你的完整xaml代碼，然後請。我無法用你發佈的代碼重現這一點。 Style，StackPanel，與xaml相關的一切都與此有關。 – Viv 2013-05-03 12:04:04

@DeMama設置你的ToggleButton的Background到Transparent，而不是x:Null

喜歡的東西

<Border BorderBrush="White" BorderThickness="1" Margin="0" Width="200" Background="#FF00641E" HorizontalAlignment="Center" VerticalAlignment="Center"> 
    <StackPanel Width="150" HorizontalAlignment="Center" VerticalAlignment="Center"> 
      <ToggleButton Template="{StaticResource ollema}" Content="ToggleButton" Height="57" BorderBrush="White" Foreground="#FFE8E8E8" Background="Transparent" BorderThickness="0,0,0,1"/> 
      <ToggleButton Template="{StaticResource ollema}" Content="ToggleButton" Height="57" BorderBrush="White" Foreground="#FFE8E8E8" Background="Transparent" BorderThickness="0,0,0,1"/> 
      <ToggleButton Template="{StaticResource ollema}" Content="ToggleButton" Height="57" BorderBrush="White" Foreground="#FFE8E8E8" Background="Transparent" BorderThickness="0,0,0,1"/> 
      <ToggleButton Template="{StaticResource ollema}" Content="ToggleButton" Height="57" BorderBrush="White" Foreground="#FFE8E8E8" Background="Transparent" BorderThickness="0,0,0,1"/> 
      <ToggleButton Template="{StaticResource ollema}" Content="ToggleButton" Height="57" BorderBrush="White" Foreground="#FFE8E8E8" Background="Transparent" BorderThickness="0,0,0,1"/> 
      <ToggleButton Template="{StaticResource ollema}" Content="ToggleButton" Height="57" BorderBrush="{x:Null}" Foreground="#FFE8E8E8" Background="Transparent" BorderThickness="0"/> 
    </StackPanel> 
</Border>

只是嘗試這樣做，並單擊事件被調用罰款，即使外面的ContentPresenter

來源

2013-05-03 13:57:33 Viv

偉大的工程就像一個魅力！感謝的人，不知道這會是這麼簡單:) – DeMama 2013-05-03 14:01:56

@DeMama您的歡迎。大多數問題總是有簡單的解只是找到時間:) – Viv 2013-05-03 14:04:08

你可以嘗試把

VerticalAlignment="Stretch" 
HorizontalAlignment="Stretch"

爲StackPanel中和contentPresenter兩個

來源

2013-05-03 12:18:25 Daniel

已經嘗試過，但後來我的'按鈕內容'在'左上角'的位置，我需要它在中心.. – DeMama 2013-05-03 12:21:06

添加一些保證金到您的ContentPresenter或一些填充到您的堆疊面板 – Daniel 2013-05-03 12:22:53

自定義按鈕內容對齊

回答

相關問題