How to change listbox item's color individually programmatically in silverlight?
I have an chat like tcp application.I want to differ the colors of sent and received messages. How can I do 开发者_StackOverflow社区that programmatically? Any help is appreciated
Edit It would be ok if I can change the row color instead.
ok do this..
Create a class
public class MSGS
{
public string color {get;set;}
public string message {get;set;}
}
now instead of adding items in List<String>
create List<MSGS>
and set message equal to message and if message is sent then set color to let's say Blue
or if message is received set color to Red
.
MSGS one = new MSGS ();
one.message = "testing";
one.color = "Red";
MSGS two = new MSGS();
two.message = "testing2";
two.color = "Blue";
MSGS three = new MSGS();
three.message = "testing3";
three.color = "Red";
List<MSGS> list = new List<MSGS> ();
list.Add(one);
list.Add(two);
list.Add(three);
myLB.ItemsSource = list;
define a style for listboxitem like this in XAML
<UserControl.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock Foreground="{Binding Path=color}" Text="{Binding Path=message}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
this code will show the received messages and sent messages in different colors
More Detailed Approach try style below instead of of style above
<UserControl.Resources>
<DataTemplate x:Key="DataTemplate1">
<StackPanel>
<TextBlock Text="{Binding message}"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="DataTemplate2">
<StackPanel>
<TextBlock Text="{Binding message}" FontWeight="Bold"/>
</StackPanel>
</DataTemplate>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{Binding Path=type}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter1"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="contentPresenter1">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="contentPresenter2">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<ContentPresenter x:Name="contentPresenter1" ContentTemplate="{StaticResource DataTemplate1}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
<ContentPresenter x:Name="contentPresenter2" ContentTemplate="{StaticResource DataTemplate2}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="3,3,0,3" Visibility="Collapsed"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
<ListBox HorizontalAlignment="Left" Height="4" Margin="-90,0,0,-163" VerticalAlignment="Bottom" Width="31"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
Have taken this from http://forums.silverlight.net/forums/p/35969/113333.aspx
If you want to know more about styling check these links
http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-4-using-style-elements-to-better-encapsulate-look-and-feel.aspx
http://www.silverlightshow.net/items/Skinning-and-Styling-Silverlight-Controls.aspx
You can change the text foreground of the item.
item.foreground = new SolidColorBrush(Colors.Green);
I made an example with binding that makes use of a Style Converter.
You can read the whole implementation and sample here: http://vanderbiest.org/blog/2011/07/12/listbox-individual-item-color-in-silverlight/
Listbox Implementation
<listbox itemssource="{Binding Messages}" maxwidth="300" borderbrush="Black" borderthickness="2">
<listbox.itemtemplate>
<datatemplate>
<textblock text="{Binding Name}" style="{Binding IsInError, Converter={StaticResource listboxMessageStyleConverter}}">
</textblock></datatemplate>
</listbox.itemtemplate>
</listbox>
Converter Implementation
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if ((bool)value)
{
return Application.Current.Resources["ListBoxTextNormalItem"];
}
return Application.Current.Resources["ListBoxTextErrorItem"];
}
Style Implementation
<style x:key="ListBoxTextNormalItem" targettype="TextBlock">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color='#0A7B27' />
</Setter.Value>
</Setter>
</style>
<style x:key="ListBoxTextErrorItem" targettype="TextBlock">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color='#FF2A1B' />
</Setter.Value>
</Setter>
<Setter Property="FontWeight" Value="Bold" />
</style>
Have a look at the following link; http://forums.create.msdn.com/forums/p/74900/455850.aspx It has working solution of changing the foreground color of selected item. So when you get the message, you mark it as selected item with the style, you can change the foreground color of the text.
精彩评论