自定义组合框中使用的下拉列表(弹出窗口)的动态宽度绑定
自定义组合框中使用的下拉列表(弹出窗口)的动态宽度绑定
提问于 2013-06-13 15:38:15
我正在使用自定义ComboBox的风格，我想通过代码设置一个弹出式窗口的宽度动态，以便自动调整弹出窗口的宽度
所以我想像第二张图片一样动态改变弹出窗口(无论ComboBox的大小如何)，我使用的样式如下
<Style x:Key="ComboBoxStyle" TargetType="{x:Type ComboBox}">
<Setter Property="Foreground" Value="#666666"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="Height" Value="28"/>
<Setter Property="BorderThickness" Value="1.5"/>
<Setter Property="Padding" Value="4,3"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Popup Margin="1" x:Name="PART_Popup" AllowsTransparency="true" IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Grid.ColumnSpan="2" Width="{Binding ActualWidth,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Grid}}">
<Border Name="DropDownBorder" Width="Auto" Height="Auto" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4" BorderBrush="#FFbbbbbb">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="#FFE9E9E9" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<ScrollViewer CanContentScroll="true">
<ItemsPresenter />
</ScrollViewer>
</Border>
</Popup>
<ToggleButton Style="{StaticResource cmbToggle}" Grid.ColumnSpan="2" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
<ContentPresenter HorizontalAlignment="Left" Margin="5,0,0,0" VerticalAlignment="Center" IsHitTestVisible="false" Content="{TemplateBinding SelectionBoxItem}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="cmbToggle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Name="cmbBorder" CornerRadius="3" BorderBrush="#FFaaaaaa" BorderThickness="1.5">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="#FFE9E9E9" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Border BorderBrush="#FFaaaaaa" BorderThickness="1,0,0,0" Width="20" HorizontalAlignment="Right">
<Polygon Name="pol" Fill="#FF787878" Points="4,9 8,14 12,9" Stroke="#FF787878" StrokeThickness="0" Margin="1 1 0 0">
</Polygon>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="CornerRadius" TargetName="cmbBorder" Value="4,4,0,0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>所以我的想法是动态改变弹出窗口的宽度(组合框宽度- togglebutton宽度=弹出窗口宽度).I已经在App.xaml中编写了样式如何做到这一点，请帮助我。提前谢谢。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-06-13 16:55:00
好的，在您的ToggleButton Style中，我们可以看到Border holding Polygon箭头是20 in Width。这是要从Popup中删除的Width
因此，我们可以这样做：
首先将2列添加到ComboBox ControlTemplate中的Grid
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<!-- New Bit -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<!-- End of New Bit -->
<Popup x:Name="PART_Popup"
Grid.ColumnSpan="2"
...然后将Popup的Width更新为
<Popup x:Name="PART_Popup"
Grid.ColumnSpan="2"
Width="{Binding Path=ColumnDefinitions[0].ActualWidth,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=Grid}}"
...您的Style已经在适当的控件中提到了ColumnSpan，因此不需要其他任何东西。这应该会给出您想要的输出。
Stack Overflow用户
发布于 2013-11-27 03:20:23
您可以直接使用
<ComboBox.Resources>
<Style TargetType="{x:Type Popup}">
<Setter Property="Width" Value="110"/>
</Style>
</ComboBox.Resources>Stack Overflow用户
发布于 2014-11-27 09:38:19
使用绑定到视图模型属性的Dhaval Patel的解决方案可以做到这一点。当集合发生变化时，我使用FormattedText计算最大宽度，并将其绑定到下面。
<ComboBox.Resources>
<Style TargetType="{x:Type Popup}">
<Setter Property="Width" Value="{Binding MaxWidthOfMyCollection"/>
</Style>
</ComboBox.Resources>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17081674
复制相关文章
相似问题
腾讯云开发者
