兩個按鈕，中間是TextBox，ControlTemplate

Question

遇到這種風格的問題，我找不到找到以下布局的方法：

因此，我只需要將外部按鈕的角進行圓角處理，但是我不知道該怎么做，因為按鈕的ControlTemplate不能具有CornerRadius屬性，因為我必須將所有角都進行圓角處理。

這是我現在所擁有的樣式，它只是產生了如上所示的樣式，但是沒有CornerRadius 。

PS： 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/