WPF XAML自定義組合框樣式，如附加的圖像

Question

我已經在一個現有的WPF應用程序中看到一個組合框，並且想要在我自己的應用程序中創建類似的框。 我將提供所需的屏幕快照，並提供包含我現有的屏幕快照的代碼。 在第一張圖片上，當它處於常規狀態時，有一個組合框；在第二張圖片上，當彈出窗口處於打開狀態時，

有一些我無法實現的時刻。 首先是當彈出窗口打開時-與切換按鈕重疊。 其次是彈出窗口周圍的陰影。

我當前的XAML樣式非常龐大，希望有人能通過它，他會建議我如何編輯它以實現所需的樣式：

<ControlTemplate x:Key="ToggleButtonStyle" TargetType="ToggleButton" >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        <Border x:Name="OutsideBorder" Grid.ColumnSpan="2" BorderThickness="0 0 0 3" Panel.ZIndex="2"
                        Width="0" BorderBrush="{StaticResource PrimaryColorBrush}">
        </Border>
        <Border
              x:Name="Border" 
              Grid.ColumnSpan="2"
              CornerRadius="0"
              Background="Transparent"
              BorderBrush="#111111"
              BorderThickness="0 0 0 1" >
        </Border>
        <Path 
              x:Name="Arrow"
              Margin="0 0 4 0"
              Grid.Column="1"     
              Fill="#757575"
              Width="10" Height="6"
              Stretch="Fill"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Data="M7 10l5 5 5-5z">
        </Path>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="ToggleButton.IsChecked" Value="true">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetName="Container" AccelerationRatio="0.4" DecelerationRatio="0.4">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OutsideBorder" Storyboard.TargetProperty="(Border.Width)">
                            <SplineDoubleKeyFrame KeyTime="00:00:0.15" Value="400"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard AccelerationRatio="0.4" DecelerationRatio="0.4">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OutsideBorder" Storyboard.TargetProperty="(Border.Width)">
                            <SplineDoubleKeyFrame KeyTime="00:00:0.1" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetName="Container" AccelerationRatio="0.4" DecelerationRatio="0.4">
                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Fill.Color">
                            <SplineColorKeyFrame KeyTime="00:00:0.13" Value="{StaticResource PrimaryColor}"/>
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard AccelerationRatio="0.4" DecelerationRatio="0.4">
                       <ColorAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Fill.Color">
                            <SplineColorKeyFrame KeyTime="00:00:0.13" Value="#757575"/>
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<Style x:Key="ComboBoxEx" TargetType="ComboBox">
    <Setter Property="IsEditable" Value="False"/>
    <Setter Property="IsTextSearchEnabled" Value="False"/>
    <Setter Property="MaxDropDownHeight" Value="300"/>
    <Setter Property="IsSynchronizedWithCurrentItem" Value="True" />
    <Setter Property="StaysOpenOnEdit" Value="True" />
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="Foreground" Value="#757575"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Grid>
                    <ToggleButton 
                        Name="ToggleButton" 
                        Template="{StaticResource ToggleButtonStyle}" 
                        Grid.Column="2" 
                        Focusable="false"
                        IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                        ClickMode="Press">
                    </ToggleButton>
                    <ContentPresenter
                        Name="ContentSite"
                        IsHitTestVisible="False" 
                        Content="{TemplateBinding SelectionBoxItem}"
                        ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                        ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                        Margin="3,3,23,3"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Left" />
                    <TextBox x:Name="PART_EditableTextBox"
                        Style="{x:Null}" 
                        Template="{StaticResource ComboBoxTextBox}" 
                        HorizontalAlignment="Left" 
                        VerticalAlignment="Center" 
                        Margin="3,3,23,3"
                        Focusable="True" 
                        Background="Transparent"
                        Visibility="Hidden"
                        IsReadOnly="{TemplateBinding IsReadOnly}"/>
                    <Popup 
                        Name="Popup"
                        Placement="Bottom"
                        IsOpen="{TemplateBinding IsDropDownOpen}"
                        AllowsTransparency="True" 
                        Focusable="False"
                        PopupAnimation="Slide">
                        <Grid 
                            Name="DropDown"
                            SnapsToDevicePixels="True"                
                            MinWidth="{TemplateBinding ActualWidth}"
                            MaxHeight="{TemplateBinding MaxDropDownHeight}">
                            <Border 
                                x:Name="DropDownBorder"
                                Background="Green"/>
                            <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems" Value="false">
                        <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="Gray"/>
                    </Trigger>
                    <Trigger Property="IsGrouping" Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                    </Trigger>
                    <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                        <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/>
                        <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
                    </Trigger>
                    <Trigger Property="IsEditable" Value="true">
                        <Setter Property="IsTabStop" Value="false"/>
                        <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="SelectDocTemplateStyle" TargetType="ComboBox" BasedOn="{StaticResource ComboBoxEx}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Grid>
                    <ToggleButton 
                        Name="ToggleButton" 
                        Template="{StaticResource ToggleButtonStyle}" 
                        Focusable="false"
                        IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                        ClickMode="Press">
                    </ToggleButton>
                    <ContentPresenter
                        Name="ContentSite"
                        IsHitTestVisible="False" 
                        Content="{TemplateBinding SelectionBoxItem}"
                        ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                        ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                        Margin="6,3,23,3"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Left" />
                    <!-- Text box is not used here -->
                    <TextBox x:Name="PART_EditableTextBox" 
                        HorizontalAlignment="Left" 
                        FlowDirection="LeftToRight"
                        VerticalAlignment="Center" 
                        Margin="6,3,23,3"
                        Focusable="True"
                        Foreground="Purple"
                        CaretBrush="Aqua"
                        FontSize="14"
                        Padding="2"
                        FontFamily="{StaticResource LatoBoldItalic}"
                        BorderThickness="0"
                        Background="Transparent"
                        Visibility="Hidden"
                        IsReadOnly="{TemplateBinding IsReadOnly}"
                        Width="{TemplateBinding Width}"/>
                    <Popup 
                        Name="Popup"
                        Placement="Bottom"
                        IsOpen="{TemplateBinding IsDropDownOpen}"
                        AllowsTransparency="True" 
                        Focusable="False"
                        PopupAnimation="Slide">
                        <Grid 
                          Name="DropDown"
                          SnapsToDevicePixels="True"                
                          MinWidth="{TemplateBinding ActualWidth}"
                          MaxHeight="{TemplateBinding MaxDropDownHeight}">
                            <Border 
                            x:Name="DropDownBorder"
                            Background="#9E9E9E">
                            </Border>
                            <ScrollViewer Margin="0,0" SnapsToDevicePixels="True">
                                <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Local" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems" Value="false">
                        <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="Gray"/>
                    </Trigger>
                    <Trigger Property="IsGrouping" Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                    </Trigger>
                    <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                        <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0"/>
                        <Setter TargetName="DropDownBorder" Property="Margin" Value="0,0,0,0"/>
                    </Trigger>
                    <Trigger Property="IsEditable" Value="true">
                        <Setter Property="IsTabStop" Value="false"/>
                        <Setter TargetName="PART_EditableTextBox" Property="Visibility"    Value="Visible"/>
                        <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="{x:Type ComboBoxItem}" x:Name="ComboBoxItemStyle" TargetType="{x:Type ComboBoxItem}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="Foreground" Value="#111111"/>
    <Setter Property="FontFamily" Value="{StaticResource LatoRegular}"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="FlowDirection" Value="LeftToRight"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                <Border Name="Border"
                          Padding="10"
                          Background="#E0E0E0"
                          SnapsToDevicePixels="true">
                    <ContentPresenter />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsHighlighted" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="#BDBDBD"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#888888"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
    <Border x:Name="PART_ContentHost"  Focusable="False" Background="Red" Width="{TemplateBinding Width}" />
</ControlTemplate>

因此，我的組合框現在看起來像這樣，與我想要的相去甚遠：

正常狀態

彈出式視窗已開啟

主要問題是：

• 如何在彈出窗口周圍創建投影？
• 如何制作一個彈出窗口，該彈出窗口將覆蓋在切換按鈕上？

Answer 1

有一些針對WPF開發人員的封閉源代碼和一些開放源代碼MaterialDesign庫。

感謝#ButchersBoy，您可以下載甚至修改整個主題：

https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit

您需要變通並閱讀類似的代碼以了解您需要了解的內容。