如何从作为listBoxItem的堆栈面板访问标签

Question

For a list box in WPF I have this template:

<ControlTemplate x:Key="ListBoxItemControlTemplate1" TargetType="{x:Type ListBoxItem}">
    <StackPanel Orientation="Horizontal" Background="Silver">
        <CheckBox Content="CheckBox" VerticalAlignment="Center"/>
        <Label Content="Label" Padding="5,0" Width="260" VerticalAlignment="Center" Background="#F3D6D6D6" Margin="5,0"/>
        <Button Content="Edit" Width="Auto" Padding="1" Margin="2.5,0" HorizontalAlignment="Right" Click="Button_Click"/>
    </StackPanel>
</ControlTemplate>

And whenever I press the corresponding button for the listBoxItem I want to modify the label of the same listBoxItem, preferably without using a name if possible.
I was thinking maybe there is a way of saying "use the Label from the parent of this button" which I thought would be the StackPanel, but can't find anything useful on the internet.

Answer 1

I think the better solution is to use a view model with a DataTemplate, once you have the code set up you can re-use it over and over with very little chance of error.

Here is what your view model will look like

public class ViewModel : INotifyPropertyChanged
{
    private ObservableCollection<ItemViewModel> _items;

    public ViewModel()
    {
        _items = new ObservableCollection<ItemViewModel>(new List<ItemViewModel>()
            {
                new ItemViewModel() { Label = "Item1", IsChecked = false },
                new ItemViewModel() { Label = "Item2", IsChecked = true },
                new ItemViewModel() { Label = "Item3", IsChecked = true },
                new ItemViewModel() { Label = "Item4", IsChecked = false },
                new ItemViewModel() { Label = "Item5", IsChecked = false },
            });

    }

    public ObservableCollection<ItemViewModel> Items
    {
        get
        {

            return this._items;
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    // Create the OnPropertyChanged method to raise the event
    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
}

public class ItemViewModel  : INotifyPropertyChanged
{
    private bool _isChecked = false;
    private string _label = "Label";

    public ICommand ButtonCommand { get; private set; }

    public ItemViewModel()
    {
        this.ButtonCommand = new DelegateCommand(Com_ButtonCommand);
    }

    public void Com_ButtonCommand(object parameter)
    {
        this.Label = "New Label text";
    }

    public string Label
    {
        get
        {
            return this._label;
        }
        set
        {
            this._label = value;
            this.OnPropertyChanged("Label");
        }
    }

    public bool IsChecked
    {
        get
        {
            return this._isChecked;
        }
        set
        {
            this._isChecked = value;
            this.OnPropertyChanged("IsChecked");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    // Create the OnPropertyChanged method to raise the event
    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
}
public class DelegateCommand : ICommand
{
    private readonly Predicate<object> _canExecute;
    private readonly Action<object> _execute;

    public event EventHandler CanExecuteChanged;

    public DelegateCommand(Action<object> execute)
        : this(execute, null)
    {
    }

    public DelegateCommand(Action<object> execute,
                   Predicate<object> canExecute)
    {
        _execute = execute;
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        if (_canExecute == null)
        {
            return true;
        }

        return _canExecute(parameter);
    }

    public void Execute(object parameter)
    {
        _execute(parameter);
    }

    public void RaiseCanExecuteChanged()
    {
        if (CanExecuteChanged != null)
        {
            CanExecuteChanged(this, EventArgs.Empty);
        }
    }
}

There are 3 classes here, 1 of them a helper.

ViewModel --> Your main ViewModel, ItemViewModel --> Model for each item, DelegateCommand --> Allows you to map the button to the view model

your xaml will look like this

<ListBox ItemsSource="{Binding Items}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Background="Silver">
                        <CheckBox IsChecked="{Binding IsChecked}" Content="CheckBox" VerticalAlignment="Center"/>
                        <Label Content="{Binding Label}" Padding="5,0" Width="260" VerticalAlignment="Center" Background="#F3D6D6D6" Margin="5,0"/>
                        <Button Command="{Binding ButtonCommand}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Notice the "{Binding}" keyword, this "binds" each datatemplate to a member with that name on its own view model, in this case IsChecked and Label.

To load your ViewModel add the following line to the code-behind in your usercontrol(using MVVM you will rarely touch the code-behind of usercontrols at all).

this.DataContext = new ViewModel();

When its your first time seeing a viewmodel it may seem like a lot of work but its mostly re-usable and is the defacto standard for doing things like this (MVVM), Ive included all necessary code to get you started.

The following class as well as DelegateCommand should be kept for later use, I have already included it in the above snippet

    public class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        // Create the OnPropertyChanged method to raise the event
        protected void OnPropertyChanged(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(name));
            }
        }
    }

Answer 2

I'd recommend you to use a viewmodel in the back. That VM exposes a command that is bound to the button. In addition it exposes a DependencyProperty containing the name for the label. And the label is bound to that property. Now if you press the button, the command is executed, which changes the label text and via databinding the new text will be updated on the label.

The other option, I wouldn't recommend, is to use FindName to find the Label. Or really bad (but works) is to iterate over the controls using the VisualTreeHelper.

Answer 3

I would navigate the VisualTree to find the parent StackPanel , then search that StackPanel to find a child Label to update.

If you're interested, I have some VisualTreeHelpers posted on my blog that would make this easy:

var parent = VisualTreeHelpers.FindAncestor<StackPanel>((Button)sender);
if (parent == null) return;

var lbl = VisualTreeHelpers.FindChild<Label>(parent);
if (lbl == null) return;

lbl.Content = "Some Text";

This is providing I'm not using the MVVM design pattern. If I were using MVVM, I would be storing the Label.Content property in the ViewModel , and the Button command should point to a Command in the ViewModel , and it should pass it the DataBound item as the CommandParameter so it knows which Label to update.

<ControlTemplate x:Key="ListBoxItemControlTemplate1" TargetType="{x:Type ListBoxItem}">
    <StackPanel Orientation="Horizontal" Background="Silver">
        <CheckBox Content="CheckBox" VerticalAlignment="Center"/>
        <Label Content="{Binding SomeText}" ... />
        <Button Content="Edit" 
                Command="{Binding ElementName=MyListBox, Path=DataContext.EditCommand}"
                CommandParameter="{Binding }" />
    </StackPanel>
</ControlTemplate>