Silverlight Listbox Élément De Style
Comment peut-on aller sur le style d'une listbox tels que la sélection est différente de la couleur du texte de l'affichage par défaut? J'ai regardé cela de plusieurs façons, et parce que le ContentPresenter manque un premier plan de la propriété.
Le modèle de contrôle par défaut de la zone de liste fournit plusieurs rectangles que l'on peut utiliser pour ajuster la couleur de surbrillance. Par exemple, avec le style par défaut d'un rectangle appelé BGColor3 a son opacité ajustées de manière à obtenir un effet de survol.
Voici l'essentiel de mon modèle de contrôle:
<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>Dans la sélection de l'État Visuel, voici l'essentiel:
<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>Ce qui est évident, c'est que BGColor2 le rectangle est en cours de modification (opacité) de sorte que l'élément sélectionné d'un arrière-plan. Juste assez. Dans cette partie de la table de montage séquentiel, est-il de toute façon d'avoir accès à la ContentPresenter, ou quelque chose de similaire et en cliquant sur le texte en couleur de premier plan?
Note de bas de page: ne serait-il pas plus propre pour tout simplement avoir différents modèles de rapport visuel des transitions d'état?
---- ajoutée après la première réponse donnée ----
À l'aide d'un TextBlock presque le truc, mais ce qui est intéressant, c'est que la transition pour SelectedUnfocused ne semble pas être forcée qui est-à-dire que la mise en œuvre de votre solution fonctionne parfaitement jusqu'à ce qu'une personne fait glisser la souris sur un élément précédemment sélectionné le texte une fois de plus va vers le noir.
Voici mon template:
<!-- 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>Et ma consommation du modèle:
<ListBox ItemContainerStyle="{StaticResource ItemStyle}" x:Name="testListBox" />Et enfin un peu de code pour remplir la zone de liste:
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;
InformationsquelleAutor t3rse | 2009-09-02
Vous devez vous connecter pour publier un commentaire.
Changer le ContentPresenter en vous un modèle à un ContentControl qui a une propriété Foreground vous pouvez TemplateBind.
J'ai essayé votre scénario. Par défaut, le contenu de la valeur par défaut listitem est une chaîne qui est noir. Une zone de liste de l'élément a de premier plan de la propriété, vous pouvez définir mais je ne suis pas sûr que ce soit là où il est dans le modèle. Ils ont fait quelque chose de spécial pour les chaînes d'utiliser le premier plan, mais n'a pas l'exposer dans le modèle. Un hack, vous pourriez vouloir essayer est, si vous savez que vous aurez toujours de la chaîne de contenu, afin de remplacer le contentpresenter de la controltemplate avec un textblock, qui a de la présente. (Pour modifier les ListItem du modèle cliquez droit sur elle dans Blend3 et aller pour Modifier le Modèle, Modifier une Copie, et de modifier le nouveau Style}
à
J'ai ajouté de l'objet templatebinding pour le Texte et l'avant-plan. Vous devriez être capable de manipuler le de premier plan dans les états visuels pour obtenir le droit des états look handicapés, sélection, etc. J'espère que cette aide.