How to identify a specific LoopingListBoxItem

Hi

I'm looking for a way to change the Foreground property (or maybe the Opacity) of the text content of a loopinglistboxitem in code, depending on some user action.

I've tried various approaches:

     Dim leftItem As New LoopingListBoxItem
            leftItem = LoopingListBox1.SelectedItem

or
    leftItem = CType(LoopingListBox1.SelectedItem, LoopingListBoxItem)

and even

     For Each lbi As LoopingListBoxItem In LoopingListBox1.  Items/Children
     Next

but none of these work.

In a previous project where I had a standard templated list box, I created a BoolToVisibility Converter that willhide or show an element based on the bool value of a source object. Although I'm sure I could use the same approach here, I was wondering if there wasn't some way I could identify the selected textblock of the loopinglistboxitem in code and make changes to the appearance there at run time.

Can this be done?

Hello

I have added 2 new properties to the LoopingListBox control which you may find useful. These properties will be in the next nightly build (available from about 1200GMT). Nightly builds can be downloaded from http://www.mindscapehq.com/products/phone-elements/nightly-builds (trial editions) or http://www.mindscapehq.com/store/myaccount (full editions).

One of the new properties is called SelectedLoopingListBoxItem. You can listen to the selection changed event, and in the event handler, get the selected LoopingListBoxItem using this property. From this, you can hack the visual tree to find the TextBlock hosted within it which you can modify at run time as you like.

The other property is called ItemContainerStyle. This provides a XAML solution to your problem which I would recommend you use rather than using the SelectedLoopingListBoxItem solution. With this property you can specify the style used by the LoopingListBoxItems. You can create a custom style which allows you to change the foreground when the item is selected. Here is some example XAML of a LoopingListBoxItem style that changes the foreground of the content to HotPink in the selection state. You could use this to set the ItemContainerStyle property.

  <Style x:Key="LoopingListBoxItemStyle" TargetType="ms:LoopingListBoxItem">
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}" />
    <Setter Property="Padding" Value="6" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ms:LoopingListBoxItem">
          <Border x:Name="Root" CacheMode="BitmapCache" Background="Transparent" Padding="{TemplateBinding Padding}" Opacity="0">
            <Grid>
              <Rectangle x:Name="Background" Margin="2" Opacity="0" Fill="{StaticResource PhoneInactiveBrush}" CacheMode="BitmapCache" />

              <Border BorderThickness="2" BorderBrush="{StaticResource PhoneInactiveBrush}">
                <ContentControl Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" x:Name="ContentPresenter" CacheMode="BitmapCache" />
              </Border>
            </Grid>
            <vsm:VisualStateManager.VisualStateGroups>
              <vsm:VisualStateGroup x:Name="SelectionStates">
                <vsm:VisualState x:Name="Unselected">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                    <DoubleAnimation Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Opacity" To=".6" Duration="0" />
                  </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="Selected">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                      <DiscreteObjectKeyFrame Value="HotPink" KeyTime="0:0:00.000" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </vsm:VisualState>
              </vsm:VisualStateGroup>
              <vsm:VisualStateGroup x:Name="VisibilityStates">
                <vsm:VisualStateGroup.Transitions>
                  <vsm:VisualTransition GeneratedDuration="0:0:0.3" />
                </vsm:VisualStateGroup.Transitions>
                <vsm:VisualState x:Name="Hidden" />
                <vsm:VisualState x:Name="Visible">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                  </Storyboard>
                </vsm:VisualState>
              </vsm:VisualStateGroup>
            </vsm:VisualStateManager.VisualStateGroups>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

See which of these 2 solutions works best for you and let us know if you need more help.

-Jason

That's superb! Thanks, Jason. I'm sure one of them will do the trick for me.