WPF ComboBox 確保 ItemTemple UserControl 從 ComboBox 繼承背景和前景

Question

我有一個 ComboBox，

        <ComboBox Grid.Row="1"
                  Margin="5"
                  ItemsSource="{Binding PreviousGroups, UpdateSourceTrigger=PropertyChanged}"
                  SelectedItem="{Binding SelectedGroup, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                  Style="{DynamicResource CBComboBoxStyle}"
                  ItemContainerStyle="{DynamicResource CBItemContainerStyle}">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <objects:GroupNameObject GroupName="{Binding Path=Name}"
                                             LastChecked="{Binding Path=LastVerified, StringFormat='dd - MM - yyyy |T| hh : mm : ss'}" />
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

它使用項目模板 GroupNameObject

<UserControl x:Class="MyProject.Objects.GroupNameObject"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         Name="groupNameObject">

<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MyProject;component/Assets/Colors.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</UserControl.Resources>

<Border Padding="3"
        CornerRadius="10"
        Margin="3"
        HorizontalAlignment="Stretch">
    <Border.Style>
        <Style TargetType="Border">
            <Setter Property="Background"
                    Value="Transparent" />
        </Style>
    </Border.Style>

    <StackPanel Orientation="Horizontal">
        <Grid Width="40"
              Height="40"
              Margin="5 2 3 2">
            <Border CornerRadius="10"
                    Background="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBoxItem}}}" />
            <StackPanel Orientation="Horizontal"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center">
                <fa:IconImage Icon="Folder"
                              Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBoxItem}}}"
                              Width="30" />
            </StackPanel>
        </Grid>

        <StackPanel>
            <TextBlock Text="{Binding Path=GroupName, ElementName=groupNameObject}"
                       FontSize="20"
                       FontWeight="Bold"
                       Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBoxItem}}}"
                       Margin="5 0" />
            <TextBlock FontSize="12"
                       Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBoxItem}}}"
                       Margin="5 3">

                <Run Text="{Binding Path=LastChecked, ElementName=groupNameObject, StringFormat='MM / dd / yyyy |T| HH : mm : ss'}" />
            </TextBlock>
        </StackPanel>
    </StackPanel>
</Border>

與 ItemContainerStyle

<Style x:Key="CBItemContainerStyle"
       TargetType="{x:Type ComboBoxItem}">
    <Setter Property="HorizontalContentAlignment"
            Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
    <Setter Property="VerticalContentAlignment"
            Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
    <Setter Property="Padding"
            Value="3,0,3,0" />
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                <Border x:Name="Bd"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}"
                        Padding="{TemplateBinding Padding}"
                        SnapsToDevicePixels="true">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsHighlighted"
                             Value="true">
                        <Setter Property="Background"
                                Value="{DynamicResource LemonCurry}" />
                        <Setter Property="Foreground"
                                Value="{DynamicResource LogoBlue}" />
                    </Trigger>
                    <Trigger Property="IsEnabled"
                             Value="false">
                        <Setter Property="Background"
                                Value="{DynamicResource PansyPurple}" />
                        <Setter Property="Foreground"
                                Value="{DynamicResource LemonCurry}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

構建時，DropDownItems 會正確繼承背景和前景項目，但顯示項目不會。

顯示項目示例

下拉項目示例

如何更改顯示項的背景和前景？

編輯：

終於找到了解決方法。 我沒有將 GroupNameObject 的前景和背景綁定到 ComboBoxItem，而是將其綁定到 ComboBox。

<StackPanel Orientation="Horizontal">
        <Grid Width="40"
              Height="40"
              Margin="5 2 3 2">
            <Border CornerRadius="10"
                    Background="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}}" />
            <StackPanel Orientation="Horizontal"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center">
                <fa:IconImage Icon="Folder"
                              Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}}"
                              Width="30" />
            </StackPanel>
        </Grid>

        <StackPanel>
            <TextBlock Text="{Binding Path=GroupName, ElementName=groupNameObject}"
                       FontSize="20"
                       FontWeight="Bold"
                       Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}}"
                       Margin="5 0" />
            <TextBlock FontSize="12"
                       Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}}"
                       Margin="5 3">

                <Run Text="{Binding Path=LastChecked, ElementName=groupNameObject, StringFormat='MM / dd / yyyy |T| HH : mm : ss'}" />
            </TextBlock>
        </StackPanel>
    </StackPanel>

在 ItemContainerStyle 中，我將突出顯示顏色更改為不同的陰影，因此它不會與 ComboBox Colors 沖突。

<Trigger Property="IsHighlighted"
                             Value="true">
                        <Setter Property="Background"
                                Value="{DynamicResource BlueSapphire}" />
                    </Trigger>

之后顯示項目

下拉項目之后

Answer 1

您可能還必須覆蓋 ComboBox 模板屬性：示例

       <Style TargetType="ComboBox" BasedOn="{StaticResource baseStyle}">
            <Setter ... />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid
                            x:Name="templateRoot"
                            UseLayoutRounding="True"
                            SnapsToDevicePixels="True"
                        >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="18" />
                            </Grid.ColumnDefinitions>

                            <Popup>
                                ...
                            </Popup>

                            <ToggleButton>
                                ...
                            </ToggleButton>

                            <ContentPresenter
                                x:Name="contentPresenter"
                                Grid.Column="0"
                                ...
                            />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

在這個 ToggleButton 里面是你的 ComboBox 的布局