Setting MaxWidth of ComboboxItem such that Items width don't exceed ComboboxWidth_问答_开发者

Here is how it looks now:

Setting MaxWidth of ComboboxItem such that Items width don't exceed ComboboxWidth

I want the ComboBoxItems to have the same width as the ComboBox. I've overridden the default template of ComboBox and ComboBoxItem.

ComboBoxItems style:

<Style x:Key="{x:Type ComboBoxItem}"
       TargetType="{x:Type ComboBoxItem}">
    <Setter Property="SnapsToDevicePixels"
            Value="true" />
    <Setter Property="OverridesDefaultStyle"
            Value="true" />
    <Setter Property="FocusVisualStyle"
            Value="{x:Null}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                <Border Name="Border"
                        Padding="2"
                        SnapsToDevicePixels="true">
                    <ContentPresenter />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsHighlighted"
                             Value="true">
                        <Setter TargetName="Border"
                                Property="Background"
                                Value="#9982B5D8" />
                    </Trigger>
                    <Trigger Property="IsEnabled"
                             Value="false">
                        <Setter Property="Foreground"
                                Value="#888888" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ComboBox style:

 <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="MinHeight"
            Value="20" />
    <Setter Property="FocusVisualStyle"
            Value="{x:Null}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBox}">
                <Border x:Name="comboBoxBorder"
                        BorderThickness="1"
                        BorderBrush="Transparent">
                <Grid d:DesignWidth="250.25"
                      d:DesignHeight="24.75">
                    <ToggleButton Name="ToggleButton"
                                  Template="{StaticResource ComboBoxToggleButton}"
                                  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="{Binding ElementName=ToggleButton,
                                                 Path=ActualWidth}"
                              MaxHeight="{TemplateBinding MaxDropDownHeight}">
                            <Border x:Name="DropDownBorder"
                                    Background="#FFFFFF"
                                    BorderThickness="0.5"
                                    BorderBrush="#FF1B75BB" />
                            <ScrollViewer x:Name="PopupItemsScrollViewer"
                                          Margin="1,1,0,0.5"
                                          CanContentScroll="False"
                                          SnapsToDevicePixels="True">
                                <ItemsPresenter />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems"
                             Value="false">
                        <Setter TargetName="DropDownBorder"
                                Property="MinHeight"
                                Value="95" />
                    </Trigger>
                    <Trigger Property="IsEnabled"
                             Value="false">
                        <Setter Property="Foreground"
                                Value="#888888" />
                        <Setter Property="IsEnabled"
                                TargetName="ToggleButton"
                                Value="False" />
                    </Trigger>
                    <Trigger Property="IsGrouping"
                             Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll"
                                Value="false" />
                    </Trigger>
                    <Trigger SourceName="Popup"
                             Property="AllowsTransparency"
                             Value="true" />
                    <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>
                    <Trigger Property="IsFocused"
                             Value="True">
                        <Setter TargetName="comboBoxBorder"
                                Property="BorderBrush"
                                Value="{StaticResource ComboBoxDropdownButtonBackgroundBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ComboBoxToggleButton style:

 <ControlTemplate x:Key="ComboBoxToggleButton"
                 TargetType="{x:Type ToggleButton}">
    <Grid x:Name="grid"
          d:DesignWidth="243.25"
          d:DesignHeight="20.667">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        <Border x:Name="Border"
                Grid.ColumnSpan="2"
                CornerRadius="0,0,0,0"
                Background="{DynamicResource ComboBoxDropdownButtonBackgroundBrush}"
                BorderBrush="#FF6CA1CB"
                BorderThickness="0,0,0,0"
                Margin="0,0,0,0" />
        <Border x:Name="BlankSpaceBorder"
                Grid.Column="0"
                CornerRadius="0,0,0,0"
                Margin="0,0,0,0"
                Background="#FFFFFF"
                BorderThickness="0.5,0.5,0,0.5"
                BorderBrush="{DynamicResource ComboBoxToggleButtonNormalBorderBrush}">
        </Border>
        <Grid x:Name="grid1"
              Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Path x:Name="path"
                  Grid.Column="0"
                  Fill="#FFFFFFFF"
                  Stretch="Fill"
                  Width="11.49"
                  Height="5.744"
                  Data="F1M759.5938,228.6523L765.3408,234.3963L771.0838,228.6523z"
                  HorizontalAlignment="Center"
                  Margin="0,0,0,0"
                  VerticalAlignment="Center"
                  d:LayoutOverrides="Height"
                  Grid.RowSpan="2" />
            <Path Fill="#FFAEDEE4"
                  Stretch="Fill"
                  Width="19.996"
                  Opacity="0.19999699294567108"
                  Data="F1M774.4961,229.3877L774.4961,220.7157L754.5001,220.7157L754.5001,231.1477C760.2531,229.2797,765.2251,227.7837,774.4961,229.3877"
                  HorizontalAlignment="Right"
                  Margin="0,0,0,0"
                  VerticalAlignment="Stretch"
                  Grid.Column="0" />
        </Grid>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="ToggleButton.IsMouseOver"
                 Value="true">
            <Setter Property="BorderBrush"
                    TargetName="BlankSpaceBorder">
                <Setter.Value>
                    <SolidColorBrush Color="#FF1B75BB" />
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush"
                    TargetName="Border"
                    Value="#FF1B75BB" />
            <Setter Property="Fill"
                    TargetName="path"
                    Value="{DynamicResource ComboBoxToggleButtonMouseOverArrowFill}" />
            <Setter Property="Background"
                    TargetName="Border"
                    Value="White" />
            <Setter Property="BorderThickness"
                    TargetName="Border"
                    Value="0,0.5,0.5,0.5" />
            <Setter Property="Margin"
                    TargetName="grid1"
                    Value="0,0.5,0.5,0" />
        </Trigger>
        <Trigger Property="IsEnabled"
                 Value="False">
            <Setter Property="Opacity"
                    TargetName="grid"
                    Value="0.25" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

XAML Usage:

   <ComboBox x:Name="ModesComboBox"
             IsEditable="False"
             ItemsSource="{Binding ModesCollection}"
             SelectedIndex="{Binding CurrentMode}"
             ToolTip="{Binding SelectedItem.Name,RelativeSource={RelativeSource Self}}"
             HorizontalAlignment="Stretch"
             VerticalContentAlignment="Top">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}"
                           TextTrimming="CharacterEllipsis"
                           MaxWidth="{Binding ElementName=BlankSpaceBorder,
                           Path=ActualWidth}">
                </TextBlock>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>

I just want to set this MaxWidth to an appropriate value ... Ideas ?

Updated : I also tried setting the MaxWidth of the ComboboxItem to the ComoboBox's width but in that case the ScrollViewer appears after the ComoboBox as follows:

Setting MaxWidth of ComboboxItem such that Items width don't exceed ComboboxWidth

Actually this is how it appears right now, earlier code was what I was trying to modify.

Instead of setting the MaxWidth of the TextBlock try setting it on the Popup in the ControlTemplate of the ComboBox:

<Popup Name="Popup"
       Placement="Bottom"
       IsOpen="{TemplateBinding IsDropDownOpen}"
       AllowsTransparency="True"
       Focusable="False"
       PopupAnimation="Slide"
       MaxWidth="{TemplateBinding ActualWidth}">

Update:

If you don't want to modify the template of the ComboBox you also can use RelativeSource binding in the item's DataTemplate to bind to the parent ComboBox's ActualWidth property:

<ComboBox.ItemTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding Name}"
                   TextTrimming="CharacterEllipsis"
                   MaxWidth="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}},
                                      Path=ActualWidth}">

        </TextBlock>
    </DataTemplate>
</ComboBox.ItemTemplate>