带有自定义模板的WPF ComboBox:所选文本区域太宽

时间:2016-02-15 10:48:33

标签: .net wpf templates

以下是我的问题的屏幕截图:Screenshot

我已将自己的模板用于可编辑的ComboBox,但我似乎无法将此选区(蓝色)停止在箭头按钮上延伸。

这是我的模板:

    <Style x:Key="ComboBoxStyle" TargetType="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="MinWidth" Value="120"/>
    <Setter Property="MinHeight" Value="20"/>

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="ComboBox">

                <Grid>

                    <ToggleButton Name="ToggleButton" 
                        Grid.Column="2" 
                        Focusable="false"
                        IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                        ClickMode="Press">

                        <ToggleButton.Template>

                                <ControlTemplate TargetType="ToggleButton">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="20" />
                                        </Grid.ColumnDefinitions>
                                        <Border x:Name="Border" 
                                                  Background="#828282"
                                                    Grid.Column="1"
                                                    BorderThickness="0">
                                            <Rectangle Width="10"
                                                                    Height="10"
                                                                    Margin="5"
                                                                    DockPanel.Dock="Right"
                                                                    Fill="{DynamicResource arrow__small__outline__down__hexfbfbfb__shadow}"/>   
                                    </Border>
                                        <Border Grid.Column="0"
                                            Margin="0" 
                                            BorderThickness="0"
                                            Background="White">
                                        </Border>
                                    </Grid>
                                <ControlTemplate.Triggers>

                                    <!--<Trigger Property="ToggleButton.IsMouseOver" Value="true">
                                        <Setter TargetName="Border" Property="Background" Value="{StaticResource DarkBrush}" />
                                    </Trigger>
                                    <Trigger Property="ToggleButton.IsChecked" Value="true">
                                        <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="False">
                                        <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                                        <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                                        <Setter TargetName="Arrow" Property="Fill" Value="{StaticResource DisabledForegroundBrush}" />
                                    </Trigger>-->

                                </ControlTemplate.Triggers>

                            </ControlTemplate>

                        </ToggleButton.Template>

                    </ToggleButton>

                    <ContentPresenter Name="ContentSite"
                        IsHitTestVisible="False" 
                        Content="{TemplateBinding SelectionBoxItem}"
                        ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                        ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                        ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
                        Margin="{TemplateBinding Padding}"
                        VerticalAlignment="Center"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                    <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="{TemplateBinding ActualWidth}"
                          MaxHeight="{TemplateBinding MaxDropDownHeight}">

                            <Border x:Name="DropDownBorder"
                                 Background="{StaticResource WindowBackgroundBrush}"
                                 BorderThickness="1"
                                 BorderBrush="{StaticResource SolidBorderBrush}"/>

                            <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>

                        </Grid>

                    </Popup>

                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems" Value="false">
                        <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
                    </Trigger>
                    <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                        <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0" />
                    </Trigger>

                    <!--<Trigger Property="HasItems" Value="false">
                        <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                    </Trigger>
                    <Trigger Property="IsGrouping" Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                    </Trigger>
                    <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                        <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/>
                        <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
                    </Trigger>-->

                    <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>

                </ControlTemplate.Triggers>

            </ControlTemplate>

        </Setter.Value>

    </Setter>


</Style>

我可以在模板中指定选择区域的行为方式吗?

编辑:这是ComboBox XAML:

                        <ComboBox Name="cboFilter" 
                                         Grid.Column="4" MaxWidth="200"
                                                          VerticalAlignment="Center"
                                                          HorizontalAlignment="Right"
                                                          ItemsSource="{Binding FilterItemCollection, Mode=TwoWay}"
                                                          DropDownOpened="ComboBox_DropDownOpened" 
                                                          SelectionChanged="ComboBox_SelectionChanged"
                                                          KeyDown="cboFilter_KeyDown"
                                                          IsEditable="True"
                                                          IsReadOnly="True"
                                                          IsEnabled="{Binding Locked, Converter={StaticResource lInvertedBooleanConverter}, ConverterParameter=Locked}"
                                                          Style="{DynamicResource ComboBoxStyle}"
                                                          Text="{Binding DisplayValue}">

                            <ComboBox.ItemTemplate>

                                <DataTemplate>

                                    <DockPanel LastChildFill="True">

                                        <CheckBox Width="20" IsChecked="{Binding IsChecked, Mode=TwoWay}">

                                            <CheckBox.Visibility>

                                                <!--Visibility of Checkbox set based upon the current operator being used via a converter-->
                                                <Binding Converter="{StaticResource lKeyFilterOperatorToCheckBoxVisibilityConverter}"
                                                                                    Path="DataContext.Oper"
                                                                                    RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}">
                                                </Binding>

                                            </CheckBox.Visibility>

                                        </CheckBox>

                                        <TextBlock Text="{Binding Path=Caption}" IsEnabled="{Binding IsEnabled, Mode=TwoWay}"/>

                                    </DockPanel>

                                </DataTemplate>

                            </ComboBox.ItemTemplate>

                        </ComboBox>

这是ComboBoxTextBox模板:

<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
    <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>

非常感谢。

1 个答案:

答案 0 :(得分:1)

将您的ComboBoxTextBox模板更改为:

<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox" >
        <ScrollViewer x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>

实际上是导致此选定视图的Border元素。