wpf组合框样式

Question

有人能通过观察这种风格判断出，除非你给它一个明确的宽度，否则应用它的组合框会像屏幕一样宽吗？

<Style x:Key="ThemedComboBox" TargetType="{x:Type ComboBox}">
    <Setter Property="Padding" Value="6,2,25,2"/>
    <Setter Property="Background" Value="#FF1F3B53"/>
    <Setter Property="Foreground" Value="#FFFFFFFF"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA3AEB9" Offset="0"/>
                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                <GradientStop Color="#FF718597" Offset="0.375"/>
                <GradientStop Color="#FF617584" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBox}">
                <Grid>
                    <Grid.Resources>
                        <Style TargetType="ToggleButton" x:Name="comboToggleStyle">
                            <Setter Property="Foreground" Value="#FF333333"/>
                            <Setter Property="Background" Value="#FF1F3B53"/>
                            <Setter Property="BorderBrush">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFA3AEB9" Offset="0"/>
                                        <GradientStop Color="#FF8399A9" Offset="0.375"/>
                                        <GradientStop Color="#FF718597" Offset="0.375"/>
                                        <GradientStop Color="#FF617584" Offset="1"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="BorderThickness" Value="1"/>
                            <Setter Property="Padding" Value="3"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ToggleButton">
                                        <Grid>
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualStateGroup.Transitions>
                                                        <VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
                                                        <VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
                                                    </VisualStateGroup.Transitions>
                                                    <VisualState x:Name="Normal"/>
                                                    <VisualState x:Name="MouseOver">
                                                        <Storyboard>
                                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverState" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                                            </DoubleAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="PressedState" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                                            </DoubleAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledState" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                                            </DoubleAnimationUsingKeyFrames>
                                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="gloss" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                                            </DoubleAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                                <VisualStateGroup x:Name="CheckStates">
                                                    <VisualState x:Name="Checked">
                                                        <Storyboard>
                                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="PressedState" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                                            </DoubleAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Unchecked"/>
                                                </VisualStateGroup>
                                                <VisualStateGroup x:Name="FocusStates">
                                                    <VisualState x:Name="Focused">
                                                        <Storyboard>
                                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverState" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                                            </DoubleAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Unfocused"/>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <Grid HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto" x:Name="NormalState">
                                                <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Fill="{StaticResource GlossyBlack_BackgroundGradient}"/>
                                                <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Stroke="{StaticResource GlossyBlack_StrokeGradient}"/>
                                                <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Fill="{StaticResource GlossyBlack_HighlightGradient}"/>
                                            </Grid>
                                            <Grid HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto" x:Name="MouseOverState" Opacity="0">
                                                <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Fill="{StaticResource GlossyBlack_BackgroundGradient}"/>
                                                <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Stroke="{StaticResource GlossyBlack_StrokeGradient}"/>
                                                <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Fill="{StaticResource GlossyBlack_MouseOverBackgroundGradient}"/>
                                            </Grid>
                                            <Grid HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto" x:Name="PressedState" Opacity="0">
                                                <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Fill="{StaticResource GlossyBlack_PressedBackgroundGradient}"/>
                                                <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Stroke="{StaticResource GlossyBlack_StrokeGradient}"/>
                                                <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Fill="{StaticResource GlossyBlack_PressedHighlightGradient}"/>
                                            </Grid>
                                            <Grid HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto" x:Name="DisabledState" Opacity="0">
                                                <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Fill="{StaticResource GlossyBlack_DisabledBackgroundGradient}"/>
                                                <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Stroke="{StaticResource GlossyBlack_StrokeGradient}"/>
                                            </Grid>
                                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                            <Path Height="Auto" HorizontalAlignment="Stretch" Margin="0,0,0,6" VerticalAlignment="Stretch" Stretch="Fill" Data="M100,12.903966 C59.117226,15.115555 23.108757,29.203354 -1.2437163E-14,60 L-3.2684966E-13,0 C12,-2.8610229E-06 100,0 100,0" x:Name="gloss" Fill="{StaticResource GlossyBlack_GlossGradient}"/>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Grid.Resources>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="00:00:00.1"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard/>
                            </VisualState>
                            <VisualState x:Name="Unfocused"/>
                            <VisualState x:Name="FocusedDropDown">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
                                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="ContentPresenterBorder">
                        <Grid>
                            <ToggleButton BorderThickness="{TemplateBinding BorderThickness}" HorizontalContentAlignment="Right" HorizontalAlignment="Stretch" Margin="-1" x:Name="DropDownToggle" VerticalAlignment="Stretch" Foreground="{StaticResource GlossyBlack_GreyStateBackground}" BorderBrush="{StaticResource GlossyBlack_StrokeGradient}" Background="{StaticResource GlossyBlack_BackgroundGradient}" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press">
                                <Path Height="4" HorizontalAlignment="Right" Margin="0,0,6,0" x:Name="BtnArrow" Width="8" Stretch="Uniform" Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z " Fill="{StaticResource GlossyBlack_GreyStateBackground}"/>
                            </ToggleButton>
                            <ContentPresenter HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False"/>
                        </Grid>
                    </Border>
                    <Rectangle x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" Fill="#A5000000" RadiusX="3" RadiusY="3"/>
                    <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
                        <Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
                            <Border Height="Auto" HorizontalAlignment="Stretch" x:Name="PopupBorder" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0,0,0,0" Background="{StaticResource GlossyBlack_PopupBackgroundGradient}" BorderBrush="{StaticResource GlossyBlack_StrokeGradient}">
                                <ScrollViewer BorderThickness="0" Padding="1" Foreground="{StaticResource GlossyBlack_Selected}" BorderBrush="{x:Null}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
                                    <ItemsPresenter/>
                                </ScrollViewer>
                            </Border>
                        </Grid>
                    </Popup>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

我尝试了一些事情，问题是路径。

 <Path Height="Auto" HorizontalAlignment="Stretch" Margin="0,0,0,6" VerticalAlignment="Stretch" Stretch="Fill" Data="M100,12.903966 C59.117226,15.115555 23.108757,29.203354 -1.2437163E-14,60 L-3.2684966E-13,0 C12,-2.8610229E-06 100,0 100,0" x:Name="gloss" Fill="{StaticResource GlossyBlack_GlossGradient}"/> 

我删除了Stretch="Fill"，它修复了

Answer 2

默认的FrameworkElement.HorizontalAlignment属性（上面没有设置）是Stretch。您需要将其设置为Left、Center或Right以防止拉伸。

通常，解决此类问题的真正方法不是更改控件的HorizontalAlignment属性，而是将包含ComboBox的元素的宽度设置为Auto，或者将其HorizontalAlignment属性修复为Stretch以外的其他属性。