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％的不透明度。 我正在使用基於特定條件設置了IsEnabled屬性的ListBoxItems以編程方式填充ListBox。 我已經通過調試器並確認ListBoxItems確實有IsEnabled = false，所以我的結論是我的xaml肯定有問題。 是否有一些我錯過或做錯的事情導致物品在禁用時不會變得不透明？

ListBox在白色背景上，並以黑色文本作為內容。 不透明度應該使它變灰。 如果我將opacity添加到正常的可視狀態，它會顯示為正常狀態，但也顯示為Disabled狀態。 我知道禁用的項目實際上是禁用的，因為我無法點擊它們。 我認為下面的代碼將正常狀態顯示為不透明但禁用的項目沒有不透明度。

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

更新：我很確定我的殘疾人狀態有問題。 即使我將背景更改為藍色，我在禁用狀態下添加的任何內容都將保留。 我以編程方式創建ListBoxItems並將content屬性設置為我創建的用戶控件。 這可能導致問題嗎？ 這對我來說沒有意義，因為我可以設置60％不透明度的正常狀態並且它可以工作，那么為什么禁用狀態呢？

Answer 1

您不應該在控件模板中使用ContentControl。 您應該使用ContentPresenter。 您可以通過讓ContentControl顯示另一個ContentControl的內容來遇到奇怪的問題。

除此之外，如果ListBoxItem.Content不是Control，ListBoxItem將只進入“Disabled”狀態。 如果ListBoxItem.Content是一個Control，那么即使ListBoxItem.IsEnabled為false，它也將轉換為“Normal”狀態。

Answer 2

您已經為ListBoxItem創建了一個樣式，但是沒有為Lis​​tBox本身創建樣式。 並且你沒有必要。 問題是默認情況下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周圍的容器不是白色，由於不透明度設置，禁用的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>

看起來像這樣......