Setting MaxWidth of ComboboxItem such that Items width don't exceed ComboboxWidth
Here is how it looks now:
I want the ComboBoxItem
s to have the same width as the ComboBox
. I've overridden the default template of ComboBox
and ComboBoxItem
.
ComboBoxItem
s 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:
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>
精彩评论