的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，但這是一個快速猜測），可能你會想要添加自己的動畫。我認爲你現在有很多要做的嘗試。玩的開心！