2009-09-02 60 views
2

如何設計一個列表框讓選擇具有與默認視圖不同的文本顏色?我已經通過幾種方式查看了這一點,並且因爲ContentPresenter沒有Foreground屬性。Silverlight Listbox項目樣式

列表框的默認控件模板提供了幾個可用於調整高亮顏色的矩形。例如,使用默認樣式,稱爲BGColor3的矩形將其不透明度調整爲獲得高光效果。

這裏是我的控件模板批量:

<Grid> 
    <Rectangle x:Name="BGColor2" Fill="{StaticResource HoverBrush}" Stroke="Black" StrokeThickness="1" Opacity="0"/> 
    <Rectangle x:Name="BGColor3" Fill="{StaticResource ListboxHighlightBrush}" StrokeThickness="0" Opacity="0"/> 
    <Rectangle x:Name="BGColor" Stroke="Black" StrokeThickness="0" Opacity="0.2" Fill="{TemplateBinding Background}"/> 
    <Border Height="20"> 
     <ContentPresenter HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> 
    </Border> 
    <Rectangle Fill="Blue" Opacity="0.4" x:Name="FocusVisual" Stroke="#BF313131" Margin="1" StrokeThickness="1" StrokeDashArray="1 2" StrokeDashCap="Square" Visibility="Collapsed" /> 
    <Rectangle x:Name="BorderRect" Stroke="Black" StrokeThickness="1" Opacity="0.3" /> 
</Grid> 

在選擇視覺狀態,這裏的要點是:

<VisualStateGroup x:Name="SelectionStates"> 
    <VisualState x:Name="Unselected"/> 
    <VisualState x:Name="Selected"> 
     <Storyboard> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BGColor2" Storyboard.TargetProperty="(UIElement.Opacity)"> 
       <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.8"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
    </VisualState> 
</VisualStateGroup> 

什麼是顯而易見的是,BGColor2矩形被修改(不透明度),以便所選項目具有背景。很公平。在Storyboard的這個部分中,有無論如何訪問ContentPresenter或其他類似的內容並切換文本前景色?

腳註:簡單地將不同的模板與視覺狀態轉換對比起來會不會更簡潔?

----給出的第一個答案後增加----

使用一個TextBlock 幾乎的伎倆,但有趣的是,對於SelectedUnfocused過渡似乎並不強制執行,是說,實施您的解決方案完美地工作,直到人們將鼠標放在先前選定的項目上,然後文本再次變爲黑色。

這裏是我的模板:

<!-- ItemStyle brushes --> 
<SolidColorBrush x:Key="BaseColorBrush" Color="White"/> 
<SolidColorBrush x:Key="BaseColorBrushFaint" Color="#265B0000"/> 
<SolidColorBrush x:Key="ForegroundColorBrush" Color="#FFFFFFFF"/> 
<SolidColorBrush x:Key="HoverBrush2" Color="#FF808000"/> 
<LinearGradientBrush x:Key="HoverBrush" EndPoint="0.5,1" StartPoint="0.5,0"> 
    <GradientStop Color="#FF406DC7" Offset="1"/> 
    <GradientStop Color="#FF002C83"/> 
</LinearGradientBrush> 

<LinearGradientBrush x:Key="ListboxHighlightBrush" EndPoint="0.5,1" StartPoint="0.5,0"> 
    <GradientStop Color="#FF7CA8FF" Offset="1"/> 
    <GradientStop Color="#FF376FDC"/> 
</LinearGradientBrush> 

<SolidColorBrush x:Key="HyperlinkBrush" Color="#FFC8A1A1"/> 

<!-- Search Listbox ItemStyle --> 
<Style x:Key="ItemStyle" TargetType="ListBoxItem"> 
    <Setter Property="Padding" Value="4"/> 
    <Setter Property="HorizontalContentAlignment" Value="Left"/> 
    <Setter Property="VerticalContentAlignment" Value="Top"/> 
    <Setter Property="Background" Value="{StaticResource BaseColorBrush}"/> 
    <Setter Property="BorderBrush" Value="{StaticResource HoverBrush}"/> 
    <Setter Property="Foreground" Value="#FF333333"/> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="TabNavigation" Value="Local"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ListBoxItem"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="BGColor3" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/> 
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BGColor" Storyboard.TargetProperty="(UIElement.Opacity)"> 
             <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.3"/> 
            </DoubleAnimationUsingKeyFrames> 
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="00:00:00" Value="White"/> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)"> 
             <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.55"/> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="SelectionStates"> 
          <VisualState x:Name="Unselected"/> 
          <VisualState x:Name="Selected"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BGColor2" Storyboard.TargetProperty="(UIElement.Opacity)"> 
             <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.9"/> 
            </DoubleAnimationUsingKeyFrames> 
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="00:00:00" Value="White"/> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="SelectedUnfocused"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BGColor2" Storyboard.TargetProperty="(UIElement.Opacity)"> 
             <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.9"/> 
            </DoubleAnimationUsingKeyFrames> 
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFFFFFFF"/> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="FocusStates"> 
          <VisualState x:Name="Focused"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Visible</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="00:00:00" Value="White"/> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unfocused"> 
           <Storyboard/> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Rectangle x:Name="BGColor2" Fill="{StaticResource HoverBrush}" Stroke="Black" StrokeThickness="0" Opacity="0"/> 
        <Rectangle x:Name="BGColor3" Fill="{StaticResource ListboxHighlightBrush}" StrokeThickness="0" Opacity="0"/> 
        <Rectangle x:Name="BGColor" Stroke="Black" StrokeThickness="0" Opacity="0.3" Fill="{TemplateBinding Background}"/> 
        <Border Height="20"> 
         <TextBlock Canvas.ZIndex="22" x:Name="contentPresenter" Foreground="{TemplateBinding Foreground}" 
          Text="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding 
          HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" /> 
        </Border> 
        <Rectangle Opacity="0.4" x:Name="FocusVisual" Stroke="#BF313131" Margin="1" StrokeThickness="1" StrokeDashArray="1 2" StrokeDashCap="Square" Visibility="Collapsed" /> 
        <Rectangle x:Name="BorderRect" Stroke="Black" StrokeThickness="0" Opacity="0.3" /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

我的模板的消耗:

<ListBox ItemContainerStyle="{StaticResource ItemStyle}" x:Name="testListBox" /> 

最後一些代碼來填充列表框:

  List<string> data = new List<string>(); 
      for (int i = 0; i < 30; i++) { 
       data.Add(DateTime.Now.AddDays(i).ToString("MMMM dd yyyy")); 
      }   
      testListBox.ItemsSource = data;   

回答

2

我想你的情況。默認情況下,默認listitem的內容是一個黑色的字符串。列表框項目具有可設置的前景屬性,但我不確定它在模板中的位置。他們做了一些特殊的字符串來使用前景,但沒有在模板中公開它。你可能想要嘗試的一種方法是,如果你知道你總是會有字符串內容,用一個textblock代替controltemplate的contentpresenter,而這個文本塊有forground。 (要編輯列表項的模板共混物3右鍵單擊它,去編輯模板,編輯複製,並修改新樣式}

<ContentPresenter x:Name="contentPresenter" 
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" 
ContentTemplate="{TemplateBinding ContentTemplate}" /> 

<TextBlock x:Name="contentPresenter" Foreground="{TemplateBinding Foreground}" 
Text="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding 
HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" /> 

我加入了TemplateBinding文本和前景你應該能夠在視覺狀態中操縱前景以獲得正確的狀態看起來禁用,選擇等。我希望這有助於。

+0

我發佈了一個響應 - 我實現了你的建議策略,它在99%的時間內工作。也許在這一點上,它更像是一個框架問題 - 在代碼的第二個例子中,我粘貼了所有的代碼,直到一個人在列表框中的選定項目上進行鼠標移動。 – t3rse 2009-09-12 13:17:28

6

將您的ContentPresenter模板更改爲具有Foreground屬性的ContentControl可以TemplateBind。

+0

謝謝Shawn,所以即使當我使用TextBlock時,我也能夠鉤入前臺,但我遇到的問題與VisualState更改有關,因此當您將鼠標移出所選項目時,它將保持白色而不是返回到默認值。我嘗試了通過替換TextBlock的ContentPresenter來查看是否有所作爲並仍然遇到了障礙。 – t3rse 2009-09-12 13:19:21

+0

啊,好建議!這比TextBlock更好。我將在下次使用它。 – Paully 2009-09-13 02:40:23