のWindows Phone 7の選択ListBoxItem

Question

内の特定の制御のための設定スタイルのは、私はこのような何かを持っているとしましょうListBoxItemが選択されたときにTextBlockが "second"と呼ばれていますか？私はすべてのListBoxItemの内容のFontSizeを設定したい場合、私は問題はないでしょう。このシナリオは、ここやWeb上の他の場所でかなりよく説明されています。

Answer 1

TextBlockのスタイルを目的のスタイルに設定します。

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

Answer 2

これを達成する方法の1つは、SecondText依存関係プロパティを持つ拡張ListBoxクラスを作成することです。次に、Blendを使用して通常のListBoxスタイルを生成し、targatタイプをMy ExtendedListBoxに変更します。

このスタイルでは、別のTextBlockコントロールを追加し、そのText TemplateBindingをSecondTextに設定します。選択したビジュアルステートでこのTextBlockのフォントサイズを変更するだけです。

また、ListBoxを拡張するのではなく、直接接続されたプロパティSecondTextとTemplateBindingを直接作成することができますが、まだこのメソッドをテストしていません。

ご希望の方は、これを使い始めることができます。 :)

Answer 3

は、私はあなたに正確な解を与えることはありませんが、良い点はで開始する：あなたはあなたのセットアップと一緒に7.0/7.1にX.Yを調整する必要があるファイル

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

をチェックしてください。そこには、WP7/Silverlightのすべての基本UIコントロールで使用されているのとまったく同じコントロールテンプレートがあります。 whateverelse VisualStudioを-または-でそれを開き、を検索：

<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を表示するものです。
そのグループのVisualStatesは、の変更をの通常の状態から定義します。これは、リスト要素に対して「選択状態」が発生した場合に発生します。
「選択状態」が減少すると、要素は自動的に選択されていない状態に戻り、ビジュアルが続きます。 Unselectedビジュアルステートは変更を強制しないので、プレーンなDataTemplateスタイルが保持されます。

最後に気付くべきことは、これがListBoxItemのスタイルであり、がデータアイテムでもでもなく、データテンプレートでもないことです。あなたのDataTemplateは決して触れられません、それはContentPresenterによって直接表示されます。 ListBoxは、すべてのアイテムを "ListBoxItem"インスタンスにラップし、それらのListBoxItemを表示し、そのスタイルを適用します。

IMHO、これはあなたが作業する必要があるポイントです。

あなたは&は、あなたのニーズにこのスタイルを変更して、あなたのListBox.ItemContainerStyleはその新しいスタイルに設定をコピーすることもできます。方法の一つは、次のとおりです。

は

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

今、トリックは、「選択」visualSTATEのを修正し、それを変更することですないフォアグラウンド（それがあなたのTextBoxの両方のスタイルを変更だろうやって！）が、いくつかの他の財産れますあなたのtxbsの1つにしか影響しません。不幸なことに、それはより難しい/醜いかもしれません。

<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> 

これは、ほとんど何をする必要があります：私はその瞬間にあなたのDataTemplateでのContentPresenterをハード置き換えると、そのようなvisualSTATEの中にあなたの正確な葉テキストボックスを参照するよりも、それは「きれい」にする方法任意のアイデアをしないでくださいあなたは欲しい、または少なくともそれにとても近い。私はそれをテストしていない、あなたは適切なデータバインディング（私はDataContent =バインディング：コンテンツが含まれているが、それは素早く推測だ）と調整する必要がありますおそらく自分のアニメーションを追加したいと思うかもしれません。私は今あなたが実験するたくさんのビットを持っていると思います。楽しむ！