更新

Question

我有一个像这样的ComboBox：

<ComboBox Grid.Column="2" Grid.Row="2" x:Name="IntroOutroList" Background="White" Margin="0,0,0,0" ItemsSource="{Binding AvailableCovers}" SelectedIndex="{Binding SelectedCoverIndx}">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="SelectionChanged">
                        <i:InvokeCommandAction Command="{Binding IntroOutroSelectionChangedCommand}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock TextTrimming="CharacterEllipsis" />
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>

和资源：

<LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
            <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="Blue" Offset="0.0"/>
                    <GradientStop Color="White" Offset="1.0"/>
                </GradientStopCollection>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>

        <SolidColorBrush x:Key="WindowBackgroundBrush" Color="LightGray" />


        <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="20" />
                </Grid.ColumnDefinitions>
                <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="1" Background="#5089ba" BorderThickness="1" BorderBrush="LightGray"/>
                <Border Grid.Column="0" CornerRadius="1"  Margin="1"  Background="{StaticResource WindowBackgroundBrush}" BorderThickness="0,0,1,0" />
                <Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center" Fill="White"  VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>
            </Grid>
        </ControlTemplate>



        <Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Grid>
                            <ToggleButton  x:Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2" Focusable="false" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
                            <ContentPresenter x:Name="ContentSite" IsHitTestVisible="True" VerticalAlignment="Center" HorizontalAlignment="Left" Content="{TemplateBinding SelectionBoxItem}" TextBlock.FontWeight="Bold" TextBlock.TextAlignment="Center" />

                            <!--<TextBox x:Name="PART_EditableTextBox" Style="{x:Null}"   HorizontalAlignment="Left" VerticalAlignment="Center"  Focusable="True" Text="SAVED PRESETS" TextAlignment="Center" FontWeight="Bold" Background="Transparent" Visibility="Visible"  IsReadOnly="False" BorderThickness="0" />-->
                            <Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide" TextBlock.FontWeight="Bold" TextBlock.TextAlignment="Center">
                                <Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                    <Border x:Name="DropDownBorder" Background="{StaticResource WindowBackgroundBrush}" BorderThickness="1"/>
                                    <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                    </ScrollViewer>

                                </Grid>
                            </Popup>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

我希望能够修剪超出文本区域的项目文本，但它没有。知道缺少什么............................................. ...........？

Answer 1

您的DataTemplate需要进行一项更改，您还需要对控件模板进行一些更改。

DataTemplate很简单。您只需要告诉它您希望在TextBlock中看到哪些文字。由于您的商品只是字符串，因此您使用整个商品而不是其中一个属性：

<DataTemplate>
    <TextBlock Text="{Binding Path=.}" TextTrimming="CharacterEllipsis" />
</DataTemplate>

现在为控件模板。

ContentPresenter位于ToggleButton之上，因为你把它放在那里。除非您创建行或列并将元素分配给不同的行/列，否则网格中的元素会重叠。

另一个问题是你没有在ItemTemplate中使用ContentPresenter，所以我也绑定了该属性。理想情况下，您还应该处理ComboBox使用DisplayMemberPath而不是ItemTemplate的情况，但我们现在可以暂时放弃。我本来希望将TextBlock.TextTrimming="CharacterEllipsis"应用于ContentPresenter而不是ItemTemplate，但它不是附加属性，您不能这样做。

我添加或更改的属性位于每个元素的开头，x:Name之前。

<ControlTemplate TargetType="{x:Type ComboBox}">
    <Grid Background="{TemplateBinding Background}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <ToggleButton  
            Grid.Column="1" 
            x:Name="ToggleButton" 
            Template="{StaticResource ComboBoxToggleButton}" 
            Focusable="false" 
            IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
            ClickMode="Press"
            />

        <ContentPresenter 
            Grid.Column="0"
            ContentTemplate="{TemplateBinding ItemTemplate}"
            HorizontalAlignment="Stretch" 
            x:Name="ContentSite" 
            IsHitTestVisible="True" 
            VerticalAlignment="Center" 
            Content="{TemplateBinding SelectionBoxItem}" 
            TextBlock.FontWeight="Bold" 
            TextBlock.TextAlignment="Center" 
            />

        <!--<TextBox x:Name="PART_EditableTextBox" Style="{x:Null}"   HorizontalAlignment="Left" VerticalAlignment="Center"  Focusable="True" Text="SAVED PRESETS" TextAlignment="Center" FontWeight="Bold" Background="Transparent" Visibility="Visible"  IsReadOnly="False" BorderThickness="0" />-->
        <Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide" TextBlock.FontWeight="Bold" TextBlock.TextAlignment="Center">
            <Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                <Border x:Name="DropDownBorder" Background="{StaticResource WindowBackgroundBrush}" BorderThickness="1"/>
                <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                </ScrollViewer>

            </Grid>
        </Popup>
    </Grid>
</ControlTemplate>

更新

我甚至没有查看ToggleButton模板，但事实证明原始设计使其全宽，以便用户可以单击文本区域以打开下拉列表。并且ToggleButton为整个控件提供了背景色。因此，上述解决方案应该将ToggleButton放在ContentPresenter后面，Grid.Column="0" Grid.ColumnSpan="2"。

但这是组织它的有趣方式，它使所有的边界有点奇怪。目前还不清楚并且很难弄清楚如何改变这些东西。所以我重写了它。

<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
    <Grid>
        <Border 
            x:Name="Border" 
            Background="#5089ba"
            Width="16"
            />
        <Path 
            x:Name="Arrow" 
            Grid.Column="1" 
            HorizontalAlignment="Center" 
            Fill="White" 
            VerticalAlignment="Center" 
            Data="M 0 0 L 4 4 L 8 0 Z"
            />
    </Grid>
</ControlTemplate>

<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBox}">
                <Grid Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <Border 
                        x:Name="Border" 
                        Grid.Column="0"
                        Grid.ColumnSpan="2" 
                        CornerRadius="1" 
                        Background="#5089ba" 
                        BorderThickness="1" 
                        BorderBrush="LightGray"
                        />

                    <!-- Overall border-->
                    <Border 
                        Grid.Column="0" 
                        Background="{StaticResource WindowBackgroundBrush}" 
                        />

                    <!-- This lets the user click on text area to open the dropdown -->
                    <ToggleButton 
                        x:Name="InvisibleButton"
                        Grid.Column="0"
                        Opacity="0" 
                        Focusable="False" 
                        IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
                        ClickMode="Press"
                        />

                    <ContentPresenter 
                        Grid.Column="0"
                        x:Name="ContentSite" 
                        IsHitTestVisible="True" 
                        Margin="1,1,0,1"
                        VerticalAlignment="Center" 
                        HorizontalAlignment="Left" 
                        Content="{TemplateBinding SelectionBoxItem}" 
                        TextBlock.FontWeight="Bold" 
                        TextBlock.TextAlignment="Center" 
                        ContentTemplate="{TemplateBinding ItemTemplate}"
                        />

                    <ToggleButton  
                        Grid.Column="1" 
                        Margin="0,1,1,1"
                        x:Name="ToggleButton" 
                        Template="{StaticResource ComboBoxToggleButton}" 
                        Focusable="false" 
                        IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
                        ClickMode="Press"
                        />

                    <!--<TextBox x:Name="PART_EditableTextBox" Style="{x:Null}"   HorizontalAlignment="Left" VerticalAlignment="Center"  Focusable="True" Text="SAVED PRESETS" TextAlignment="Center" FontWeight="Bold" Background="Transparent" Visibility="Visible"  IsReadOnly="False" BorderThickness="0" />-->
                    <Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide" TextBlock.FontWeight="Bold" TextBlock.TextAlignment="Center">
                        <Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                            <Border x:Name="DropDownBorder" Background="{StaticResource WindowBackgroundBrush}" BorderThickness="1"/>
                            <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>

                        </Grid>
                    </Popup>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Retemplated ComboBox文本未被修剪

1 个答案:

更新