Skip to main content
Microsoft Silverlight
Home Forums Silverlight Programming Silverlight Controls and Silverlight Toolkit How to show selected item in Listbox (SL 2.0)?
10 replies. Latest Post by Whitewing_s on September 11, 2008.
(0)
NileshNa...
Member
20 points
21 Posts
08-27-2008 10:15 AM |
Hi All,
Please can anyone tell me how to show selected item in listbox?
How can I change color of selected item in listbox?
TIA
--
Nilesh
Silverli...
Participant
1133 points
193 Posts
08-27-2008 10:19 AM |
Hi,
you can do that by changing the template of the ListBoxItem and make the changes you need.
Using templates you can completely change the presentation - colors, fonts, etc. Also, changing the VisualStateManager storyboards you can apply different effects over the item and thus to make it looks cool.
See an example of templating here: http://www.silverlightshow.net/items/Animating-ListBox-items-the-VisualStateManager.aspx
Some links for styling controls with Expression Blend:
http://timheuer.com/blog/archive/2008/06/04/skinning-silverlight-controls-made-easier.aspx
http://electricbeach.org/?p=98
08-27-2008 10:23 AM |
Thanks for reply.
But i have changed the background color of listbox.
The code is like this,
<
I am not able to see which item is selected. I think by default atleast you can able to see that.
Can you give me some other sources?
08-27-2008 10:50 AM |
The template you have is not correct. In the example bellow, I have a style for the ListBox Item and I specify this style to the ListBox: ItemContainerStyle="{StaticResource listBoxItemStyle}"
This style contains the template used for each ListBoxItem and it is taken from the generic file containing the default style.
Now, having the standard template, the only think you need is to change the background colors for the selected items. This can be done by changing lines 38, 39 and 40: To="#FFA0A0A0"
these 3 changes are needed because the selected item uses gradient stop and therefore you have 3 colors. If you do not need this, you can simply use ColorBrush with one color.
And here what I have:
1: <Grid x:Name="listboxBaseCurrencyGrid" Grid.Row="1" Grid.Column="1">
2: <Grid.Resources>
3: <Style TargetType="ListBoxItem" x:Key="listBoxItemStyle">
4: <Setter Property="IsEnabled" Value="true" />
5: <Setter Property="Foreground" Value="#FF000000" />
6: <Setter Property="HorizontalContentAlignment" Value="Left" />
7: <Setter Property="VerticalContentAlignment" Value="Top" />
8: <Setter Property="Cursor" Value="Arrow" />
9: <Setter Property="TextAlignment" Value="Left" />
10: <Setter Property="TextWrapping" Value="NoWrap" />
11: <!-- Cannot currently parse FontFamily type in XAML so it's being set in code -->
12: <!-- <Setter Property="FontFamily" Value="Trebuchet MS" /> -->
13: <Setter Property="FontSize" Value="12" />
14: <Setter Property="Background" Value="White" />
15: <Setter Property="Padding" Value="2,0,0,0" />
16: <Setter Property="Template">
17: <Setter.Value>
18: <ControlTemplate TargetType="ListBoxItem">
19: <Grid Background="{TemplateBinding Background}">
20: <vsm:VisualStateManager.VisualStateGroups>
21: <vsm:VisualStateGroup x:Name="CommonStates">
22: <vsm:VisualState x:Name="Normal" />
23: <vsm:VisualState x:Name="MouseOver">
24: <Storyboard>
25: <DoubleAnimation Storyboard.TargetName="HoverOverlay" Storyboard.TargetProperty="Opacity" To=".75" Duration="0" />
26: <ColorAnimation Storyboard.TargetName="fillStop0Hover" Storyboard.TargetProperty="Color" To="#FFF9FAFA" Duration="0" />
27: <ColorAnimation Storyboard.TargetName="fillStop1Hover" Storyboard.TargetProperty="Color" To="#FFD6DFE7" Duration="0" />
28: <ColorAnimation Storyboard.TargetName="fillStop2Hover" Storyboard.TargetProperty="Color" To="#FFD3E4F5" Duration="0" />
29: <ColorAnimation Storyboard.TargetName="strokeStop0Hover" Storyboard.TargetProperty="Color" To="#00000000" Duration="0" />
30: <ColorAnimation Storyboard.TargetName="strokeStop1Hover" Storyboard.TargetProperty="Color" To="#00000000" Duration="0" />
31: </Storyboard>
32: </vsm:VisualState>
33: </vsm:VisualStateGroup>
34: <vsm:VisualStateGroup x:Name="SelectionStates">
35: <vsm:VisualState x:Name="Unselected" />
36: <vsm:VisualState x:Name="Selected">
37: <Storyboard>
38: <ColorAnimation Storyboard.TargetName="fillStop0" Storyboard.TargetProperty="Color" To="#FFA0A0A0" Duration="0" />
39: <ColorAnimation Storyboard.TargetName="fillStop1" Storyboard.TargetProperty="Color" To="#FFA0A0A0" Duration="0" />
40: <ColorAnimation Storyboard.TargetName="fillStop2" Storyboard.TargetProperty="Color" To="#FFA0A0A0" Duration="0" />
41: <ColorAnimation Storyboard.TargetName="strokeStop0" Storyboard.TargetProperty="Color" To="#FF77B9EB" Duration="0" />
42: <ColorAnimation Storyboard.TargetName="strokeStop1" Storyboard.TargetProperty="Color" To="#FF4887CD" Duration="0" />
43: </Storyboard>
44: </vsm:VisualState>
45: </vsm:VisualStateGroup>
46: <vsm:VisualStateGroup x:Name="FocusStates">
47: <vsm:VisualState x:Name="Focused">
48: <Storyboard>
49: <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">
50: <DiscreteObjectKeyFrame KeyTime="0">
51: <DiscreteObjectKeyFrame.Value>
52: <Visibility>Visible</Visibility>
53: </DiscreteObjectKeyFrame.Value>
54: </DiscreteObjectKeyFrame>
55: </ObjectAnimationUsingKeyFrames>
56: </Storyboard>
57: </vsm:VisualState>
58: <vsm:VisualState x:Name="Unfocused">
59: <Storyboard>
60: <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">
61: <DiscreteObjectKeyFrame KeyTime="0">
62: <DiscreteObjectKeyFrame.Value>
63: <Visibility>Collapsed</Visibility>
64: </DiscreteObjectKeyFrame.Value>
65: </DiscreteObjectKeyFrame>
66: </ObjectAnimationUsingKeyFrames>
67: </Storyboard>
68: </vsm:VisualState>
69: </vsm:VisualStateGroup>
70: </vsm:VisualStateManager.VisualStateGroups>
71:
72: <Grid.RowDefinitions>
73: <RowDefinition Height="*"/>
74: <RowDefinition Height="Auto"/>
75: </Grid.RowDefinitions>
76:
77: <Rectangle IsHitTestVisible="False">
78: <Rectangle.Fill>
79: <LinearGradientBrush StartPoint="0.316111,0.0165521" EndPoint="0.316111,0.724833">
80: <GradientStop x:Name="fillStop0" Color="#00000000" Offset="0"/>
81: <GradientStop x:Name="fillStop1" Color="#00000000" Offset="0.682203"/>
82: <GradientStop x:Name="fillStop2" Color="#00000000" Offset="1"/>
83: </LinearGradientBrush>
84: </Rectangle.Fill>
85: <Rectangle.Stroke>
86: <LinearGradientBrush StartPoint="0.318122,0.0360108" EndPoint="0.318122,0.715784">
87: <GradientStop x:Name="strokeStop0" Color="#00000000" Offset="0"/>
88: <GradientStop x:Name="strokeStop1" Color="#00000000" Offset="1"/>
89: </LinearGradientBrush>
90: </Rectangle.Stroke>
91: </Rectangle>
92: <Rectangle x:Name="HoverOverlay" IsHitTestVisible="False" Opacity="0">
93: <Rectangle.Fill>
94: <LinearGradientBrush StartPoint="0.316111,0.0165521" EndPoint="0.316111,0.724833">
95: <GradientStop x:Name="fillStop0Hover" Color="#00000000" Offset="0"/>
96: <GradientStop x:Name="fillStop1Hover" Color="#00000000" Offset="0.682203"/>
97: <GradientStop x:Name="fillStop2Hover" Color="#00000000" Offset="1"/>
98: </LinearGradientBrush>
99: </Rectangle.Fill>
100: <Rectangle.Stroke>
101: <LinearGradientBrush StartPoint="0.318122,0.0360108" EndPoint="0.318122,0.715784">
102: <GradientStop x:Name="strokeStop0Hover" Color="#00000000" Offset="0"/>
103: <GradientStop x:Name="strokeStop1Hover" Color="#00000000" Offset="1"/>
104: </LinearGradientBrush>
105: </Rectangle.Stroke>
106: </Rectangle>
107:
108: <Rectangle x:Name="FocusVisual" Stroke="Black" StrokeDashArray="1,2" Visibility="Collapsed" IsHitTestVisible="False"/>
109:
110: <TextBlock Text="{Binding Name}" Foreground="Blue" FontSize="14" Margin="2" />
111:
112: <Line Stretch="Fill" Grid.Row="1" X1="0" X2="1" Y1="0" Y2="0" StrokeThickness="1" Stroke="#FFA4A4A4" IsHitTestVisible="False"/>
113: </Grid>
114: </ControlTemplate>
115: </Setter.Value>
116: </Setter>
117: </Style>
118: </Grid.Resources>
119:
120: <ListBox x:Name="firstDropDown" ScrollViewer.HorizontalScrollBarVisibility="Hidden"
121: Opacity="0.5" FontFamily="Verdana" FontSize="22" Margin="0,0,0,0" Foreground="#FF000000" Background="#FFD7CECE"
122: ItemContainerStyle="{StaticResource listBoxItemStyle}" >
123:
124: </ListBox>
125: </Grid>
cyberwin
80 points
54 Posts
08-27-2008 12:59 PM |
Try something like this in your code-behind...
protected void firstDropDown_SelectionChanged(object sender, MouseButtonEventArgs e){ ListBox _listbox = (ListBox)sender; ListBoxItem _item = (ListBoxItem)_listbox.SelectedItem; //Now you have an object that represents the ListBoxItem. //You can manipulate it however you need to...}
08-28-2008 12:27 AM |
I tried like that, but I got following error,
Unable to to cast object of type MyApplication.Index to System.Windows.Controls.ListBoxItem.
The ItemSource for my listbox(firstdropdown) is List of Index classes.
firstDropDown.ItemsSource = indexList;
08-28-2008 3:38 AM |
Hi, the code proposed will not work, because the SelectedItem will return the item from the collection, not the ListBoxItem.
Did you try the template I gave you? This definitely work and you do not need to make any other things in the code behind. Also it is completely customizable. Just search for Styling and Templating in Silverlight in internet to get the idea.
08-28-2008 10:18 AM |
Although, if you are databinding, you can get the entire object back from the list by casting the listboxitem as your object...
For example, if you are databinding to a collection of "CONTENT" items, you can cast the listboxitem as CONTENT and you would then have access to each field... I just figured it would work the same way by simply accessing the ListBoxItem itself...
Another idea is that you can cast the listboxitem as one of the elements in your tempate by using FindName and manipulate the properties of that... I have used that technique a few times...
08-28-2008 10:27 AM |
Hi
ListBox _listbox = (ListBox)sender;ListBoxItem _item = (ListBoxItem)_listbox.SelectedItem;
in the code above, you will see an InvalidCastException in the second row - at least I have such. This is because the listbox.SelectedItem returns an object of the type the ListBox.ItemSource collection items type. So If your collection contains objects of type CONTENT, SelectedItem will return object of type CONTENT and the cast will fail.
08-28-2008 11:06 AM |
Right... That is correct.
I just figured that since I can use that method inversly to capture information about each content item, I should be able to use the same method to capture information about and manipulate the properties of the actual listboxitem... But it doesn't work that way.
It is another in a very long line of weaknesses I have come across while trying to develop with Silverlight...
Whitewing_s
218 points
122 Posts
09-11-2008 12:31 AM |
Can anyone plz help me how to do the casting..
How to show selected item in Listbox (SL 2.0)?