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

时间:2013-06-07 05:06:58

标签: c# windows-phone-7 listbox windows-phone-8

我是一个ListBox,其中包含来自IsolatedStorage的图像,用户可以在其中选择要使用的图像。我想以某种方式向用户显示他们当前在列表框中通过图像边界选择或按下了哪个图像(或者如果更好的话,以其他方式)。我不确定如何获取当前选定的图像并在该图像周围放置边框。我目前正在使用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
        //?

    }

有什么想法吗?

2 个答案:

答案 0 :(得分:1)

更新到修复

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

答案 1 :(得分:0)

我会在数据模板中的图像上创建另一个图像。这个图像大部分是透明的,只有边框,可能有点嘀嗒声(就像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'

    }