3

次のスタイルとリスト ボックスがあります。

<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 は白い背景にあり、コンテンツとして黒いテキストがあります。不透明度は灰色にする必要があります。通常の表示状態に不透明度を追加すると、通常の状態だけでなく、無効な状態でも意図したとおりに表示されます。無効になっているアイテムをクリックできないため、実際には無効になっていることはわかっています。以下のコードは、通常の状態を不透明で無効なアイテムとして表示すると考えました。

<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% の不透明度で通常の状態を設定でき、それが機能するので、私には意味がありません。

4

2 に答える 2

1

コントロール テンプレート内で ContentControl を使用しないでください。代わりに ContentPresenter を使用する必要があります。ContentControl に別の ContentControl のコンテンツを表示させると、奇妙な問題が発生する可能性があります。

それとは別に、ListBoxItem.Content がコントロールでない場合、ListBoxItem は「無効」状態になるだけです。ListBoxItem.Content が Control の場合、ListBoxItem.IsEnabled が false であっても「Normal」状態に遷移します。

于 2011-03-05T00:50:32.367 に答える
0

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>

こんな感じになります...

無効なスタイル

于 2011-02-16T02:00:37.920 に答える