HandyControl
HandyControl copied to clipboard
历史输入记录及删除功能 / 使用 TitleElement.Title 时自定义模板绑定问题
问题描述:
我目前有个需求的功能是实现一个历史输入记录的功能,并且可以点击下拉框里的删除按钮来删除不需要的历史记录
目前的 hc:ComboBox 提供了清除当前选中的内容的按钮,但无法删除下拉框中已存在的内容,所以我通过自定义 ComboBox.ItemTemplate 添加了一个删除按钮。我想要的效果是下拉元素左侧是历史输入内容,最右侧显示一个删除按钮。
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
VerticalAlignment="Center"
Text="{Binding}" />
<Button
Grid.Column="1"
Command="{s:Action RemoveAddressClick}"
CommandParameter="{Binding}"
Content="×"
FontWeight="Bold" />
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
使用了 hc:TitleElement.Title 作为显示标题,遇到了以下问题
-
若不指定 Grid 的宽度,TextBlock 并不能占满空位
-
如果 Grid Width 绑定了 ComboBox 的 ActualWidth 或者 Width,若标题在左侧,标题宽度也会计入 ComboBox 的总宽度,导致自定义的 ItemTemplate 显示范围超出预期。
<Grid Width="{c:Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ComboBox}}">
- 当 hc:TitleElement.Title 位于顶部时,绑定 ActualWidth 或 Width 也会造成显示范围略超出指定宽度。
期望功能:
希望能提供一个简单的历史输入记录的功能,或者能够获取下拉框区域的宽度用来绑定模板宽度
- 若不指定 Grid 的宽度,TextBlock 并不能占满空位
![]()
尝试了一下,在 hc:ComboBox 添加了 HorizontalContentAlignment="Stretch" 可以实现以下效果
以下是完整的 xaml
<hc:ComboBox
Grid.Row="2"
Width="300"
Height="30"
Margin="10"
HorizontalContentAlignment="Stretch"
hc:TitleElement.Title="{DynamicResource ConnectionAddress}"
hc:TitleElement.TitlePlacement="Left"
IsEditable="True"
IsEnabled="{c:Binding !AutoDetectConnection}"
ItemsSource="{Binding ConnectAddressHistory}"
Text="{Binding ConnectAddress, UpdateSourceTrigger=LostFocus}"
ToolTip="{DynamicResource ConnectionAddressTip}">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{Binding}" />
<Button
Grid.Column="1"
HorizontalAlignment="Right"
Command="{s:Action RemoveAddressClick}"
CommandParameter="{Binding}"
Content="×"
FontWeight="Bold" />
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</hc:ComboBox>