在列表框中显示选定项目周围的边框

本文关键字：项目 周围 边框 列表 显示 | 更新日期: 2023-09-27 18:17:23

我是一个ListBox，其中包含来自IsolatedStorage的图像，用户可以在其中选择要使用的图像。我想以某种方式向用户展示他们目前选择的图像，或按下，在Listbox内通过图像周围的边界(或另一种方式，如果更好)。我不确定如何获得当前选定的图像，并在该图像周围放置一个边界。我目前正在使用ListBox的SelectionChanged事件来尝试此功能。到目前为止，我得到的内容如下:

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

任何想法吗?

在列表框中显示选定项目周围的边框

更新修复

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

我会在数据模板中的图像顶部创建另一个图像。这张图片大部分是透明的，只有边框和一点勾号(就像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'
    }
相关文章：