WPF-根据itemTemplate更改组合框样式

时间:2018-10-01 23:53:17

标签: wpf combobox

我需要创建一个组合,当下拉列表关闭时,该组合将显示一个简单的text(enum)值。但是当用户单击下拉菜单时,它应该在组合框项目中显示一个包含更多信息的复杂数据模板。

我创建了两个数据模板,以在关闭或打开下拉菜单时显示不同的信息。

<DataTemplate x:Key="DropDownOpenedTemplate">
        <ContentControl Content="{Binding}">
            <ContentControl.Style>
                <Style TargetType="{x:Type ContentControl}">
                    <!-- Complex template -->
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <DockPanel >
                                    <Image Width="100" DockPanel.Dock="Left" Stretch="Uniform" Source="{Binding ImageUri}" 
                                            VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,15,0" />
                                    <StackPanel DockPanel.Dock="Right" Orientation="Vertical">
                                        <TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left" FontStyle="Italic" FontWeight="Bold" Margin="10,0,0,5"/>
                                        <TextBlock Text="{Binding Description}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="25,0,0,0"/>
                                    </StackPanel>
                                </DockPanel>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ContentControl.Style>
        </ContentControl>
    </DataTemplate>
    <DataTemplate x:Key="DropDownClosedTemplate" >
        <ContentControl Content="{Binding}">
            <ContentControl.Style>
                <Style TargetType="{x:Type ContentControl}">
                    <!-- default template -->
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <TextBlock Text="{Binding Name}" HorizontalAlignment="Stretch"  />
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ContentControl.Style>
        </ContentControl>
    </DataTemplate>

然后我创建了一个模板选择器,它将覆盖SelectTemplate方法

public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        ContentPresenter presenter = (ContentPresenter)container;

        FrameworkElement elemnt = container as FrameworkElement;

        while (container != null)
        {
            container = VisualTreeHelper.GetParent(container);
            if (container is ComboBoxItem)
                return (DataTemplate)presenter.FindResource("DropDownOpenedTemplate"); ;
        }
        return (DataTemplate)presenter.FindResource("DropDownClosedTemplate");

    }

此功能正常工作。但是现在我需要根据所使用的模板来设置样式的格式。为简化起见,在选择dropdownclosedtemplate时,我需要组合框的背景色为蓝色;在选择dropdownopenedtemplate时,选择组合框的背景色为黄色。

<ComboBox x:Name="spComboBox" Grid.Row="1"
                  Grid.Column="1"
                  Width="200"
                  Margin="30"
              Background="Blue"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  ItemsSource="{Binding ModeList}" 
                  SelectedValue="{Binding SelectedMode, Mode=TwoWay}" 
                  ScrollViewer.CanContentScroll="False" 
                  ItemTemplateSelector="{StaticResource ComboBoxItemTemplateSelector}">
        <ComboBox.ItemContainerStyle>
            <Style TargetType="ComboBoxItem">
                <Setter Property="Background" Value="Yellow"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Value="False">
                        <Setter Property="Background" Value="Blue" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ComboBox.ItemContainerStyle>

    </ComboBox>

当选择dropdownopenedtemplate时,我只能看到黄色,但不能更改dropdownclosedtemplate的样式和selecteditem样式。

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

如果您不需要使用relativesource =,而是使用elementname = spComboBox,则可以轻松进行绑定。但是,如果我正确理解了您的三个状态,我根本就不需要它(如果没有,请具体说明,也许带有显示所有状态的图像)。我添加了一个文本框来显示这种绑定。它也适用于数据触发。但是我认为,如果要测试它,则应将它与True进行比较,而不是像示例中那样为false。

这是我的解决方法:

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   >
<StackPanel>
        <ComboBox x:Name="spComboBox" Grid.Row="1"
                  Grid.Column="1"
                  Width="200"
                  Margin="30"
                  Background="Blue"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  ScrollViewer.CanContentScroll="False" >
            <ComboBoxItem Name="cbi1">Item1</ComboBoxItem>
            <ComboBoxItem Name="cbi2">Item2</ComboBoxItem>
            <ComboBoxItem Name="cbi3">Item3</ComboBoxItem>
            <ComboBox.ItemContainerStyle>
                <Style TargetType="ComboBoxItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ComboBoxItem">
                                <Border x:Name="border" BorderThickness="1" Padding="3" Background="Yellow">
                                    <ContentPresenter/>
                                </Border>

                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="border" Property="Background" Value="Red"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
           </ComboBox.ItemContainerStyle>

        </ComboBox>
        <TextBlock Text="{Binding ElementName=spComboBox, Path=IsDropDownOpen}"></TextBlock>
    </StackPanel>
    </Window>

未选择任何内容时,它显示为蓝色。当您打开下拉菜单时,所有项目均为黄色,如果您选择一个项目,则其背景为=红色(尽管不容易立即看到,因为将光标直接设置为隐藏颜色,但是您会看到它是红色的,一旦您移动了光标)

对于处于关闭状态的背景色,this answer should help