两个按钮与TextBox在中间，ControlTemplate

Question

遇到这种风格的问题，我找不到制作以下布局的方法：

所以我只需要将外部按钮的角落四舍五入，但我不知道如何做到这一点，因为按钮的ControlTemplate不能像我一样拥有CornerRadius属性必须围绕所有角落。

这是我现在拥有的风格，它只是产生如上所示的风格但没有CornerRadius。

P.S。 TextBox后面的最左侧按钮似乎存在问题，当TextBox稍微透明时，我注意到了这一点。不确定是什么导致了这个！

XAML

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Controls">

    <Style TargetType="{x:Type local:NumericUpDown}">
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Right" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Focusable" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:NumericUpDown}">
                    <ControlTemplate.Resources>
                        <Style TargetType="Button">
                            <Setter Property="Padding" Value="5" />
                            <Setter Property="Background" Value="#434953" />
                            <Setter Property="MinWidth" Value="30" />
                            <Setter Property="MinHeight" Value="25" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Button">
                                        <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
                                            <Border x:Name="Border1"
                                                       HorizontalAlignment="Stretch"
                                                       VerticalAlignment="Stretch"
                                                       Background="#434953">
                                                <ContentPresenter Content="{Binding Path=Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" />
                                            </Border>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter TargetName="Border1" Property="Background" Value="#834953"/>
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ControlTemplate.Resources>
                    <Border Focusable="{TemplateBinding Focusable}">
                        <DockPanel Width="{TemplateBinding Width}"
                                   Height="{TemplateBinding Height}"
                                   VerticalAlignment="Center"
                                   Focusable="False">

                            <Button x:Name="PART_DecreaseButton" DockPanel.Dock="Left">
                                <Button.Content>
                                    <Path Data="M0,0 L1,0 0.5,1Z"
                                          Fill="White"
                                          Width="8"
                                          Height="6"
                                          Stretch="Fill"/>
                                </Button.Content>
                            </Button>

                            <Button x:Name="PART_IncreaseButton" DockPanel.Dock="Right">
                                <Button.Content>
                                    <Path Data="M0,1 L1,1 0.5,0Z" 
                                          Width="8"
                                          Height="6"
                                          Fill="White" 
                                          Stretch="Fill" />
                                </Button.Content>
                            </Button>

                            <TextBox x:Name="PART_TextBox"
                                     Foreground="White"
                                     HorizontalContentAlignment="Center"
                                     HorizontalAlignment="Stretch" 
                                     Background="#22252b" 
                                     BorderThickness="0"
                                     MinWidth="35" IsEnabled="True" Focusable="False" />
                        </DockPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True" SourceName="PART_DecreaseButton">
                            <Setter Property="Background" Value="Red" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Answer 1

您可以封装整个内容并应用不透明蒙板，如本教程

http://wpf.2000things.com/2012/05/11/556-clipping-to-a-border-using-an-opacity-mask/