列表框數據模板與樣式 - 點擊更改背景顏色

Question

我正在使用Windows Phone 8 application,我有包含項目的列表框，對於我使用過DataTemplate的項目，現在我有一個樣式，我已將其應用於List作為ItemContainerStyle。

基本上就是這樣，我有一個列表項目，默認顏色說灰色，現在當我點擊該項目時，顏色灰色應該變為紅色，以便它向用戶表明他已經選擇了該項目。

我的代碼可以工作，但它不適用於背景，而是應用為前景。

列表框 ：

<ListBox Name="listBox" 
         HorizontalAlignment="Stretch"
         ItemTemplate="{StaticResource DefaultTemplate}"
         ItemContainerStyle="{StaticResource ListBoxItemStyle}"/>

數據模板：

 <DataTemplate x:Key="DefaultTemplate">
            <Border  
                    Background="#e3e8f0"
                    Margin="0,2,0,0" 
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch">
                <Grid       Width="Auto"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center">
                    <TextBlock
                                           Text="{Binding Path=Text}" 
                                           HorizontalAlignment="Center"
                                           Padding="10,25,10,25"
                                           TextWrapping="Wrap"
                                           MinHeight="80"
                                           VerticalAlignment="Center"
                                           TextAlignment="Center"
                                           Style="{StaticResource TextStyle}"
                                           Foreground="Black"/>
</Grid>
            </Border>
        </DataTemplate>

ListBoxItemStyle：

<Style x:Key="ListBoxItemStyle" 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="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseLeave">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentControl x:Name="ContentContainer" 
                                            ContentTemplate="{TemplateBinding ContentTemplate}" 
                                            Content="{TemplateBinding Content}" 
                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            Margin="{TemplateBinding Padding}" 
                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <Rectangle x:Name="fillColor" Fill="#d2f2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
                            <Rectangle x:Name="fillColor2" Fill="#d2f2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
                            <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 1

您不需要為此重寫ControlTemplate 。 如果你想要的只是更改listBox的高亮畫筆，則將它放在ListBox資源下，覆蓋ListBox的系統高亮畫筆。

<ListBox>
  <ListBox.Resources>
     <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
                      Color="Red"/>
  </ListBox.Resources>
</ListBox>

Answer 2

更新：好的，因為您沒有明確指出您使用的是Silverlight ，它是WPF框架的一個子集，所以它的所有API都不一樣。

對於Windows手機，你想做這樣的事情

<Style x:Key="ListBoxItemStyle1" 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"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="ContentContainer"
                                Storyboard.TargetProperty="Foreground"
                                Duration="0">
                                            <DiscreteObjectKeyFrame  KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="border"
                                Storyboard.TargetProperty="Background"
                                Duration="0">
                                            <DiscreteObjectKeyFrame  KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="YellowGreen"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>

 </VisualStateManager.VisualStateGroups>
                         <StackPanel x:Name="border" Orientation="Horizontal">
                             <CheckBox x:Name="checkBox" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, 
 Path=IsSelected, Mode=TwoWay}" DataContext="{TemplateBinding
 IsSelected}" Visibility="{Binding Converter={StaticResource
 BooleanToVisibilityConverter}}"
 HorizontalContentAlignment="{TemplateBinding
 HorizontalContentAlignment}"/>
                         <ContentControl x:Name="ContentContainer" ontentTemplate="{TemplateBinding ContentTemplate}"
 Content="{TemplateBinding Content}" Foreground="{TemplateBinding
 Foreground}" HorizontalContentAlignment="{TemplateBinding
 HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
 VerticalContentAlignment="{TemplateBinding
 VerticalContentAlignment}"/>
                         </StackPanel>
                     </Border>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
    </Style>

然后設置ListBox的樣式

<ListBox x:Name="databoundListBox" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" SelectionMode="Multiple"/>