开发者

ListBoxItem animation and opacity

I have a Listbox with styles, including Listboxitem with styles. I am trying to create an animation that changes opacity from 0 to 1, to make items show on the list. I've managed to do this with the following code:

<Style x:Key="ListBoxStyle1" TargetType="ListBox">
            <Setter Property="Foreground" Value="#FF393C3F" />
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBox">
                        <Border Name="Border" Background="{x:Null}" BorderBrush="Black" BorderThickness="0" Padding="0">
                            <ItemsPresenter />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
            <Setter Property="Opacity" Value="0" />
            <Setter Property="Height" Value="16" />
            <Setter Property="VerticalContentAlignment" Value="Bottom" />
            <Setter Property="VerticalAlignment" Value="Bottom" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border Name="Border" Padding="10,1,0,0" Background="{x:Null}">
                            <ContentPresenter VerticalAlignment="Center" SnapsToDevicePixels="True" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="{StaticResource arrow}" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Foreground" Value="#FF828689" />
                            </Trigger>
                            <Trigger Property="IsVisible" Value="true">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:0.4" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

The thing works as it should (apart from that I want more time to pass between current and next item animation start. But it has a problem with opacity. Everything possible is set to transparent, backgrounds and all. And I use transparent .png brush for selected item.

The problem is with the opacity animation and is best seen on the bottom picture:

ListBoxItem animation and opacity

This is a screenshot in the middle of animation (at the time the opacity of the listboxitems is 0.8) and you can clearly see white background around all text. It's even more visible in the first selected item, because it uses transparent .png. This background magically dissapears when animation is finished and the opacity is 1.0.

How to fix this problem? Did I forget to set any background perhaps?

Thank you for your help!

Edit:

I am adding my listbox declaration:

<ListBox Height="239" HorizontalAlignment="Left" Margin="0,0,0,0" Name="listBox1" VerticalAlignment="Top" Width="145" Background="{x:Null}"  FontWeight="Black" FontSize="8" BorderBrush="{x:Null}" SnapsToDevicePixels="True" BorderThickness="0" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" Style="{StaticResource ListBoxStyle1}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel VerticalAlignment="Top" Background="{x:Null}" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</开发者_JAVA百科ListBox>

Also another question is: How to delay the animation that each listboxitem would be displayed with a delay of few milliseconds before the next one?

Thank you for all your help.


This might be a system dependent rendering anomaly, i tried that style (only had to use my own selected item image, also a transparent PNG) and it worked quite nicely.
In one application of mine images set to the Fill property of Rectangles were weirdly stretched on one of my computers (which even had the same operating system, Win7 Professional) so that would not be unheard of...


I have fixed the problem. The problem was that in code I was overriding window's AllowTransparency flag. Now it works as it should. If anyone would encounter a similar problem.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜