I designed a custom ComboBox.

I'd like to bind my ComboBox's textbox width to the width of its parent ComboBox.

For example, if the width of the ComboBox changes in Grid.Children, its TextBox should likewise change.

XAML:

Note: Some unnecessary blocks have been removed for readability and convenience.

Note: I'm aware that the PART EditableTextBox section needs to be edited, but I'm not sure how.

<Window.Resources>
    <Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
        <Setter Property="MinWidth" Value="20" />
        <Setter Property="MinHeight" Value="20" />
        <Setter Property="Padding" Value="4,4,0,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox"                                                Storyboard.TargetProperty="(TextElement.Foreground).                      (SolidColorBrush.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF888888" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="EditStates">
                                <VisualState x:Name="Editable">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"                                                 Storyboard.TargetName="PART_EditableTextBox">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ContentSite">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Uneditable" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ToggleButton x:Name="ToggleButton"
                     Template="{StaticResource ComboBoxToggleButton}"
                     Grid.Column="2"
                     Focusable="false"
                     ClickMode="Press"
                     IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                        <ContentPresenter x:Name="ContentSite"
                             IsHitTestVisible="False"
                             Content="{TemplateBinding SelectionBoxItem}"
                             ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                             ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                             Margin="3,3,23,3"
                             VerticalAlignment="Stretch"
                             HorizontalAlignment="Left">
                        </ContentPresenter>
                        <TextBox x:Name="PART_EditableTextBox"
                    Style="{x:Null}"
                    Template="{StaticResource ComboBoxTextBoxTemplate}"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Bottom"
                    Margin="3,3,23,3"
                    Focusable="True"
                    Foreground="{TemplateBinding Foreground}"
                    Background="Transparent"
                    Visibility="Hidden"
                    IsReadOnly="{TemplateBinding IsReadOnly}" />
                        <Popup x:Name="Popup"
                  Placement="Bottom"
                  IsOpen="{TemplateBinding IsDropDownOpen}"
                  AllowsTransparency="True"
                  Focusable="False"
                  PopupAnimation="Slide">
                            <Grid x:Name="DropDown"
                   SnapsToDevicePixels="True"
                   MinWidth="{TemplateBinding ActualWidth}"
                   MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                <Border x:Name="DropDownBorder" BorderBrush="DarkGray" BorderThickness="1" Background="White">
                                </Border>
                                <ScrollViewer BorderBrush="DarkGray" Padding="3,3,3,11" 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="IsGrouping" Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                        </Trigger>
                        <Trigger SourceName="Popup" Property="AllowsTransparency" Value="true">
                            <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="9" />
                            <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Resources>
            <Style TargetType="ScrollBar" >
                <Setter Property="Stylus.IsPressAndHoldEnabled" Value="True"/>
                <Setter Property="Stylus.IsFlicksEnabled" Value="True"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid>
                                <Border CornerRadius="0,9,9,0" Background="{StaticResource ScrollBarNormalBackground}" Width="15" Margin="2,2,0,0"  BorderBrush="DarkGray" BorderThickness="1"/>
                                <Track x:Name="PART_Track"  IsDirectionReversed="True" Uid="PART_Track">
                                    <Track.Thumb>
                                        <Thumb Uid="Thumb_0">
                                            <Thumb.Template>
                                                <ControlTemplate>
                                                    <Border Background="LightGoldenrodYellow" Width="15" Height="12" Margin="2,2,0,0" CornerRadius="0,9,9,0" BorderBrush="DarkGray" Cursor="Hand" BorderThickness="1"/>
                                                </ControlTemplate>
                                            </Thumb.Template>
                                        </Thumb>
                                    </Track.Thumb>
                                </Track>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Style.Resources>
    </Style>
    <Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                    <Border x:Name="Border" CornerRadius="9" SnapsToDevicePixels="true" Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFC5CBF9" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedUnfocused">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFDDDDDD" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <Grid.Children>
        <ComboBox x:Name="Category_ComboBox" GotFocus="Category_ComboBox_GotFocus" LostFocus="Category_ComboBox_LostFocus" ContextMenu="{StaticResource CustomContextMenu}" IsEditable="True" BorderBrush="DarkGray" HorizontalAlignment="Left" Height="30" VerticalAlignment="Top" Width="267" Margin="21,138,0,0"/>
    </Grid.Children>
</Grid>

Thanks

CodePudding user response：

The text box PART_EditableTextBox is only visible when the ComboBox is in edit mode (which is when ComboBox.IsEdit is enabled). To make it stretch simply set the TextBox.HorizontalAlignment property to HorizontalAlignment.Stretch:

<TextBox x:Name="PART_EditableTextBox"
         HorizontalAlignment="Stretch" />

In case you meant to make the items in the selection box to stretch set ComboBox.HorizontalContentAlignment to HorizontalAlignment.Stretch:

<ComboBox HorizontalContentAlignment="Stretch" />