WPF:通过触摸列表框更改颜色

时间:2013-08-26 14:43:56

标签: xaml windows-phone

我想在触摸时更改列表项的背景颜色。我可以在XAML中执行此操作吗?

        <ListBox x:Name="lstFlags">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                         ...
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>

            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                </Style>
            </ListBox.ItemContainerStyle>
        </ListBox>

1 个答案:

答案 0 :(得分:0)

您可以向MouseDown添加MouseUpGrid个事件,但这不会告诉您选择了哪个项目。您需要的是捕获选择更改事件并更改所选项目的颜色。

此外,不仅仅是在选择时更改颜色,最好在数据项中放置一个标志,告诉您是否已触摸它们,然后根据该标志的值更新XAML中的颜色。

假设我们有这个视图模型:

public partial class MainWindow : Window
{
    public class Item : INotifyPropertyChanged
    {
        public string ItemText { get; set; }

        private bool _wasTouched;
        public bool WasTouched
        {
            get { return _wasTouched; }
            set { _wasTouched = value; OnPropertyChanged( "WasTouched" ); }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged( string name )
        {
            var handler = PropertyChanged;
            if( handler != null ) handler( this, new PropertyChangedEventArgs( name ) );
        }
    }

    public ObservableCollection<Item> Items { get; set; }

    public MainWindow()
    {
        InitializeComponent();

        Items = new ObservableCollection<Item>();
        Items.Add( new Item() { ItemText = "ugh." } );
        Items.Add( new Item() { ItemText = "whee" } );
        Items.Add( new Item() { ItemText = "nee" } );
        Items.Add( new Item() { ItemText = "ping" } );
        Items.Add( new Item() { ItemText = "neeeuuwwwop" } );

        this.DataContext = this;
    }

    private void ListBox_SelectionChanged( object sender, System.Windows.Controls.SelectionChangedEventArgs e )
    {
        ((sender as ListBox).SelectedItem as Item).WasTouched = true;
    }
}

有一个Item类,它有一些文本和一个布尔变量,表明它是否被触摸过。该类实现INotifyPropertyChanged,以便当您更改WasTouched的值时,它可以通知XAML。我们创建了一些项目并将它们添加到我们的XAML可见的集合中。我们还有一个ListBox_SelectionChanged事件,它会获取所选项目并将其标记为已被触摸。

<ListBox ItemsSource="{Binding Items}" SelectionChanged="ListBox_SelectionChanged" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock Text="{Binding ItemText}"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>

    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Style.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Red" />
            </Style.Resources>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Background" Value="Green"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding WasTouched}" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

在XAML中,我们告诉ListBox有关项目和选择更改的处理程序。我们告诉它使用项目的文本TextBox显示每个项目。然后我们修改您已经提供的样式...我们通常会将项目的背景设置为绿色,但我们会在DataTrigger上添加WasTouched,将背景更改为红色。

还有一个问题:列表会使用蓝色背景绘制所选项目,该背景会覆盖您的背景颜色。这就是Style.Resources部分的用途 - 它告诉XAML绘制红色背景的选定项目。