title: How to programatically select an item in a data bound ListBox control
body: <p>I have a custom styled ListBox:</p>
  
  <pre><code>&lt;phone:PhoneApplicationPage.Resources&gt;
      &lt;Style x:Key="LayoutsListItemStyle" TargetType="ListBoxItem"&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="ListBoxItem"&gt;
                      &lt;Grid Height="170" Width="170" Margin="0,0,20,20"&gt;
                          &lt;VisualStateManager.VisualStateGroups&gt;
                              &lt;VisualStateGroup x:Name="LayoutStates"&gt;
                                  &lt;VisualState x:Name="BeforeUnloaded"/&gt;
                                  &lt;VisualState x:Name="BeforeLoaded"/&gt;
                                  &lt;VisualState x:Name="AfterLoaded"/&gt;
                              &lt;/VisualStateGroup&gt;
                              &lt;VisualStateGroup x:Name="SelectionStates"&gt;
                                  &lt;VisualState x:Name="Unselected"/&gt;
                                  &lt;VisualState x:Name="Selected"&gt;
                                      &lt;Storyboard&gt;
                                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border"&gt;
                                              &lt;DiscreteObjectKeyFrame KeyTime="0"&gt;
                                                  &lt;DiscreteObjectKeyFrame.Value&gt;
                                                      &lt;Thickness&gt;4&lt;/Thickness&gt;
                                                  &lt;/DiscreteObjectKeyFrame.Value&gt;
                                              &lt;/DiscreteObjectKeyFrame&gt;
                                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/VisualState&gt;
                                  &lt;VisualState x:Name="SelectedUnfocused"/&gt;
                              &lt;/VisualStateGroup&gt;
                          &lt;/VisualStateManager.VisualStateGroups&gt;
                          &lt;Border x:Name="border" Width="170" Height="170" BorderBrush="{StaticResource PhoneAccentBrush}"&gt;
                              &lt;Grid&gt;
                                  &lt;Image Source="{Binding ThumbnailPath}" Width="170" Height="170" HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
                              &lt;/Grid&gt;
                          &lt;/Border&gt;
  
                      &lt;/Grid&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  &lt;/phone:PhoneApplicationPage.Resources&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;ListBox x:Name="LayoutsList" ItemContainerStyle="{StaticResource LayoutsListItemStyle}" ItemsSource="{Binding}"&gt;
      &lt;ListBox.ItemsPanel&gt;
          &lt;ItemsPanelTemplate&gt;
              &lt;toolkit:WrapPanel Orientation="Horizontal" MaxWidth="410" /&gt;
           &lt;/ItemsPanelTemplate&gt;
       &lt;/ListBox.ItemsPanel&gt;
   &lt;/ListBox&gt;
  </code></pre>
  
  <p>which displays a border over the selected listbox item (when selected manually). I would like the items in the listbox to act like radio buttons and the first item in the listbox to be selected by default.</p>
  
  <p>I'm trying to set the SelectedIndex of the listbox like this:</p>
  
  <pre><code>private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
  {
      // Loads a list of available Layouts to a ListBox
  
      XDocument layoutSummary = XDocument.Load("Content/LayoutSummary.xml");
  
      var layouts =
          from elem in layoutSummary.Descendants("ComicLayout")
          select new ComicLayout
          {
              Name = (string)elem.Attribute("Name").Value,
              FriendlyName = (string)elem.Attribute("FriendlyName").Value,
              ThumbnailPath = "Content/LayoutIcons/" + (string)elem.Attribute("Name").Value + ".png"
          };
  
      LayoutsList.DataContext = layouts;
  
      LayoutsList.SelectedIndex = 1;
  }
  </code></pre>
  
  <p>but it doesn't seem to be doing anything.</p>
  
  <p>How can I programatically select the first (or any other) item in a data bound ListBox?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>It turns out that SelectedIndex actually works and I can control it and pull the data out of the ListBox as I wish. </p>
  
  <p>So I guess the question would be:</p>
  
  <p>How to I trigger VisualState change on the listbox item programatically?</p>