Отображение границы вокруг выбранного элемента в ListBox

Question

Я - ListBox с изображениями из IsolatedStorage, в которых пользователь может выбрать изображение для использования. Я хотел бы каким-то образом показать пользователю, какое изображение они выбрали или нажали в пределах списка, через рамку вокруг изображения (или, если возможно, еще лучше). Я точно не знаю, как получить выбранный образ и разместить рамку вокруг этого изображения. В настоящее время я использую событие SelectionChanged для ListBox, чтобы попробовать эту функцию. То, что я до сих пор выглядит следующим образом:

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 
     //? 

    } 

Любые мысли?

Answer 1

Я бы создал другое изображение поверх изображения в вашем шаблоне данных. Этот образ будет в основном прозрачным только с границей и, возможно, с небольшим тиком (например, с приложениями Windows 8). Затем я бы переключил видимость этого изображения, когда элемент выбран.

Поскольку изображение будет в основном прозрачным, оно будет отображаться как граница вокруг выбранного изображения.

Я использую эту технику для «серого» элемента (используя сплошное черное изображение с непрозрачностью ~ 10%), и он работает очень хорошо.

Вы должны иметь возможность просто привязать видимость к выбранному свойству - хотя вам понадобится конвертер для преобразования между булевым и видимым.

<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> 

Тогда:

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

    } 

Answer 2

Обновление исправить

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"]);