自定义按钮内容对齐

时间:2013-05-03 10:11:29

标签: wpf xaml button

我正在尝试在xaml中创建自定义按钮。这很好但是我对内容的对齐有一些奇怪的问题。

如果我在"root grid"中放置一个自定义按钮,则整个按钮都是可点击的,并且内容(按钮的文本)正确居中对齐。

但是,如果我以这种方式放置我的自定义按钮:

  • 边界
    • 的StackPanel
      • MyButtons
      • MyButtons
      • 等等...

然后,我的按钮 - 内容也正确居中,但只能点击内容的文字。不是整个按钮......

如果我将内容对齐设置为拉伸,则可以单击,但文本不是中心。

这是我的xaml:如何在上面的设置中点击整个按钮?

的ControlTemplate:

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

我的MainWindow中的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>

2 个答案:

答案 0 :(得分:0)

你可以试着把

VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"

用于stackpanel和contentPresenter

答案 1 :(得分:0)

@DeMama将Background中的ToggleButton设为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

之外,也会调用click事件