的Windows Phone 7 - 选择一个ListBoxItem

Question

内特定控制设置样式比方说，我有这样的事情：

<Grid> 
    <ListBox x:Name="list" 
     ItemsSource="{Binding SomeCollection, Mode=TwoWay}" 
     SelectedItem="{Binding SomeItem, Mode=TwoWay}">      
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <TextBlock x:Name="first" Text="{Binding SomeProperty}" /> 
       <TextBlock x:Name="second" Text="{Binding OtherProperty}" /> 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 
</Grid> 

现在的只有，我如何改变某些样式属性（f.ex.字号）当一个ListBoxItem被选中时，TextBlock称为“秒”？如果我想为所有ListBoxItem的内容设置FontSize，那么我没有问题。这种情况在这里和网络上的其他地方都有很好的记录。

Answer 1

将文本块上的样式设置为您想要的样式。

<DataTemplate> 
    <TextBlock x:Name="first" Style="{StaticResource Header}" Text="{Binding SomeProperty}" /> 
    <TextBlock x:Name="second" Style="{StaticResource Info}" Text="{Binding OtherProperty}" /> 
</DataTemplate> 

Answer 2

实现此目的的一种方法是，创建一个扩展的ListBox类，并在其中包含一个SecondText依赖项属性。然后，只需使用Blend生成一个正常的ListBox样式，将targat类型更改为我的ExtendedListBox。

在此样式中，添加另一个TextBlock控件并将其TextBindding设置为SecondText。您只需在选定的可视状态下更改此TextBlock的字体大小。另外，不是扩展ListBox，而是直接创建一个附加属性SecondText并仅仅是TemplateBinding，但是我还没有测试过这个方法。

希望这可以让你开始。 :)

Answer 3

我不会给你一个确切的解决方案，但好点的下手：看看你能和你一起设置调整X.Y〜7.0/7.1的文件

C:\Program Files\Microsoft SDKs\Windows Phone\vX.Y\Design\System.Windows.xaml 

。在那里您将找到完全相同的控制模板，这些模板正在使用WP7/Silverlight的所有基本UI控件。在VisualStudio中有或whateverelse打开它，然后搜索：

<Style TargetType="ListBoxItem"> 
    (... and immediatelly following ~40 lines of xaml) 

很好啊，因为我已经打开了该文件，下面是

<!--x:Key="PhoneListBoxItem"--> 
    <Style 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" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
       <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="CommonStates"> 
        <VisualState x:Name="Normal"/> 
        <VisualState x:Name="MouseOver" /> 
        <VisualState x:Name="Disabled"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/> 
         </ObjectAnimationUsingKeyFrames> 
         <DoubleAnimation Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" /> 
        </Storyboard> 
        </VisualState> 
       </VisualStateGroup> 
       <VisualStateGroup x:Name="SelectionStates"> 
        <VisualState x:Name="Unselected"/> 
        <VisualState x:Name="Selected"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
        </VisualState> 
       </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups> 
       <ContentControl x:Name="ContentContainer" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
       Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Foreground="{TemplateBinding Foreground}" /> 
      </Border> 
      </ControlTemplate> 
     </Setter.Value> 
     </Setter> 
    </Style> 

这是完整的风格为您DEFAULT一个ListBoxItem - 你想改变的东西。浏览代码并注意'ContentPresenter'和之前的'VisualStateGroup x：Name ='SelectionStates''。

ContentPresenter是将显示该项目的DataTemplate的东西。
该组中的视觉状态定义变化从正常状态，如果在列表元素上触发“选择状态”应该发生的状态。
一旦“选择状态”减少，元素将自动返回到未选定状态，并且他的视觉效果会跟随。另请注意，未选中的可视状态不会强制执行任何更改 - 因此它会保留您的普通DataTemplate样式。

最后要注意的是，这是一个ListBoxItem风格，而不是，对于您的数据项，也不是您的数据模板。您的DataTemplate永远不会被触摸，它直接由ContentPresenter显示。 ListBox将所有项目包装在“ListBoxItem”实例中，然后显示这些ListBoxItems并将其应用于它们。

恕我直言，这是你必须与之合作的观点。

您可能想复制&改变这种风格到您的需求，那么你ListBox.ItemContainerStyle设置为新风格。其中一个方法是：

<YourPage.Resources> 
    <Style x:Key="mylistboxitemoverride" ..... 
     ........ 
    </Style> 
</YourPage.Resources> 
... 
... 
<ListBox ......... ItemContainerStyle="{StaticResource mylistboxitemoverride}" 
    ... 
    ... 
</ListBox> 

现在，问题是修改“选定”的VisualState，并使其改变不是前台（这样做会restyle双方你的文本框！），但其他一些属性，该属性将只影响你的一个txbs。不幸的是，这可能更困难/更丑陋。我不知道在那一刻，任何想法如何使它比你的DataTemplate硬盘更换ContentPresenter，并在的VisualState一样，引用您的确切叶文本框“漂亮”：

<Style .... 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" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
       <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="CommonStates"> 
        <VisualState x:Name="Normal"/> 
        <VisualState x:Name="MouseOver" /> 
        <VisualState x:Name="Disabled"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/> 
         </ObjectAnimationUsingKeyFrames> 
         <DoubleAnimation Storyboard.TargetName="SECOND" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" /> <!-- #### RETARGETTED --> 
        </Storyboard> 
        </VisualState> 
       </VisualStateGroup> 
       <VisualStateGroup x:Name="SelectionStates"> 
        <VisualState x:Name="Unselected"/> 
        <VisualState x:Name="Selected"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SECOND" Storyboard.TargetProperty="Foreground"> <!-- #### RETARGETTED --> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
        </VisualState> 
       </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups> 

       <!-- #### INLINED YOUR DATATEMPLATE --> 
       <StackPanel Orientation="Vertical" 
          Margin="{TemplateBinding Padding}" 
          DataContext="{TemplateBinding Content}"> <!-- #### careful with the bindings. the DataCtx may be needed or is spurious. do check that! --> 
       <TextBlock Text="{Binding SomeProperty}" /> <!-- #### referenced from nowhere, so I removed the name --> 
       <TextBlock x:Name="SECOND" Text="{Binding OtherProperty}" /> 
       </StackPanel> 

      </Border> 
      </ControlTemplate> 
     </Setter.Value> 
     </Setter> 
    </Style> 

这应该是几乎什么你想要的，或者至少非常接近它。我没有测试过，你可能需要修改适当的数据绑定（我已经包含了一个DataContent = binding：Content，但这是一个快速猜测），可能你会想要添加自己的动画。我认为你现在有很多要做的尝试。玩的开心！