Question

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

Answer 1

你可以试着把

VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"

用于stackpanel和contentPresenter

Answer 2

@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事件

自定义按钮内容对齐

2 个答案: