如何将ListBox选定的项目背景更改为图像?

时间:2013-08-13 21:15:54

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

我有这个列表框:

 <ListBox Name="lstEmployee" 
                 FontSize="32" 
                 SelectionChanged="lstEmployee_SelectionChanged" 
                 Margin="10,60,10,78" 
                 Grid.RowSpan="2"
                 Foreground="#FF3F575D">

它正以这种方式填充:

 foreach (var contactdata in RootObject_1.results)
                {

                    StackPanel stk = new StackPanel();
                    stk.Name = "stack" + ctr.ToString();
                    stk.Orientation = System.Windows.Controls.Orientation.Vertical;
                    stk.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;

                    TextBlock txtBlk = new TextBlock();
                    txtBlk.Name = "txtBlk" + ctr.ToString();
                    txtBlk.Text = contactdata.name;
                    txtBlk.FontSize = 30;
                    txtBlk.FontWeight = System.Windows.FontWeights.Bold;
                    txtBlk.VerticalAlignment = System.Windows.VerticalAlignment.Center;
                    txtBlk.TextWrapping = TextWrapping.Wrap;

                    TextBlock txtBlk1 = new TextBlock();
                    txtBlk1.Name = "txtBlk" + ctr.ToString();
                    txtBlk1.Text = contactdata.formatted_address;
                    txtBlk1.FontSize = 22;
                    txtBlk1.VerticalAlignment = System.Windows.VerticalAlignment.Center;
                    txtBlk1.TextWrapping = TextWrapping.Wrap;

                    stk.Children.Add(txtBlk);  // index 0  
                    stk.Children.Add(txtBlk1);  // index 1  
                    lstEmployee.Items.Add(stk);

                    referenceList.Add(contactdata.reference.ToString());

                }

如何使用图像更改所选项目背景?     ( “\图片\出租车\ 800 \ cellselect_80​​0”)

更新

制作JSON请求我正在使用它:

void chamaTaxi()
    {

        WebClient webClient = new WebClient();
        webClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(webClient_DownloadStringCompleted);
        webClient.DownloadStringAsync(new Uri("https://maps.googleapis.com/maps/api/place/textsearch/json?&query=taxi&location=-19.94549444,-43.92314218&&radius=5000&sensor=true&key=AIzaSyDucC8QBV5wu4V-dQXFfABXGaaUzdmT5xw"));

    }
void webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
    {
            Deployment.Current.Dispatcher.BeginInvoke(()=>
         {

                var RootObject_1 = JsonConvert.DeserializeObject<RootObject_1>(e.Result);

               **code above**
    }
}

对于JSON类,我使用以下链接:JSON URL和此生成器:generator

2 个答案:

答案 0 :(得分:1)

这是使用DataTemplate

执行此操作的快速MVVM示例

创建ObservableCollection来保存您的数据模型并使用您的数据填充列表,DataTemplate将在屏幕上显示数据。

DataTemplate中,Image仅在选择项目时才会Visible

的Xaml:

<Window x:Class="WpfApplication8.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Name="UI">

    <Grid DataContext="{Binding ElementName=UI}" >
        <ListBox  ItemsSource="{Binding ContractDataList}" SelectedItem="{Binding SelectedItem}">
            <ListBox.Resources>
                <BooleanToVisibilityConverter x:Key="BoolToVisibleConverter" />
            </ListBox.Resources>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Image Source="Image\Taxi\800\cellselect_800.png" Stretch="Fill" Visibility="{Binding IsSelected, Converter={StaticResource BoolToVisibleConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}"/>
                        <StackPanel>
                            <TextBlock Text="{Binding Name}"/>
                            <TextBlock Text="{Binding Address}"/>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

代码:

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;

namespace WpfApplication8
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private ContractModel _selectedItem;
        private ObservableCollection<ContractModel> _contractDataList = new ObservableCollection<ContractModel>();

        public MainWindow()
        {
            InitializeComponent();

            //foreach (var contactdata in RootObject_1.results)
            for (int i = 0; i < 30; i++)
            {
                var model = new ContractModel
                {
                    Name = "name" + i,
                    Address = "address" + i,
                    Reference = i.ToString()
                };
                ContractDataList.Add(model);
            }
        }

        public ObservableCollection<ContractModel> ContractDataList
        {
            get { return _contractDataList; }
            set { _contractDataList = value; }
        }

        public ContractModel SelectedItem
        {
            get { return _selectedItem; }
            set { _selectedItem = value; NotifyPropertyChanged("SelectedItem"); }
        }


        public event PropertyChangedEventHandler PropertyChanged;
        public void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this,
                    new PropertyChangedEventArgs(propertyName));
            }
        }
    }


    public class ContractModel : INotifyPropertyChanged
    {
        private string _name;
        private string _address;
        private string _reference;

        public string Name
        {
            get { return _name; }
            set { _name = value; NotifyPropertyChanged("Name"); }
        }

        public string Address
        {
            get { return _address; }
            set { _address = value; NotifyPropertyChanged("Address"); }
        }

        public string Reference
        {
            get { return _reference; }
            set { _reference = value; NotifyPropertyChanged("Reference"); }


        }
        public event PropertyChangedEventHandler PropertyChanged;
        public void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this,
                    new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

结果: enter image description here

答案 1 :(得分:0)

我认为您必须修改ListBoxItem的控件模板。三个步骤:

1)找到ListBoxItem - should be found in this directory的默认控件模板:

%ProgramFiles(x86)%\Windows Kits\8.0\Include\winrt\xaml\design

2)将图像插入控件模板(想要显示的位置),最初使用opacity = 0隐藏它:

<Image x:Name="image" Source="Images/Taxi\800\cellselect_800" Opacity="0" />

3)在VisualState x:Name="Selected"下的故事板中添加一个条目。这将在选择项目时显示图像:

<DoubleAnimation Storyboard.TargetName="image" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>