WPF - C# - ComboBox/ComboBoxItem: How to stretch text to fill combobox area

Question

I am programmatically adding ComboBoxes and ComboBox Items. I have a custom ComboBox Style implemented. Everything is fine except the text for each combo box item will not stretch to fill the combobox area. I can get this automatic stretching to work fine with labels and buttons using this bit of XAML in the Custom Style of the button and label controls but it does not have any effect in the ComboBoxItem control.

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

Since I am not adding the ComboBoxes in XAML, a solution that involves adding a custom TextBlock will not work (unless it is done dynamically/programmatically). The solution has to either be done in the custom style, or done programmatically in the code behind.

<!--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's HorizontalContentAlignment defaults to Left and VerticalContentAlignment defaults to Top. Set them both to Stretch.

Answer 2

Add this implicit style in your content template:

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