设置ComboboxItem的MaxWidth，以使Item的宽度不超过ComboboxWidth [英] Setting MaxWidth of ComboboxItem such that Items width don't exceed ComboboxWidth
本文介绍了设置ComboboxItem的MaxWidth，以使Item的宽度不超过ComboboxWidth的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是现在的样子:
我希望 ComboBoxItem 的宽度与 ComboBox 的宽度相同.我已经覆盖了 ComboBox 和 ComboBoxItem 的默认模板.
I want the ComboBoxItems to have the same width as the ComboBox. I've overridden the default template of ComboBox and ComboBoxItem.
ComboBoxItem 的样式:
<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>
组合框样式:
<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 样式:
<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用法:
<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>
我只想将此 MaxWidth 设置为适当的值...想法?
I just want to set this MaxWidth to an appropriate value ... Ideas ?
已更新:我还尝试将 ComboboxItem 的 MaxWidth 设置为 ComoboBox 的宽度，但是在这种情况下，会出现 ScrollViewer 在 ComoboBox 之后，如下所示:
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.
推荐答案
而不是设置 TextBlock 的 MaxWidth ，请尝试将其设置在 Popup ComboBox 的 ControlTemplate 中的code>:
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}">
更新:
如果您不想修改 ComboBox 的模板，则还可以在项目的 DataTemplate 中使用 RelativeSource 绑定来绑定父 ComboBox 的 ActualWidth 属性:
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>
这篇关于设置ComboboxItem的MaxWidth，以使Item的宽度不超过ComboboxWidth的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
