如何更改itemsControl stackpanel背景颜色

时间:2014-03-24 10:15:08

标签: c# wpf itemscontrol stackpanel

我有一个包含10个项someList的列表,我会通过itemsControl在我的页面上显示它们,如下所示:

<ItemsControl DataContext="{Binding [someViewModel]}" 
              BorderBrush="Black" 
              ItemSource="{Binding someList}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="1" Background="Green">
                <StackPanel MouseDown="{Binding Path=DataContext.someCommand,   
                                        RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type ItemsControl}}}" 
                                        Command Parameter="{Binding someID}">
                    <TextBlock Text="{Binding something}">
                </StackPanel>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

我能够触发someCommand方法,并且我能够传入someID作为输入参数。现在我想知道如何更新stackPanel背景颜色,使其看起来像“选中”。现在意味着所有项目都将具有绿色背景,当我单击其中一个堆叠面板时,该堆叠面板应将背景更改为红色并将其他更改为绿色

2 个答案:

答案 0 :(得分:1)

如果您想使用ItemsControl,可以使用自定义ItemTemplateRadioButton更改为ControlTemplate,其中包含Border Background会更改IsChecked == true红色

<ItemsControl DataContext="{Binding [someViewModel]}" BorderBrush="Black" ItemSource="{Binding someList}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <RadioButton Content="{Binding something}" GroupName="radioGroup">
                <RadioButton.Template>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Border Background="Green" x:Name="PART_Border">
                            <ContentPresenter/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="PART_Border" Property="Background" Value="Red"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </RadioButton.Template>
            </RadioButton>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

但是,我没有看到您不能将ListBoxSelectionMode=Single(默认值)一起使用并更改Template的{​​{1}}的原因:

ListBoxItem

甚至做这样的事情,而不改变<ListBox DataContext="{Binding [someViewModel]}" BorderBrush="Black" ItemSource="{Binding someList}"> <ListBox.ItemContainerStyle> <Style TargetType="{x:Type ListBoxItem}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ListBoxItem}"> <Border Background="Green" x:Name="PART_Border"> <ContentPresenter/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter TargetName="PART_Border" Property="Background" Value="Red"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ListBox.ItemContainerStyle> </ListBox>

Template

在WPF中,通常更容易选择具有所需功能的控件,并将其设置为您想要的样式,然后以相反的方式执行此操作

答案 1 :(得分:0)

为什么不做这样的事情

<DataTemplate>
    <Border BorderThickness="1" Background="Green" x:Name="MyBorder">
        <StackPanel MouseDown="{Binding Path=DataContext.someCommand,   
            RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type ItemsControl}}}" 
            Command Parameter="{Binding someID}">
            <TextBlock Text="{Binding something}">
        </StackPanel>
    </Border>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Path=IsSelected}" Value="true">
                    <Setter TargetName="MyBorder" Property="Background" Value="Black" />
            </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>