Question

我正在以编程方式添加ComboBoxes和ComboBox项目。我实现了自定义的ComboBox样式。一切都很好，除了每个组合框项目的文本不会拉伸以填充组合框区域。我可以通过按钮和标签控件的自定义样式中的这个XAML使用标签和按钮来实现这种自动拉伸，但它在ComboBoxItem控件中没有任何效果。

<Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Viewbox Stretch="Fill">
                            <ContentPresenter Content="{TemplateBinding Content}"/>
                        </Viewbox>
                    </DataTemplate>
                </Setter.Value>
            </Setter>

由于我没有在XAML中添加ComboBox，因此涉及添加自定义TextBlock的解决方案将无效（除非以动态/编程方式完成）。解决方案必须以自定义样式完成，或者以编程方式在后面的代码中完成。

<!--ComboBox Template-->
        <ControlTemplate x:Key="ComboBoxTemplate" TargetType="{x:Type ComboBox}">
            <Grid x:Name="templateRoot" SnapsToDevicePixels="true">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
                </Grid.ColumnDefinitions>
                <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" 
                       PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
                    <Themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
                        <Border x:Name="dropDownBorder" BorderBrush="{StaticResource backgroundColorBrush}" BorderThickness="0" Background="{StaticResource backgroundColorBrush}">
                            <ScrollViewer x:Name="DropDownScrollViewer">
                                <Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
                                    <Canvas x:Name="canvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="0">
                                        <Rectangle x:Name="opaqueRect" Fill="{StaticResource backgroundColorBrush}"
                                                   Width="{Binding ActualWidth, ElementName=dropDownBorder}"/>
                                    </Canvas>
                                    <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </Grid>
                            </ScrollViewer>
                        </Border>
                    </Themes:SystemDropShadowChrome>
                </Popup>
                <ToggleButton x:Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" 
                              IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxToggleButton}"/>
                <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
                                  Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="Left" 
                                  IsHitTestVisible="false" Margin="0, 0, 0, 0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
            </Grid>
            <ControlTemplate.Triggers>
                <!--<Trigger Property="HasItems" Value="false">
                    <Setter Property="Height" TargetName="dropDownBorder" Value="{StaticResource height}"/>
                </Trigger>-->
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsGrouping" Value="true"/>
                        <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                </MultiTrigger>
                <Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false">
                    <Setter Property="Canvas.Top" TargetName="opaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/>
                    <Setter Property="Canvas.Left" TargetName="opaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <!--ComboBox-->
        <Style TargetType="{x:Type ComboBox}">
            <Setter Property="Background" Value="{StaticResource backgroundColorBrush}"/>
            <Setter Property="BorderBrush" Value="{StaticResource backgroundColorBrush}"/>
            <Setter Property="Foreground" Value="{StaticResource textColorBrush}"/>
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="FontSize" Value="30"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="Padding" Value="0,0,0,0"/>
            <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
            <Setter Property="ScrollViewer.PanningMode" Value="None"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="Template" Value="{StaticResource ComboBoxTemplate}"/>

            <Style.Triggers>
                <Trigger Property="IsEditable" Value="true">
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Padding" Value="2"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        <!--ComboBox Item-->
        <Style TargetType="{x:Type ComboBoxItem}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Padding" Value="0,0"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <!--<Setter Property="FontSize" Value="Auto"/>-->
            <!--<Setter Property="Height" Value="{StaticResource height}"/>-->
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Viewbox Stretch="Uniform">
                            <ContentPresenter Content="{TemplateBinding Content}"/>
                        </Viewbox>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="0" 
                                SnapsToDevicePixels="true">
                            <ContentPresenter HorizontalAlignment="Stretch" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Stretch"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{StaticResource textColorBrush}"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="False"/>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                    <Condition Property="IsKeyboardFocused" Value="False"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource highlightedColorBrush}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource highlightedColorBrush}"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="True"/>
                                    <Condition Property="IsMouseOver" Value="False"/>
                                    <Condition Property="IsKeyboardFocused" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource highlightedColorBrush}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource highlightedColorBrush}"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="True"/>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource highlightedColorBrush}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource highlightedColorBrush}"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="True"/>
                                    <Condition Property="IsMouseOver" Value="False"/>
                                    <Condition Property="IsKeyboardFocused" Value="False"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource highlightedColorBrush}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource highlightedColorBrush}"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="False"/>
                                    <Condition Property="IsMouseOver" Value="False"/>
                                    <Condition Property="IsKeyboardFocused" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource highlightedColorBrush}"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="False"/>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                    <Condition Property="IsKeyboardFocused" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource highlightedColorBrush}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource highlightedColorBrush}"/>
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!--Used by CheckBoxStyle1-->
        <Style x:Key="OptionMarkFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 1

ComboBox的HorizontalContentAlignment默认为Left，VerticalContentAlignment默认为Top。将它们都设置为Stretch。

Answer 2

在内容模板中添加此隐式样式：

<Viewbox Stretch="Fill">
            <Viewbox.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                    <Setter Property="TextAlignment" Value="Justify"></Setter>
                </Style>
....

WPF - C＃ - ComboBox / ComboBoxItem：如何拉伸文本以填充组合框区域

2 个答案: