更改列表框项目的背景图像

时间:2012-05-31 23:10:25

标签: windows-phone-7 listbox expression-blend

我想根据选择状态切换列表框项目的背景。

我最初在我的ItemTemplate中对背景进行了硬编码,如下所示:

   <StackPanel.Background>
        <ImageBrush ImageSource="PodImages\podstate-Clip.png" />
   </StackPanel.Background>

我尝试进入Blend以根据视觉状态设置背景(选择vs未选中),但无法弄清楚Blend,我仍然不理解样式标记。有人可以帮助我使用样式标记或者在Blend中指导我一下我可以设置它吗?

编辑: 好的,我已经找到了如何将列表项添加到列表框并根据混合中的可视状态设置背景,但我无法弄清楚如何为datatemplate项执行此操作

编辑:
好吧,我觉得我想做的风格就是这样(但这会让我的应用崩溃)

我修改了

<Storyboard>
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ImageSource" Storyboard.TargetName="ContentBackground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="PodImages/podstate-Clipped.png"/>
     </ObjectAnimationUsingKeyFrames>
</Storyboard>

这是总体风格:

<Style x:Key="ListBoxItemStyle2" 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="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 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"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ImageSource" Storyboard.TargetName="ContentBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="PodImages/podstate-Clip.png"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                    <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ImageSource" Storyboard.TargetName="ContentBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="PodImages/podstate-Clipped.png"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </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}">
                            <ContentControl.Background>
                                <ImageBrush Stretch="Fill" x:Name="ContentBackground" ImageSource="PodImages/podstate-Clip.png"/>
                            </ContentControl.Background>
                        </ContentControl>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

1 个答案:

答案 0 :(得分:0)

使用列表框背景中的{Binding ResourceName},查看此处了解更多提示http://www.silverlight.net/learn/data-networking/binding/silverlight-data-binding

或者我建议你在Silverlight中搜索&#34; Databinding&#34;这将为您提供大量的信息