CODEWITHSUNDEEP
c#windows-phone-7listboxwindows-phone-8
Matthew
Matthew

Reputation: 4056

Display Border around Selected Item in ListBox

I am a ListBox with images from IsolatedStorage, in which the user may select an image to use. I would like to somehow show the user which image they have currently selected, or pressed, within the Listbox via a border around the image (or another way if better). I am not sure exactly how to get the currently selected image and place a border around that image. I am currently using the SelectionChanged event of the ListBox to attempt this functionality. What I have so far is as follows:

MainPage.xaml

 <ListBox x:Name="Recent" ItemsSource="{Binding Pictures}" Margin="8" 
                     SelectionChanged="recent_SelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Image x:Name="recentImage" Source="{Binding Source}" Margin="12" Width="115"/>
                    </DataTemplate>
                </ListBox.ItemTemplate>
</ListBox>

MainPage.xaml.cs

 private void recent_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        //Place border round currently selected image
        //?

    }

Any thoughts?

Upvotes: 0

Views: 1325

Answers (2)

Matthew
Matthew

Reputation: 4056

Update to Fix

MainPage.xaml

//within the ListBox DataTemplate
 <Border>
     <Image x:Name="recentImage" Source="{Binding Source}" Margin="12" Width="115"/>
 </Border>

MainPage.xaml.cs

//within recent_SelectionChanged
var lb = sender as ListBox;
var lbi = lb.ItemContainerGenerator.ContainerFromItem(lb.SelectedItem) as ListBoxItem;

lbi.BorderThickness = new Thickness(2, 2, 2, 2);
lbi.BorderBrush = new SolidColorBrush((Color)Application.Current.Resources["PhoneAccentColor"]);

Upvotes: 1

pumpkinszwan
pumpkinszwan

Reputation: 1352

I'd create another image on top of the image in your data template. This image would be mostly transparent with just the border and maybe a little tick (like Windows 8 apps have). Then I would toggle the visibility of this image when the item is selected.

Because the image would be mostly transparent it would show as a border around the selected image.

I use this technique to 'grey out' items (by using a solid black image with ~10% opacity) and it works really well.

You should be able to simply bind the visibility to the selected property - though you'd need a converter to convert between boolean and visibility.

  <DataTemplate>
       <Image x:Name="recentImage" Source="{Binding Source}" Margin="12" Width="115"/>
       <Image x:Name="borderImage" Source="Images/borderimg.png" Margin="12" Width="115" Visibility="Collapsed"/>
  </DataTemplate>

Then:

 private void recent_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        //set the visibility property of the selected item to 'Visible'

    }

Upvotes: 0

Related Questions