自定义按钮内容对齐

我正试图在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

自定义按钮内容对齐

回答

相关问题