WP7 ListBox ItemContainerStyle XAML 禁用不工作

Question

我有以下样式和列表框：

<Style x:Key="LwHListBoxItemStyle" TargetType="ListBoxItem">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="Padding" Value="24, 0, 24, 0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Border x:Name="LayoutRoot" BorderBrush="#FFCCCCCC" BorderThickness="0, 0, 0, 1" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
                                    <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ListBox x:Name="lbxContainer" Height="Auto" Width="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" VerticalAlignment="Top" ItemContainerStyle="{StaticResource LwHListBoxItemStyle}" />

我使用 Expression Blend 来创建样式。我希望 ListBoxItem 在禁用时具有 60% 的不透明度。我正在使用 ListBoxItems 以编程方式填充 ListBox，这些 ListBoxItems 根据某些条件设置了 IsEnabled 属性。我已经通过调试器并确认 ListBoxItems 确实有 IsEnabled = false，所以我的结论是我的 xaml 一定有问题。是否有什么我遗漏或做错了导致项目在禁用时变得不透明？

ListBox 为白色背景，内容为黑色文本。不透明度应该使它变灰。如果我将不透明度添加到正常的视觉状态，它会显示为正常状态，但也显示为禁用状态。我知道禁用的项目实际上是禁用的，因为我无法点击它们。我认为下面的代码会将正常状态显示为不透明但禁用的项目没有不透明。

<VisualState x:Name="Normal">
    <Storyboard>
        <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
    </Storyboard>
</VisualState>

更新：我很确定我的禁用状态有问题。即使我将背景更改为蓝色，我在禁用状态下添加的任何内容都不会保留。我正在以编程方式创建 ListBoxItems 并将内容属性设置为我创建的用户控件。这会引起问题吗？这对我来说没有意义，因为我可以将正常状态设置为 60% 的不透明度并且它可以工作，那么为什么禁用状态不能呢？

Answer 1

您不应该在控件模板中使用 ContentControl。您应该改用 ContentPresenter。如果让 ContentControl 显示另一个 ContentControl 的内容，您可能会遇到奇怪的问题。

除此之外，如果 ListBoxItem.Content 不是控件，ListBoxItem 只会进入“禁用”状态。如果 ListBoxItem.Content 是一个控件，那么即使 ListBoxItem.IsEnabled 为 false，它也会转换为“正常”状态。

Answer 2

您已经为 ListBoxItem 创建了样式，但没有为 ListBox 本身创建样式。而且你不必，必然。问题是默认情况下 ListBox 有白色背景。

所以第一步就是像这样将ListBox背景设置为透明...

<ListBox x:Name="lbxContainer" Background="Transparent" Height="Auto" Width="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" VerticalAlignment="Top" ItemContainerStyle="{StaticResource LwHListBoxItemStyle}" />

然后我只是对您的 ListBoxItem 样式进行了一些更改...

<Style x:Key="LwHListBoxItemStyle" TargetType="ListBoxItem">
    <Setter Property="Background" Value="White"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="Padding" Value="24, 0, 24, 0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Border x:Name="LayoutRoot" BorderBrush="#FFCCCCCC" Background="{TemplateBinding Background}" BorderThickness="0, 0, 0, 1" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>                                            
                                    <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="LayoutRoot" />
                                    <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

现在只要 ListBox 周围的容器不是白色的，由于 Opacity 设置，禁用的 ListBoxItem 应该显示为半透明。

例如...

<Grid Background="Black">
    <ListBox x:Name="lbxContainer" Background="Transparent" Height="Auto" Width="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" VerticalAlignment="Top" ItemContainerStyle="{StaticResource LwHListBoxItemStyle}">
        <ListBoxItem Content="enabled a" />
        <ListBoxItem Content="disabled b" IsEnabled="False"/>
        <ListBoxItem Content="enabled c"/>
    </ListBox>
</Grid>

看起来像这样......