Capturing ListBoxItem and gotostate applications via a WPF-bound listbox

Now the company project needs to make a fan menu, menu items are implemented with the ListBox rewrite style, the data is bound. Each item of the menu has Normal,mouseover and selected three states, these three states of course can move through the mouse and click Control, but now to change the control appearance through the code to achieve three state switch, how to deal with it?

1.WPF-bound ListBox fetch ListBoxItem

In WPF, if the itemsource of the listbox is bound, then ListBox.Items is the data source for the binding, not the ListBoxItem. You will find that ListBoxItem cannot be obtained directly by using the following code:

var ListBoxItem = listbox1.items[0] as List1boxitem;

When the hint ListBoxItem is null, how do you get to ListBoxItem? The Itemcontainergenerator.containerfromindex (int index) method is used, which returns corresponding to the System.Windows.Controls.ItemCollection The element that specifies the index entry in the

var ListBoxItem = ListBox1.ItemContainerGenerator.ContainerFromIndex (0) as FrameworkElement;

This time we got the first listboxitem in the ListBox1.

Manual control of control appearance changes in 2.WPF

How do you trigger the ListBoxItem mouseover state without moving the mouse? The VisualStateManager.GoToState (FrameworkElement control, String statename, bool usetransitions) method is used. This method allows the control to be arbitrarily converted between two states:

First, customize a style for the ListBoxItem in your project, which contains two states of normal and mouseover:

<style x:key= "ListBoxItemStyle1" targettype= "{x:type ListBoxItem}" > <setter property= "Template" >
                        <Setter.Value> <controltemplate targettype= "{x:type ListBoxItem}" >
                                <Grid> <VisualStateManager.VisualStateGroups> <visualstategroup x:name= "CommonStates" > <visualstate x:name= "No"
                                            Rmal "> <Storyboard> <coloranimationusingkeyframes storyboard.targetproperty= "(Shape.fill). (solidcolorbrush.color) "storyboard.targetname=" Rectangle "> &LT;EASINGC Olorkeyframe keytime= "0" value= "#FF5CFD30"/> </coloranimationusingkeyfr
                                 Ames>       </Storyboard> </visualstate&gt
                                    ;
                                            <visualstate x:name= "MouseOver" > <Storyboard> <coloranimationusingkeyframes storyboard.targetproperty= "(Shape.fill). (solidcolorbrush.color) "storyboard.targetname=" Rectangle "> &LT;EASINGC Olorkeyframe keytime= "0" value= "#FF29B5B8"/> </coloranimationusingkeyfr Ames> </Storyboard> </visualstate&
                                    Gt
                            <visualstate x:name= "Disabled"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <rectangle X:name= "Rectangle" fill= "#FF5AFB2E" stroke= "Black"/> <textblock horizontalalignment= "Center" textwrapping= "Wrap" text= "{templatebinding Content}" verticalalignment= "Center"/> &LT;/GRID&G
                    T </ControlTemplate> </Setter.Value> </Setter> </Style>

Apply a style to ListBox1, bind the data source, and drag out two button to set the state of the ListBoxItem, respectively:

<Grid>
        <listbox x:name= "ListBox1" horizontalalignment= "left" height= "margin=" Verticalalignment= "Top" width= "itemssource=" {Binding menulist} "itemcontainerstyle=" {DynamicResource ListBoxItemStyle1} "d:layoutoverrides=" HorizontalAlignment, verticalalignment/> <button
        Btnmouseover "content=" MouseOver "horizontalalignment=" "left" margin= "75,0,0,65.163" verticalalignment= "Bottom" Width= "click=" "Btnmouseover_click"/> <button x:name= "Btnnormal" "
        Normal" content= " 213,0,221,65.163 "verticalalignment=" Bottom "click=" Btnnormal_click "/>
    </Grid>

More Wonderful content: http://www.bianceng.cnhttp://www.bianceng.cn/Programming/net/