2013-11-29 6 views
2

У меня есть следующий ListBox ниже. Я не уверен, как изменить передний план текста текстового блока выбранного элемента при выборе элемента, а затем вернуться к исходному цвету переднего плана, когда элемент не выбран (наиболее вероятно, когда выбран другой элемент в списке ListBox)?Как изменить выпадающий текст переднего плана ListBox Item

<ListBox Name="ListBox" SelectionMode="Single" ItemsSource="{Binding}" Margin="{Binding}" 
        toolkit:TiltEffect.IsTiltEnabled="True" SelectionChanged="ListBox_SelectionChanged" > 
        <ListBox.ItemsPanel> 
         <ItemsPanelTemplate> 
          <toolkit:WrapPanel ItemWidth="159" ItemHeight="Auto" /> 
         </ItemsPanelTemplate> 
        </ListBox.ItemsPanel> 
        <ListBox.ItemTemplate> 
         <DataTemplate> 
          <StackPanel Orientation="Vertical" > 
           <Image Source="{Binding Thumbnail}" Width="155" Height="155" /> 
           <TextBlock Text="{Binding Name}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" /> 
          </StackPanel> 
         </DataTemplate> 
        </ListBox.ItemTemplate> 
       </ListBox> 

ответ

5

Вы должны редактировать ItemContainerStyle (Изменить дополнительные шаблоны> Edit генерироваться Item Контейнер (ItemContainerStyle)).

В пределах ItemContainerStyle есть Selected визуальное состояние, и вы можете его изменить.

<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.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="YOUR_NEW_COLOR"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
+0

Хорошо. Я не вижу, где я могу выбрать любые опции для редактирования 'ItemContainerStyle'? В любом случае, когда я вставляю фрагмент кода в свой элемент Page Resources Element, я получаю сообщение об ошибке? Кроме того, поскольку это нацеливается на «ListBoxItem», где я должен ссылаться на это? – Matthew

+0

Взятие моего предыдущего комментария! Я просто добавил 'ItemContainerStyle =" {StaticResource ListBoxItemStyle1} "в пределах моих параметров элемента ListBox и изменил свойство' Foreground' 'ListBoxItemStyle1' соответственно, и все отлично работает! Я все равно хотел бы узнать, как вы получаете ItemContainerStyle из шагов, перечисленных выше? – Matthew

+1

Посмотрите на это [фото] (http://sdrv.ms/18NBHe9). –

2

Я рассматриваю, что ItemsSource из вашего ListBox привязан к ObservableCollection в качестве нелогич- класса test.cs ниже

ObservableCollection<test> coll = new ObservableCollection<test>(); 

и DataContext является ListBox.DataContext = coll;

Свяжите Foreground свойства вашего TextBlock в ListBoxItemTemplate

<TextBlock Text="{Binding Name}" Foreground="{Binding foreground}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" /> 

Теперь определит вашего SelectionChanged события

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e) 
{ 
    test tItem = (sender as ListBox).SelectedItem as test; 
    test.foreground = "#FFCB202D"; //this will change the color of the TextBlock 
} 

Убедитесь, что вы расширить класс test.cs с INotifyPropertyChanged и определить свойство foreground с теми же или еще динамические изменения не будут отражены.

private string tmpforeground; 
    public string foreground 
    { 
     get 
     { 
      return tmpforeground; 
     } 

     set 
     { 
      if (tmpforeground== value) 
       return; 
      tmpforeground= value; 
      NotifyPropertyChanged("foreground"); 
     } 
    } 

Также обратите внимание, что если вы хотите, чтобы TextBlock, чтобы изменить цвет на зеленый на один кран, а затем изменить его цвет снова нажав снова, SelectionChanged событие не будет работать, потому что он работает только тогда, когда выбран другой пункт , Так что если вы хотите, изменение цвета на последовательных нажатий используйте Tap событие вместо

<ListBox Name="ListBox" SelectionMode="Single" ItemsSource="{Binding}" Margin="{Binding}" 
       toolkit:TiltEffect.IsTiltEnabled="True" Tap="ListBox_Tap" > 

private void ListBox_Tap(object sender, System.Windows.Input.GestureEventArgs e) 
{ 
    test tItem = (sender as ListBox).SelectedItem as test; 
    test.foreground = "#FFCB202D"; 
} 
Смежные вопросы